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 。