next tailwind amazona

構建NextJS電子商務網站，例如亞馬遜

• 技術：NextJS 13，下一個身份驗證4
• UI：tailwind，Chart.js，React-chartjs
• DB：Mongodb，貓鼬
• 付款：貝寶，條紋
• 內容託管：雲
• 部署：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基礎知識，例如設置項目，在頁面和數據獲取之間導航
• NextJS高級主題，例如動態路由，圖像優化，SSG和SSR
• 使用自定義主題，動畫和旋轉木馬建立響應式網站的尾風CSS框架
• ReactJ包括分解組件，上下文API和鉤子
• 下一個驗證包來驗證客戶和管理用戶
• MongoDB和Mongoose保存和檢索產品，訂單和用戶等數據
• 貝寶開發人員API進行在線付款
• 在諸如Vercel和Netlify之類的服務器上部署Web應用程序

完整的課程

在Thinkific：https：//basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90上獲得90％的折扣：

本地運行

1. 克隆回購

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

2. 創建.env文件

   • 重複.env.example並將其重命名為.env

3. 設置MongoDB

   • 當地的蒙古德
   • 從這里安裝
   • 在.env文件中更新mongodb_uri = mongodb：// localhost/amazamaona
   • 或Atlas Cloud MongoDB
   • 在https://cloud.mongodb.com上創建數據庫
   • 在.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/登錄
   • 輸入管理電子郵件和密碼，然後單擊登錄

教訓

1. 介紹
2. 安裝工具
3. 創建下一個應用程序
4. 發佈到Github
5. 創建網站佈局
   1. 創建佈局組件
   2. 添加標題
   3. 添加主部分
   4. 添加頁腳
   5. 添加尾風課
6. 列出產品
   1. 添加data.js
   2. 添加圖像
   3. 渲染產品
7. 創建產品詳細信息
   1. 創建產品頁面
   2. 創建3列
   3. 在第一列中顯示圖像
   4. 在第二列中顯示產品信息
   5. 顯示第三列上的添加到購物車動作
   6. 添加樣式
8. 處理添加到購物車
   1. 定義反應上下文
   2. 定義購物車項目狀態
   3. 創建ADDD到購物車動作
   4. 添加還原器
   5. 創建商店提供商
   6. 處理添加到購物車按鈕
9. 創建購物車頁面
   1. 創建購物車
   2. 使用上下文獲取購物車項目
   3. 列出購物車項目中的項目
   4. 添加到購物車之後，重定向到購物車屏幕
10. 在購物車中更新數量
    1. 添加選擇框以進行數量
    2. 處理選擇框更改
11. 保存購物車項目
    1. 安裝JS-Cookie軟件包
    2. 在餅乾中保存和retre式購物車
12. 創建登錄表單
    1. 安裝react鉤形形式
    2. 創建輸入框
    3. 添加登錄按鈕
13. 連接到MongoDB
    1. 安裝貓鼬
    2. 安裝MongoDB或使用MongoDB Atlas
    3. 將連接URL保存在.env文件中
    4. 創建DB Utils文件
    5. 創建示例用戶
14. 創建登錄API
    1. 安裝下一個作者
    2. 創建NextAuth.js
    3. 實施標誌
    4. 在登錄表格中使用Signin
15. 添加用戶菜單
    1. 檢查用戶身份驗證
    2. 安裝Headlessui
    3. 顯示用戶菜單
16. 創建運輸屏幕
    1. 顯示地址字段
    2. 在上下文中保存地址
17. 創建付款方式屏幕
    1. Dispaly付款方式
    2. 在上下文中保存付款方式
18. 種子樣品
    1. 在貓鼬中創建產品模型
    2. 將樣品產品插入MongoDB
19. 加載產品蒙古
    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. 添加貝寶按鈕
    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. 創建雲帳戶
    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. 顯示過濾器