next e commerce

เว็บไซต์อีคอมเมิร์ซ

ตัวอย่าง: https://next-e-commerce-example.vercel.app/

ตัวอย่างเว็บไซต์อีคอมเมิร์ซที่สร้างขึ้นด้วย next.js ที่ฉันทำใน 1 สัปดาห์เพื่อท้าทายตนเอง มีปัญหาบางอย่างที่ฉันจะจัดการในภายหลัง การใช้ Firebase เป็นแบ็กเอนด์

ติดต่อฉัน·รายงานข้อผิดพลาด·คุณลักษณะการร้องขอ

สารบัญ

• เกี่ยวกับโครงการ
  • สร้างขึ้นด้วย
• ภาพหน้าจอ
  • บ้าน (ข่าวใน)
  • หมวดหมู่
  • ผลิตภัณฑ์
  • เกวียน
  • บัญชี
• เริ่มต้น
  • ข้อกำหนดเบื้องต้น
  • การติดตั้ง
• ปัญหา / แผนคุณสมบัติ
• การบริจาค
• คำถามและคำตอบ
• ใบอนุญาต
• ติดต่อ

เกี่ยวกับโครงการ

ฉันเห็นการออกแบบ UI บน Dribbble โดย Anton Mikhaltsov และฉันต้องการเขียนโค้ดการออกแบบนี้ ดังนั้นฉันจึงตัดสินใจที่จะทำให้เป็นเว็บไซต์ที่ทำงานเต็มรูปแบบกับ NextJs แต่ในเวลาเพียง 1 สัปดาห์เป็นความท้าทายของตัวเอง ปัญหาบางอย่างยังคงอยู่ที่นั่น แต่ฉันจะตรวจสอบในภายหลัง

• ปุ่มกรองและเรียงลำดับยังไม่ทำงาน
• เว็บไซต์ไม่ตอบสนอง %100 เนื่องจากเวลาไม่เพียงพอ ตอนนี้ฉันกำลังดำเนินการอยู่ ตอนนี้มันตอบสนองได้
• ฟังก์ชั่น firebase น่าจะดีกว่า
• โฮมเพจ (ข่าวใน) การ์ดไม่มีการเปลี่ยนเส้นทาง พวกเขาเป็นเพียงตัวยึดตำแหน่ง

สร้างขึ้นด้วย

• ตอบโต้
• nextjs
• ฐานไฟ
• ฟอร์มเบ็ดตอบสนอง
• วันที่
• เขี้ยว

ภาพหน้าจอ

ข่าว

• การ์ดไม่มีลิงค์และพวกเขาคงที่พวกเขาเป็นเพียงตัวยึดตำแหน่ง

หมวดหมู่

ผลิตภัณฑ์

เกวียน

บัญชี

เริ่มต้น

ข้อกำหนดเบื้องต้น

• node.js เวอร์ชัน 10.13 หรือใหม่กว่า
• Git (ฉันใช้ 2.20.1)

การติดตั้ง

1. คุณต้องสร้างโครงการ Firebase

2. โคลน repo และเปลี่ยนไดเรกทอรี

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

3. ติดตั้งแพ็คเกจ NPM

npm install

4. สร้างไฟล์. env.local ของคุณบนโฟลเดอร์รูท (Next-E-Commerce) ด้วยเนื้อหานี้ ใส่ปุ่ม 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. Push to the Branch ( git push origin feature/AmazingFeature )
5. เปิดคำขอดึง

ถาม - ตอบ

• คำถาม: ฉันสร้างโครงการ Firebase แต่ฉันไม่คุ้นเคย ฉันควรทำอย่างไร? คำตอบ : คุณสามารถติดต่อฉันเกี่ยวกับการตั้งค่าโครงการ Firebase ของคุณฉันยินดีช่วยคุณ

• คำถาม: ฉันสร้างโครงการ Firebase แต่ฉันไม่มีโครงสร้างฐานข้อมูล ฉันควรทำอย่างไร? คำตอบ : โปรดติดต่อฉันเพื่อรับโครงสร้างฐานข้อมูลที่ฉันสร้างขึ้น

• คำถาม: ทำไมคุณไม่แบ่งปันโครงสร้างฐานข้อมูลของคุณ? คำตอบ : ฉันแค่อยากรู้ว่ามีคนสนใจในโครงการนี้หรือไม่: D

• คำถาม: ฉันจะมีส่วนร่วมได้อย่างไร? คำตอบ : มันทำให้ฉันมีความสุขแม้ว่าคุณจะเป็นแค่การแสดงโครงการนี้ สำหรับรหัสมีส่วนร่วมคุณสามารถแยก repo และเปิดคำขอดึงหลังจากการเปลี่ยนแปลงของคุณ ข้อเสนอแนะใด ๆ ก็สำคัญสำหรับฉันเช่นกัน คุณสามารถเปิดปัญหาหรือส่งข้อความถึงฉัน

• คำถาม: คุณออกแบบ UI หรือไม่? คำตอบ : ไม่ฉันไม่ได้ออกแบบจริง ฉันพบการออกแบบโฮมเพจบน Dribbble โดย Anton Mikhaltsov ยกเว้นโฮมเพจตัวเลือก UI อื่น ๆ เป็นของฉัน ในขณะที่ฉันสร้างเว็บไซต์นี้ในเวลา จำกัด ฉันไม่ได้คิดเกี่ยวกับ UI/UX มากนัก ดังนั้นคุณยังสามารถตอบกลับฉันเกี่ยวกับการออกแบบ

ใบอนุญาต

แจกจ่ายภายใต้ใบอนุญาต GPL ดู LICENSE สำหรับข้อมูลเพิ่มเติม

ติดต่อ

@anilsenay

ลิงค์โครงการ: https://github.com/anilsenay/next-e-commerce