next tailwind amazona

AmazonのようなNextJS eコマースWebサイトを構築します

• Tech：NextJS 13、Next Auth 4
• UI：Tailwind、chart.js、React-chartjs
• DB：Mongodb、Mongoose
• 支払い：PayPal、Stripe
• コンテンツホスティング：Cloudinary
• 展開：github、vercel、mongodb atlas

リソース

• YouTubeビデオ：https：//youtu.be/_iblyr5mrza
• デモのウェブサイト：https：//next-tailwind-amazona.vercel.app
• ソースコード：https：//github.com/basir/next-tailwind-amazona
• フルコース：basir.thinkific.com

あなたが学ぶこと

• [プロジェクトの設定]、ページ間のナビゲート、データフェッチなどの基本
• NextJSダイナミックルーティング、画像最適化、SSG、SSRなどの高度なトピック
• カスタムテーマ、アニメーション、カルーセルを使用してレスポンシブWebサイトを構築するためのTailwind CSSフレームワーク
• コンポーネントの分解、コンテキストAPI、フックなどのReactJ
• 顧客と管理者ユーザーを認証する次のAUTHパッケージ
• 製品、注文、ユーザーなどのデータを保存および取得するためのmongodbとmongoose
• PayPal Developer APIは、オンラインで支払いを行います
• VercelやNetlifyなどのサーバーにWebアプリケーションを展開します

フルコース

このコースをThinkificで90％割引してください：https：//basir.thinkific.com/courses/build-ecommerce-website--amazon-by-next-js?coupon=save90

ローカルで実行します

1. クローンリポジトリ

    $ git clone [email protected]:basir/next-tailwind-amazona.git
    $ cd next-tailwind-amazona

2. .envファイルを作成します

   • duplicate .env.env.exampleを.envに変更します

3. Mongodbをセットアップします

   • 地元のmongodb
   • ここからインストールしてください
   • in .envファイルアップデートmongodb_uri = mongodb：// localhost/amazona
   • またはAtlas Cloud Mongodb
   • https://cloud.mongodb.comでデータベースを作成します
   • in .envファイルの更新mongodb_uri = mongodb+srv：// your-db-connection

4. インストールして実行します

     npm install
     npm run dev

5. シードデータ

   • これをブラウザで実行します：http：// localhost：5000/api/seed
   • 管理者の電子メールとパスワードと6つのサンプル製品を返します

6. 管理者ログイン

   • http：// localhost：3000/loginを実行します
   • 管理者のメールとパスワードを入力し、[ログイン]をクリックします

レッスン

1. 導入
2. ツールをインストールします
3. 次のアプリを作成します
4. Githubに公開します
5. ウェブサイトのレイアウトを作成します
   1. レイアウトコンポーネントを作成します
   2. ヘッダーを追加します
   3. メインセクションを追加します
   4. フッターを追加します
   5. Tailwindクラスを追加します
6. 製品をリストします
   1. data.jsを追加します
   2. 画像を追加します
   3. レンダリング製品
7. 製品の詳細を作成します
   1. 製品ページを作成します
   2. 3つの列を作成します
   3. 最初の列に画像を表示します
   4. 2番目の列に製品情報を表示します
   5. 3番目の列のカートアクションに追加を表示します
   6. スタイルを追加します
8. ハンドルカートに追加します
   1. Reactコンテキストを定義します
   2. カートアイテムの状態を定義します
   3. カートアクションへの追加を作成します
   4. 還元剤を追加します
   5. ストアプロバイダーを作成します
   6. ハンドルカートボタンに追加します
9. カートページを作成します
   1. Cart.jsを作成します
   2. コンテキストを使用してカートアイテムを取得します
   3. カートアイテムのアイテムをリストします
   4. カートに追加した後、カート画面にリダイレクトします
10. カートの数量を更新します
    1. 数量の選択ボックスを追加します
    2. 選択ボックスの変更を処理します
11. カートアイテムを保存します
    1. JS-Cookieパッケージをインストールします
    2. Cookieでカートアイテムを保存して再生します
