E-Commerce Product Page with Cart Functionality
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức phù hợp với người mới
- 38/100
Hướng nghiên cứu
Bắt đầu bằng cách xác định entry point của trang sản phẩm và thiết lập styling hiện có, sau đó xem xét cách tải dữ liệu sản phẩm từ FakeStoreAPI hoặc một tệp JSON. Triển khai danh sách sản phẩm, bản xem trước giỏ hàng dạng nổi, các điều khiển số lượng, tính tổng, khả năng lưu trạng thái bằng localStorage và toast khi thêm mặt hàng; được xem là hoàn tất khi tất cả các tương tác với giỏ hàng được liệt kê đều hoạt động sau khi tải lại trang.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
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.
- Ngôn ngữ chính
- HTML
- Star
- 10
- Fork
- 77
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Chuẩn bị môi trường
Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của CommunityOfCoders/WebGenesis
-
Movie Night PlannerĐang mởHard Node + Express React
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100
-
Hard Node + Express Vite React
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 45/100
-
Hard Node + Express Vite React
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100
-
Flask Hard React
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100
-
Framer Hard React
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 35/100
Tất cả issue của CommunityOfCoders/WebGenesis
Issue tương tự
-
bug P3 UI/UX
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
Maintainer thường phản hồi trong vòng 1 ngày
-
enhancement feature
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
rsp777/service-pulse-app#28 ·
-
harlan-agent-ready-to-implement routine:ci-review
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
harlan-zw/unlighthouse#455 · 2 bình luận ·
Maintainer thường phản hồi trong vòng 1 ngày
-
New subtasks don't appear in the board card counter and disappear after switching views, until restartCó thể đã có người làm @hatimpaloda88 đã nhận hôm nay. Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 86/100
Maintainer thường phản hồi trong vòng 3 ngày
-
beginner enhancement good first issue
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
philaconvalley/website#217 ·
Maintainer thường phản hồi trong vòng 1 ngày