In this project I practiced the use of React hooks like useState, useReducer and useContext. I used Tailwindcss for CSS framework, React.js for JS fremework and Vite for module bundler and development environment. I used HeadlessUI for the Navbar component.
In this project, I basically aimed to practice map objects, implement useContext and create responsive UI.

• Vite
• React
• Tailwindcss

To help with development or to test it on your own computer, you can run the project by typing yarn in the terminal and then yarn dev. The project will run without any problems.

• Fully Responsive
• Minimal UI
• Scrolling Gallery with Scroll Snap Features
• Add and Delete Products to Cart
• View the number of products in the cart
• And more

In the application, the user can view the products they have selected in the cart section that opens as offcanvas. This cart shows another image in an empty state and prompts the user to select the products. If the product is selected, the user can find how many of this product were selected, the total amount of the product and the total amount of all selected products. In the same section, the user can delete all selected products from the cart.

This section was very useful for me to understand the Context and Reducer structure and to use them in different layers of the application.

I also created reusable UI components such as Button, Rating, Card and Badge in the application. In this way, I avoided code repetition by using these components in different parts of the application.

Finally, I created a simple scrolling gallery using Tailwindcss and scroll snap features in our references section.

Please don't hesitate to give me feedback on your reviews. I really care about this feedback and find it very valuable to improve myself.

You can send your feedback through the communication channels in my profile or [email protected].