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