E-Commerce Product Page with Cart Functionality
まだ誰も着手していません。
評価
- 難易度
- 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
CommunityOfCoders/WebGenesis のほかの issue
-
Movie Night PlannerオープンHard Node + Express React
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
Hard Node + Express Vite React
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
-
Hard Node + Express Vite React
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
Flask Hard React
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
Framer Hard React
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
CommunityOfCoders/WebGenesis の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 73/100
LanternOps/breeze#9392 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
Normal actions use the red "danger" button style in friend link prompts and unsaved-changes dialogsオープンarea:core-app area:playlist area:theming bug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
HelloAOLab/seed-bible#2033 ·
メンテナーはふだん 1 日以内に返信
-
bug good first issue hacktoberfest
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
codercops/discord-bot#56 ·
メンテナーはふだん 1 日以内に返信
-
freebie Rising styling
難易度 2/5 1〜3時間 初心者へのやさしさ 63/100
Fchat-Horizon/Horizon#997 ·
メンテナーはふだん 5 日以内に返信
-
affects:v0.5.2 area:frontend audit:ui-ux-2026-10 bug priority:P2
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
berntpopp/kidney-genetics-db#326 ·
メンテナーはふだん 1 日以内に返信