https://github.com/abdelrahmanhassanalii/productlistwithcart

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.
https://github.com/abdelrahmanhassanalii/productlistwithcart

cont css3 ecmascript6 html5 javascript reactjs styled-components tailwindcss vite

Last synced: 8 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/abdelrahmanhassanalii/productlistwithcart
• Owner: AbdelrahmanHassanAlii
• Created: 2024-12-04T22:47:38.000Z (18 days ago)
• Default Branch: master
• Last Pushed: 2024-12-04T23:20:23.000Z (18 days ago)
• Last Synced: 2024-12-14T17:10:58.584Z (8 days ago)
• Topics: cont, css3, ecmascript6, html5, javascript, reactjs, styled-components, tailwindcss, vite
• Language: JavaScript
• Homepage: https://product-list-with-cart-pied-six.vercel.app
• Size: 1.92 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Product List with Cart

![Design preview for product-list-with-cart-main](./public/design/preview.jpg)

## Hello, welcome to my repository! 👋

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

Technologies Used 💻

* React.js

* Styled Components

* Context API

* JavaScript (ES6+)

## Objective and Challenge

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.

## Main Challenges Included:

### Building the Layout:

* 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.

### Share Functionality:

* 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.

### Shopping Cart Functionality:

* Implementing a system to add, remove, and manage items in the cart using `useContext`.

* Saving the cart state in `localStorage` to preserve items when the page is reloaded.

### Styling and Interactivity:

* 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.

## 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.

## Project Deployment

The project is available for viewing through GitHub Pages. Check out the final result [here](https://product-list-with-cart-pied-six.vercel.app/).