Shopee E-Commerce
Oct 8, 2023
Shopee is an open-source platform aim to help small businesses to engage e-commerce more efficiently. The project consits of two separate applications: Shoppe-Admin, a web-based admin dashboard & CMS tool; and Shoppe-Store, a simple e-commerce shop template. The project was built with the main coding stack: TypeScript + React + Next.js + Tailwind + Prisma + MySQL
The project has been well tested and deployed. Please feel free to checkout the following URLs or review source codes. Both Shoppe-Admin & Shopee-Store are using headless UI frameworks and to support wide range customization. You can use them to build your own e-commerce platform with extra features and functionalities.
Admin Dashboard & CMS
URL: https://shopee-admin-ecru.vercel.app/
GitHub: https://github.com/siranchao/shopee-admin
Shopee Store
URL: https://shopee-store-psi.vercel.app/
GitHub: https://github.com/siranchao/shopee-store
Tech stack
Shopee is an intermediate level full-stack application built with TypeScript + React + Next.js and heavily used Next API router + Prisma as backend API server. In addition,this project invloved a numbers of technologies and libraries (listed below):
- Frontend JS framework: React, Next13
- CSS & UI framework:Tailwind.css, Headless UI, shadcn/ui, Lucide React
- State management:Zustand
- Form & validation:React-hook-form, Zod
- Data visualization:Recharts
- Authentication & User management:Clerk
- Image store & management:Cloudinary
- Backend web APIs:Next API router, Prisma ORM
- Database:MySQL, PlanetScale(serverless database)
- Payment service:Stripe
Demo video
Features
Here are some of the features:
- - Admin: view dashboard tables and charts from real time data, KPI and trend analysis
- - Admin: create, update and delete essential contents e.g APIs, product info
- - Admin: view and manage all orders generated from store
- - Admin: create and manage multiple stores
- - Store: locally stored shopping cart, not session required
- - Store: support multiple payment methods, Credit/Debit Card
- - Fully responsive design, but larger screen are recommended for Admin app
Additional info
Shopee Admin support OAuth authentication, it is suggest to use gmail or facebook account to proceed for sake of simplicity.
Alternatively, you can use this demo account:
Username: demo-user
Password: demo1234
In Shopee Store, users will be redirect to Stripe payment page after checkout. Currently the project is using test payment method, so you can use test card info to stimulate the process. For more information please visit Stripe.com