Next.js Product Filters Project

Welcome to the Next.js Product Filters Project! This project is created for learning purposes and serves as an example of building a product filtering system using query params for enhanced SEO and better overview of what is being searched for.

Technologies Used

• Next.js 14.2.5: A React framework for server-side rendering and static site generation.
• Tailwind CSS: A utility-first CSS framework for styling.
• Shadcn UI: A UI library for building responsive and accessible user interfaces.
• Tanstack Query: A powerful data-fetching library for managing server state in React applications.
• DALL-E: Used to generate the hero image and favicon for the project, leveraging OpenAI's image generation capabilities.
• Fake Store API: A free API providing fake data for testing and prototyping e-commerce applications. This project uses it to fetch product data.

Features

• Product Filters: Users can filter products by search term, category, price, rating, and sorting options.
• Dynamic URL Parameters: The filtering system updates the URL with search parameters, allowing users to share filtered results easily.
• Responsive Design: The UI is responsive and works well on both desktop and mobile devices.

Getting Started

you can check out the demo here

1. Clone the Repository

   git clone https://github.com/invocation97/next-query-param-product-filtering

2. Install Dependencies

   Navigate to the project directory and install the necessary dependencies:

   cd next-query-param-product-filtering
   npm install

3. Run the Development Server

   Start the development server:

   npm run dev

   The project will be available at http://localhost:3000.

Contributing

Feel free to clone or fork this repository for your learning and experimentation. If you find the project helpful, please consider starring the repository on GitHub. We welcome any feedback or suggestions to improve the project!

Acknowledgments

Special thanks to the creators of the libraries and tools used in this project, and to OpenAI for providing DALL-E for generating the hero image and favicon.

Contact

For any questions or feedback, please open an issue on GitHub or contact me directly.

Star the Repository

---