spectrum store

頻譜商店

頻譜商店|由 Next.js、TypeScript 和 Shadcn 提供支援的強大電子商務平台

它利用了 Fake Store API，它具有管理儀表板和 JWT 身份驗證。

它的設計重點關注安全性，實現了路由和伺服器操作的最佳實踐。

查看示範。報告錯誤。請求功能

---

特徵

科技

• Next js 14最後的功能

• 接下來js伺服器操作+ axios + zod

• React hook 表單+ 使用zod驗證客戶端和伺服器

• 身份驗證JWT + Cookies +授權資料層 +中間件

主要的

• 使用JWT身份驗證 +登出的登入頁面

• 帶有網格佈局的主頁

• 產品頁面顯示所有帶有類別篩選器的產品

• 產品詳細資訊頁面，包含評級、定價和添加購物車按鈕

• 購物車抽屜（加入購物車，從購物車刪除）

• 全域搜尋功能

• 主題切換器（淺色/深色模式）

• 載入動畫和骨架

• 具有用於產品、分頁、搜尋圖表的 CRUD 操作的管理儀表板

• 牢記安全性：身份驗證（JWT + Cookie）和授權資料層 +中間件和帶有驗證的伺服器操作

• 優化的 SEO 和效能：該專案使用最新的 Next.js 功能以及元標記和Next/Image &&網站地圖的最佳實踐，針對 SEO 和效能進行了最佳化。

• 響應式設計

筆記

• 您可以使用任何fakestoreapi使用者登入

• 對於管理員角色僅使用預設值

• 使用者名稱：mor_2314

• 密碼：83r5^_

• 您可以按照以下步驟開啟管理儀表板並對產品執行 CRUD 操作：

• 確保您使用管理員帳號登入（ mor_2314 ）

• 點擊用戶圖標

• 點擊儀表板

入門

首先，運行開發伺服器：

1. 克隆或分叉儲存庫

   git 克隆 https://github.com/issam-seghir/spectrum-store.gitcd ./your_project

2. 安裝依賴項

   npm 安裝

3. 將.env.example檔案重新命名為.env

4. 啟動伺服器

   npm 運行開發

用瀏覽器開啟http://localhost:3000查看結果。

您可以透過修改app/page.tsx開始編輯頁面。當您編輯文件時，頁面會自動更新。

在 Vercel 上部署

部署 Next.js 應用程式最簡單的方法是使用 Next.js 創建者提供的 Vercel 平台。

請查看我們的 Next.js 部署文件以了解更多詳細資訊。

貢獻

貢獻使開源社群成為學習、啟發和創造的絕佳場所。我們非常感謝您所做的任何貢獻。

如果您有更好的建議，請分叉該儲存庫並建立拉取請求。您也可以簡單地使用標籤“增強”來開啟問題。不要忘記給該項目一顆星！再次感謝！

1. 分叉項目

2. 建立您的功能分支（ git checkout -b feature/AmazingFeature ）

3. 提交您的更改（ git commit -m 'Add some AmazingFeature' ）

4. 推到分支（ git push origin feature/AmazingFeature ）

5. 打開拉取請求

執照

根據 MIT 許可證分發。有關詳細信息，請參閱LICENSE.txt 。