ecommerce website shopfinity

商城

欢迎使用Shopfinity ，这是一款采用最新技术构建的高级电子商务应用程序。 Shopfinity 提供全面的在线购物解决方案，包括用户身份验证、产品管理、支付处理和直观的管理仪表板。

特征

• Next.js 14 ：利用 Next.js 的最新应用程序路由器和功能来实现快速、SEO 友好且服务器端渲染的 Web 应用程序。
• MongoDB ：用于高效数据存储和检索的 NoSQL 数据库。
• Auth.js (Next-Auth) ：安全且可扩展的身份验证解决方案。
• Stripe ：用于处理交易的集成支付网关。
• 管理仪表板：无缝管理产品、订单和用户。
• 响应式设计：确保在所有设备上提供出色的用户体验。
• 送货地址收集：轻松收集和管理送货详细信息。
• Tailwind CSS ：用于高效且可定制的样式。

入门

先决条件

• Node.js（v14.x 或更高版本）
• npm（v6.x 或更高版本）或yarn（v1.x 或更高版本）
• MongoDB实例
• Stripe 帐户和 API 密钥

安装

1. 克隆存储库

   git clone https://github.com/yourusername/shopfinity.git
   cd shopfinity

2. 安装依赖项

   npm install
   # or
   yarn install

3. 环境变量

   在根目录下创建.env.local文件，添加以下环境变量：

    MONGODB_URI=your_mongodb_connection_string
   AUTH_SECRET=your_auth_secret
   AUTH_GITHUB_ID=your_github_client_id
   AUTH_GITHUB_SECRET=your_github_client_secret
   AUTH_GOOGLE_ID=your_google_client_id
   AUTH_GOOGLE_SECRET=your_google_client_secret
   NEXT_STRIPE_SECRET_KEY=your_stripe_secret_key
   NEXT_STRIPE_PUBLIC_KEY=your_stripe_public_key
   STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
   RESEND_API_KEY=your_resend_api_key
   NEXT_ADMIN_EMAIL=your_admin_email
   AUTH_TRUST_HOST=true
   

4. 运行开发服务器

   npm run dev
   # or
   yarn dev

   用浏览器打开http://localhost:3000查看结果。

项目结构

• /app ：包含所有路由。
• /components ：可重用的 React 组件。
• /lib ：MongoDB、Stripe 和身份验证的配置。
• /lib/models ：MongoDB 的 Mongoose 模型。
• /utils ：实用函数。

用法

验证

• 用户可以使用电子邮件或第三方提供商（Google、GitHub 等）进行注册和登录。
• 经过身份验证的用户可以访问他们的个人资料、订单历史记录等。

管理仪表板

• 仅具有管理员权限的用户可以访问。
• 管理产品：添加、编辑或删除产品。
• 管理订单：查看订单详情，更新订单状态。
• 管理用户：查看用户信息，分配管理员角色。

付款方式

• 与 Stripe 集成以实现安全支付处理。
• 用户可以将商品添加到购物车并继续结帐。
• 结账时收集送货地址。

顺风 CSS

• Tailwind CSS 用于样式设置。您可以通过编辑tailwind.config.js文件并在styles/globals.css文件中添加自定义 CSS 类来自定义样式。

贡献

我们欢迎贡献！请按照以下步骤进行贡献：

1. 分叉存储库。
2. 创建一个新分支（ git checkout -b feature/your-feature ）。
3. 做出你的改变。
4. 提交您的更改（ git commit -am 'Add new feature' ）。
5. 推送到分支（ git push origin feature/your-feature ）。
6. 创建一个新的拉取请求。

执照

该项目已获得 MIT 许可证的许可。有关更多详细信息，请参阅许可证文件。

致谢

• Next.js
• MongoDB
• Auth.js（下一个Auth）
• 条纹
• 顺风 CSS

---

现场演示

请在此处查看 Shopfinity 的现场演示。

您可以根据项目的具体要求随意自定义此README.md文件。享受使用 Shopfinity 进行构建的乐趣！