アプリはライブで実行されています
https://nextjs-ecommerce-typescript.vercel.app/
著者
特徴
注記
- 管理者ダッシュボードは、複製した場合にのみアクセスできます。管理者アカウントにサインアップすることはできません。ダミーの製品とカテゴリを追加しました。
マルチユーザーログインシステム
- サインイン/サインアップ ✔
- パスワードを忘れた場合 ✔
- 各承認されたリクエストに対する JWT 検証 ✔
- 管理者アクセスと顧客アクセスの認証検証 ✔
管理パネル
- 商品を追加する ✔
- 製品を見る ✔
- 製品を削除する ✔
- 製品を更新する ✔
- カテゴリを追加 ✔
- カテゴリの表示 (データテーブル) ✔
- カテゴリを更新する ✔
- カテゴリを削除 ✔
- カテゴリを名前で検索 ✔
- カテゴリ名から製品を検索 ✔
- 注文の配達を処理する ✔
- 未決注文リスト ✔
- 完了した注文リスト ✔
お客様
- 製品とカテゴリを見る ✔
- 特定のカテゴリに関連する製品を表示する ✔
- ブレッドキャンプで動的ページの詳細を表示する ✔
- 商品をカートに追加 ✔
- カートから商品を削除 ✔
- 増やす カートの商品数量を減らす ✔ (商品の在庫数量がカートの数量より少ない場合、その商品の数量を増やすことはできません)
- 在庫数量が利用できない場合に警告する ✔
- お気に入りの商品をブックマークする ✔
- ブックマークから商品を削除 ✔
- 商品を注文する ✔
- 注文を作成した後、現在のユーザーのカートに製品が存在するとクリアされます ✔
- 注文ステータスを追跡する ✔
- 注文の詳細を表示 ✔
注記
時間の経過とともにさらに多くの機能が追加されます
技術
- Nextjs 13
- タイプスクリプト
- 追い風CSS
- Reduxツールキット
- 攘夷検証
- モンゴDB
- APIを取得するためのSWRフック
環境変数
このプロジェクトを実行するには、次の環境変数を .env ファイルに追加する必要があります。
DB_URI = mongoDB URL
JWT_SECREAT = カスタム JWT_SECREAT キー
NEXT_PUBLIC_API_BASE_URL = ローカルホストのベース URL => http://localhost:3000
インストール
npm を使用して my-project をインストールする
npm install
npm run dev (for development server)
npm run build (for Production)
npm run preview (To View Production Server )
スクリーンショット
管理者ダッシュボード
管理者が製品を追加
管理者がカテゴリを追加
管理者ビューのカテゴリ
管理者ビュー製品
管理者はカテゴリ名の製品を検索します
カテゴリ名の管理者検索カテゴリ
未決注文リスト
完了した注文リスト
ランディングページ
Dynamic Breadcamp を使用して特定のカテゴリの製品を表示する
Dynamic Breadcamp を使用した製品の詳細を表示
カートページ
アイテムの数量が在庫にない場合にアラートを送信する
お気に入りの製品
お気に入りの商品を削除する
お気に入りの商品を商品名で検索
製品を注文する
注文の追跡
注文内容を確認する
