next e commerce

电子商务网站

演示：https：//next-e-commerce-example.vercel.app/

我在1周内为自我挑战而制作的Next.js构建的电子商务网站示例。我以后会处理一些问题。使用Firebase作为后端。

联系我·报告错误·请求功能

目录

• 关于项目
  • 建立
• 屏幕截图
  • 家（新闻）
  • 类别
  • 产品
  • 大车
  • 帐户
• 入门
  • 先决条件
  • 安装
• 问题 /功能计划
• 贡献
• 问题和答案
• 执照
• 接触

关于项目

我在Anton Mikhaltsov的Dribbble上看到了UI设计。我想编写此设计。因此，我决定将其与NextJ一起成为一个完整的网站，但在短短1周内作为挑战。仍然存在一些问题，但稍后我将检查它们。

• 过滤器和排序按钮尚未工作。
• 由于时间还不够，网站的响应率不足100。我目前正在研究它。现在，这是响应迅速的。
• 燃烧功能可能会更好
• 主页（新闻中）卡没有重定向。他们只是占位符。

建立

• 反应
• nextjs
• 火基
• React Hook形式
• date-fns
• Sass

屏幕截图

新闻进入

• 卡没有链接，它们是静态的，他们只是占位符。

类别

产品

大车

帐户

入门

先决条件

• Node.js版本10.13或更高版本
• git（我使用了2.20.1）

安装

1. 您需要创建一个firebase项目

2. 克隆回购并更改目录

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce

3. 安装NPM软件包

npm install

4. 使用此内容在Root文件夹（Next-e-Commerce）上创建.env.Local文件。放置您的firebase键。

 NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id

5. 在开发模式下运行

npm run dev

问题 - 未来计划

• 过滤和排序按钮
• 优化Firestore查询功能
• 在购物车页面上，减少项目按钮不起作用
• 网站将为％100响应迅速
• 用语义标签替换一些HTML标签

贡献

贡献是使开源社区成为学习，启发和创造的惊人场所的原因。您所做的任何贡献都非常感谢。

1. 分叉项目
2. 创建您的功能分支（ git checkout -b feature/AmazingFeature ）
3. 提交您的更改（ git commit -m 'Add some AmazingFeature' ）
4. 推到分支机构（ git push origin feature/AmazingFeature ）
5. 打开拉请请求

问答

• 问题：我创建了Firebase项目，但我不熟悉它。那我该怎么办？答：您可以与我联系有关设置Firebase项目的联系，我很乐意为您提供帮助。

• 问题：我创建了Firebase项目，但没有数据库结构。那我该怎么办？答：请与我联系以获取我创建的数据库结构。

• 问题：为什么不共享数据库结构？答：我只想知道某人是否对此项目感兴趣：D

• 问题：我该如何做出贡献？答：即使您只是明星这个项目，也会让我开心。对于代码贡献，您可以在更改后分配回购并打开拉动请求。任何反馈对我也很重要。您可以打开问题或向我发送消息。

• 问题：您设计了UI吗？答：不，我实际上没有设计。我在Anton Mikhaltsov的Dribbble上找到了主页设计。除主页外，其他UI选择是我的。当我在有限的时间内创建此网站时，我并没有经常考虑UI/UX。因此，您还可以反馈我的设计。

执照

根据GPL许可分配。有关更多信息，请参见LICENSE 。

接触

@anilsenay

项目链接：https：//github.com/anilsenay/next-e-commerce