E-Commerce Product Page with Cart Functionality
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 38/100
调研方向
首先定位产品页面的入口点和现有的样式设置，然后查看如何从 FakeStoreAPI 或 JSON 文件加载产品数据。实现产品列表、浮动购物车预览、数量控件、总计计算、localStorage 持久化以及添加商品提示；完成的标准是，页面重新加载后，列出的所有购物车交互都能正常工作。
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- HTML
- 星标
- 10
- 派生
- 77
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
CommunityOfCoders/WebGenesis 的其他 Issue
-
Hard Node + Express React
难度 5/5 一周以上 新手友好度 25/100
-
Hard Node + Express Vite React
难度 4/5 3-5 天 新手友好度 45/100
-
Hard Node + Express Vite React
难度 5/5 一周以上 新手友好度 25/100
-
Flask Hard React
难度 5/5 一周以上 新手友好度 25/100
-
Framer Hard React
难度 4/5 3-5 天 新手友好度 35/100
查看 CommunityOfCoders/WebGenesis 的全部 Issue
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
area:desktop priority:p2 type:chore
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
area: right sidebar
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 67/100
维护者通常 1 天内回复