This project is a solution for the product list display with a shopping cart challenge from the Frontend Mentor platform. Thank you for checking it out, and I hope you enjoy it!
Technologies Used 💻
- React.js
- Styled Components
- Context API
- JavaScript (ES6+)
The goal of this project was to create a product list view component that allows users to add and remove items from the shopping cart, following the design proposed by the Frontend Mentor platform. The main focus was on:
- Implementing a user-friendly and interactive interface.
- Managing the shopping cart state using the Context API.
- Integrating modals for order confirmation.
- Implementing a responsive layout that adapts to different screen sizes while maintaining the visual integrity of the original design.
- Ensuring elements such as the cover image and article details adjust properly on mobile and desktop devices.
- Creating a feature where users can click a button to display social media sharing options.
- Precisely positioning the share box over the button and adding an indicator arrow for improved usability.
- Adding visual changes to the share button when clicked, such as color and icon alterations.
- Implementing a system to add, remove, and manage items in the cart using
useContext. - Saving the cart state in
localStorageto preserve items when the page is reloaded.
- Using Styled Components to modularize the CSS and maintain code organization.
- Adding smooth transitions to visual elements like the add-to-cart button and confirmation modal.
- Ensuring accessibility with ARIA attributes to enhance the user experience.
This project was an excellent opportunity to practice concepts of state management in React, using the Context API, and developing interactive and responsive interfaces. It also provided a chance to enhance styling skills with Styled Components.
The project is available for viewing through GitHub Pages. Check out the final result here.