CommunityOfCoders / CommunityOfCoders/WebGenesis

E-Commerce Product Page with Cart Functionality

Open
#18 0 comments 0 reactions 0 assignees View on GitHub
Medium React TailwindCSS
Dominant language
HTML
Stars
10
Forks
77
PR merge metrics
No merged PRs in 30d

Description

Build a dynamic e-commerce product page where users can:

- View a list of products fetched from a mock API (e.g., FakeStoreAPI or a JSON file).
- Add products to a cart with a button.
- Remove products from the cart from both the product listing and cart preview.
- See a floating cart preview that updates in real-time when items are added or removed.
- Use localStorage to persist the cart items across page reloads.
- Quantity Selector: Allow users to increase/decrease item quantity inside the cart.
- Total Price Calculation: Display the total cost of items in the cart.
- Toast Notifications: Show a small alert (e.g., "Item added to cart") when a product is added.

Requirements & Technologies
React: Use functional components and hooks (useState, useEffect).
Tailwind CSS: Style the product grid, buttons, and floating cart using Tailwind’s utility classes.
LocalStorage: Store cart data so that users don’t lose their cart on refresh.
Mock API (FakeStoreAPI or JSON file): Fetch product data dynamically instead of hardcoding it.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.