https://github.com/nabedkhan/product-list-filtering
Product List Filtering using Vue
https://github.com/nabedkhan/product-list-filtering
e-commerce product product-filter product-listing product-pagination product-sorting vue-3 vue-composition-api vue-router
Last synced: 3 months ago
JSON representation
Product List Filtering using Vue
- Host: GitHub
- URL: https://github.com/nabedkhan/product-list-filtering
- Owner: nabedkhan
- Created: 2023-08-01T08:45:44.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-18T14:10:55.000Z (almost 3 years ago)
- Last Synced: 2025-03-03T07:30:59.265Z (over 1 year ago)
- Topics: e-commerce, product, product-filter, product-listing, product-pagination, product-sorting, vue-3, vue-composition-api, vue-router
- Language: Vue
- Homepage: https://product-filtering-vue.netlify.app
- Size: 91.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product List Filtering with Vue 3
A modern e-commerce product listing page built with Vue 3, Pinia, and Tailwind CSS that demonstrates advanced filtering, sorting, and pagination functionality.
**Live Demo:** [https://product-filtering-vue.netlify.app](https://product-filtering-vue.netlify.app)
## Features
- ✅ **Category-Based Filtering**: Filter products by multiple categories
- ✅ **Price Range Filtering**: Filter products within specific price ranges
- ✅ **Price Sorting**: Sort products by price (low to high, high to low)
- ✅ **Search Functionality**: Find products by name or description
- ✅ **Pagination System**: Navigate through product pages with ease
- ✅ **Adjustable Page Size**: Change the number of products displayed per page
- ✅ **Responsive Design**: Works seamlessly on mobile, tablet, and desktop
- ✅ **State Management**: Centralized state management with Pinia
## Technologies Used
- **Vue 3**: Frontend framework with Composition API
- **Vite**: Next generation frontend tooling
- **Pinia**: State management for Vue applications
- **Tailwind CSS**: Utility-first CSS framework
- **Vue Router**: Official router for Vue.js
- **SweetAlert2**: Beautiful, responsive, customizable alert boxes
- **SimpleBar**: Custom scrollbars with native scroll behavior
- **Netlify**: Deployment and hosting platform
## Project Setup
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```
git clone https://github.com/nabedkhan/product-list-filtering.git
cd product-list-filtering
```
2. Install dependencies:
```
npm install
```
3. Run development server:
```
npm run dev
```
4. Build for production:
```
npm run build
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is open source and available under the [MIT License](LICENSE).
## Contact
Nabed Khan - [GitHub Profile](https://github.com/nabedkhan)