12. ログインフォームを作成します
    1. Reactフックフォームをインストールします
    2. 入力ボックスを作成します
    3. ログインボタンを追加します
13. Mongodbに接続します
    1. Mongooseをインストールします
    2. Mongodbをインストールするか、Mongodb Atlasを使用します
    3. 接続urlを.envファイルに保存します
    4. DB utilsファイルを作成します
    5. サンプルユーザーを作成します
14. ログインAPIを作成します
    1. Next-authをインストールします
    2. nextauth.jsを作成します
    3. Signinを実装します
    4. ログインフォームでSigninを使用します
15. ユーザーメニューを追加します
    1. ユーザー認証を確認してください
    2. headlessuiをインストールします
    3. ユーザーメニューを表示します
16. 配送画面を作成します
    1. アドレスフィールドを表示します
    2. コンテキストでアドレスを保存します
17. 支払い方法画面を作成します
    1. 分解支払い方法
    2. コンテキストで支払い方法を保存します
18. シードサンプル製品
    1. Mongooseで製品モデルを作成します
    2. サンプル製品をmongodbに挿入します
19. 製品をロードするmongodb
    1. Mongodbのホームページに製品をロードします
    2. Mongodbの製品ページに製品をロードします
    3. 製品APIを使用して、カートに追加のカウントインストックを確認します
20. 場所の注文画面を作成します
    1. 配送先住所を表示します
    2. 支払い方法を表示します
    3. 注文アイテムを表示します
    4. インプレクト順序を作成します
21. 注文画面を作成します
    1. 注文の詳細については、バックエンドAPIを実装します
    2. バックエンドから注文データをロードします
    3. 注文の詳細を表示します
22. レジスタ画面を作成します
    1. サインアップAPIを追加します
    2. 登録ページを作成します
    3. フォームの送信でAPIを呼び出します
23. PayPalによる支払い注文
    1. PayPalボタンを追加します
    2. 支払いを処理します
    3. バックエンドAPIを作成します
    4. 注文状態を更新します
24. 注文履歴画面を作成します
    1. 注文APIを作成します
    2. 注文履歴コンポーネントを作成します
    3. 注文を取得して表示します
25. Vercelで公開します
    1. Vercelアカウントを作成します
    2. Githubに接続します
    3. env varsで次のauthとmongodb dbを設定します
    4. コードをgithubにプッシュします
26. ユーザープロファイルを更新します
    1. プロファイル画面を作成します
    2. ユーザー情報を表示します
    3. 更新ユーザー情報を処理します
27. 管理ダッシュボードを作成します
    1. 管理メニューを作成します
    2. ダッシュボード画面を作成します
    3. 管理概要APIを実装します
28. 管理者のリスト注文
    1. 注文ページを作成します
    2. 注文APIを作成します
    3. ページでAPIを使用します
29. 管理者に注文を配信します
    1. APIの配信を作成します
    2. 配信ボタンを追加します
    3. クリックハンドラーを実装します
30. 管理者の製品をリストします
    1. 製品ページを作成します
    2. 製品APIを作成します
    3. ページでAPIを使用します
31. 製品編集ページを作成します
    1. 編集ページを作成します
    2. 製品のAPIを作成します
    3. 製品データをフォームに表示します
32. 製品画像をアップロードします
    1. Cloudinaryアカウントを作成します
    2. 雲のようなキーを取得します
    3. APIをアップロードします
    4. 編集ページにファイルをアップロードします
33. 製品を作成および削除します
    1. [製品の作成]ボタンを追加します
    2. 新製品APIを構築します
    3. 削除用のハンドラーを追加します
    4. 削除APIを実装します
34. 管理者のユーザーをリストします
    1. ユーザーページを作成します
    2. ユーザーAPIを作成します
    3. ページでAPIを使用します
35. カルーセルを追加します
    1. 特集製品を作成します
    2. カルーセルデータを供給します
    3. 人気のある製品を表示します
36. 検索ページを作成します
    1. フィルターを作成します
    2. 製品をリストします
    3. フィルターを表示します