The small project has been developed using React,Next.js,TailwindCSS,Framer-motion to create a seamless and interactive single-page application.
- Header Component: This component prominently displays the page header text and dynamically updates the number of items in the cart.
- Category Component: Users can explore a range of categories, enabling them to filter products based on their chosen category and color preference.
- Products Component: This section showcases a list of products. Users can personalize their view by utilizing filters and sorting options.
A dedicated context has been implemented to offer users insights into their shopping cart's contents. The context also facilitates operations related to product addition. Also it was only needed cart to keep track of added products to the cart.
- Category Filtering: Users can select a specific category to exclusively display products belonging to that category.
- Color Filtering: The color filter feature allows users to refine their search, showcasing products only in their preferred color.
- Product Sorting: users can sort products by price or name, enhancing the shopping experience.
- Adding Products to Cart: A process allows users to easily add products to their cart, enhancing convenience.
- Decreasing Product Stock: Whenever a product is added to the cart, the stock availability of that item is appropriately reduced.
- Hover Animation: As an engaging user interaction, hovering over a category in the Category component triggers a captivating scaling animation using the Framer Motion library.
- "Add to Cart" Animation: To emphasize the act of adding a product to the cart, a subtle animation draws attention to the "Add to Cart" button, enhancing user engagement.
Feel free to reach out if you have any questions or would like further details about the project.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.