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

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.

Contact

Nabed Khan - GitHub Profile