ชอปฟินิตี้
ยินดีต้อนรับสู่ Shopfinity แอปพลิเคชันอีคอมเมิร์ซขั้นสูงที่สร้างขึ้นด้วยเทคโนโลยีล่าสุด Shopfinity นำเสนอโซลูชันที่ครอบคลุมสำหรับการช็อปปิ้งออนไลน์ รวมถึงการตรวจสอบผู้ใช้ การจัดการผลิตภัณฑ์ การประมวลผลการชำระเงิน และแดชบอร์ดผู้ดูแลระบบที่ใช้งานง่าย
คุณสมบัติ
- Next.js 14 : ใช้แอปเราเตอร์ล่าสุดและฟีเจอร์จาก Next.js เพื่อเว็บแอปพลิเคชันที่รวดเร็ว เป็นมิตรกับ SEO และแสดงผลฝั่งเซิร์ฟเวอร์
- MongoDB : ฐานข้อมูล NoSQL สำหรับการจัดเก็บและเรียกค้นข้อมูลอย่างมีประสิทธิภาพ
- Auth.js (Next-Auth) : โซลูชันการตรวจสอบสิทธิ์ที่ปลอดภัยและปรับขนาดได้
- Stripe : เกตเวย์การชำระเงินแบบรวมสำหรับการจัดการธุรกรรม
- Admin Dashboard : จัดการสินค้า คำสั่งซื้อ และผู้ใช้งานได้อย่างราบรื่น
- การออกแบบที่ตอบสนอง : รับประกันประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนอุปกรณ์ทั้งหมด
- การรวบรวมที่อยู่จัดส่ง : รวบรวมและจัดการรายละเอียดการจัดส่งได้อย่างง่ายดาย
- Tailwind CSS : เพื่อสไตล์ที่มีประสิทธิภาพและปรับแต่งได้
เริ่มต้นใช้งาน
ข้อกำหนดเบื้องต้น
- Node.js (v14.x หรือใหม่กว่า)
- npm (v6.x หรือใหม่กว่า) หรือ Yarn (v1.x หรือใหม่กว่า)
- อินสแตนซ์ MongoDB
- บัญชี Stripe และคีย์ API
การติดตั้ง
โคลนพื้นที่เก็บข้อมูล
git clone https://github.com/yourusername/shopfinity.git
cd shopfinity
ติดตั้งการพึ่งพา
npm install
# or
yarn install
ตัวแปรสภาพแวดล้อม
สร้างไฟล์ .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
เรียกใช้เซิร์ฟเวอร์การพัฒนา
npm run dev
# or
yarn dev
เปิด http://localhost:3000 ด้วยเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์
โครงสร้างโครงการ
- /app : ประกอบด้วยเส้นทางทั้งหมด
- /components : ส่วนประกอบ React ที่ใช้ซ้ำได้
- /lib : การกำหนดค่าสำหรับ MongoDB, Stripe และการตรวจสอบสิทธิ์
- /lib/models : โมเดล Mongoose สำหรับ MongoDB
- /utils : ฟังก์ชั่นยูทิลิตี้
การใช้งาน
การรับรองความถูกต้อง
- ผู้ใช้สามารถลงทะเบียนและเข้าสู่ระบบโดยใช้อีเมลหรือผู้ให้บริการบุคคลที่สาม (Google, GitHub ฯลฯ )
- ผู้ใช้ที่ได้รับการรับรองความถูกต้องสามารถเข้าถึงโปรไฟล์ ประวัติการสั่งซื้อ และอื่นๆ อีกมากมาย
แดชบอร์ดผู้ดูแลระบบ
- เข้าถึงได้โดยผู้ใช้ที่มีสิทธิ์ของผู้ดูแลระบบเท่านั้น
- จัดการผลิตภัณฑ์: เพิ่ม แก้ไข หรือลบผลิตภัณฑ์
- จัดการคำสั่งซื้อ: ดูรายละเอียดคำสั่งซื้อ อัปเดตสถานะคำสั่งซื้อ
- จัดการผู้ใช้: ดูข้อมูลผู้ใช้ กำหนดบทบาทผู้ดูแลระบบ
การชำระเงิน
- ผสานรวมกับ Stripe เพื่อการประมวลผลการชำระเงินที่ปลอดภัย
- ผู้ใช้สามารถเพิ่มสินค้าลงตะกร้าและดำเนินการชำระเงินได้
- การรวบรวมที่อยู่จัดส่งระหว่างการชำระเงิน
CSS ท้ายลม
- Tailwind CSS ใช้สำหรับจัดรูปแบบ คุณสามารถปรับแต่งสไตล์ได้โดยแก้ไขไฟล์
tailwind.config.js และเพิ่มคลาส CSS ที่คุณกำหนดเองในไฟล์ styles/globals.css
มีส่วนร่วม
เรายินดีต้อนรับการมีส่วนร่วม! โปรดทำตามขั้นตอนเหล่านี้เพื่อมีส่วนร่วม:
- แยกพื้นที่เก็บข้อมูล
- สร้างสาขาใหม่ (
git checkout -b feature/your-feature ) - ทำการเปลี่ยนแปลงของคุณ
- ยอมรับการเปลี่ยนแปลงของคุณ (
git commit -am 'Add new feature' ) - พุชไปที่สาขา (
git push origin feature/your-feature ) - สร้างคำขอดึงใหม่
ใบอนุญาต
โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียดเพิ่มเติม
รับทราบ
- เน็กซ์.เจส
- MongoDB
- Auth.js (ถัดไป-Auth)
- ลายทาง
- CSS ท้ายลม
การสาธิตสด
ตรวจสอบการสาธิตสดของ Shopfinity ที่นี่
คุณสามารถปรับแต่งไฟล์ README.md นี้ตามความต้องการเฉพาะของโปรเจ็กต์ของคุณได้ สนุกกับการสร้างด้วย Shopfinity!
