Full-Stack E-Commerce Platform
Built using Typescript with Next.js, Prisma ORM and TailwindCSS.
๐ Introduction
Welcome to the open-source Next.js E-Commerce Storefront with Admin Panel project! This project is built with TypeScript, Tailwind CSS, and Prisma, providing a powerful and flexible solution for building and managing your e-commerce website.
๐ฅ Features
- Next.js 14 App Router and React Server Components.
- Custom dynamic
Sitemap.xmlgeneration. - Admin dashboard with products, orders, and payments.
- File uploads using
next-cloudinary. - Authentication using
middleware.tsandhttpOnlycookies. - Storefront with blog, products, and categories.
- Database-Stored blogs powered by MDX templates.
- Email verification and invoices using react-email-tailwind-templates.
- TailwindCSS for utility-first CSS.
- UI built with Radix and stunning UI components, all thanks to shadcn/ui.
- Type-Validation with Zod.
- Next Metadata API for SEO handling.
- Comprehensive implementations for i18n.
2๏ธโฃ Why are there 2 apps in the app folder?
This project is made up of 2 separate apps ( admin and storefront ) which should be deployed separately. If you are deploying with Vercel you should create 2 different apps.
Under the general tab there is a Root Directory option, for the admin app you should put in "apps/admin" and for the storefront app you should put in "apps/storefront".
๐ Authentication
The authentication is handled using JWT tokens stored in cookies and verified inside the middleware.ts file. The middleware function takes in the HTTP request, reads the token cookie and if the JWT is successfully verified, it sets the X-USER-ID header with the userId as the value, otherwise the request is sent back with 401 status.
๐โ๐จ Environment variables
Environment variables are stored in .env files. By default the .env.example file is included in source control and contains settings and defaults to get the app running. Any secrets or local overrides of these values should be placed in a .env file, which is ignored from source control.
Remember, never commit and store .env in the source control, just only .env.example without any data specified.
You can read more about environment variables here.
๐ Database
Prisma ORM can use any PostgreSQL database. Supabase is the easiest to work with. Simply set DATABASE_URL in your .env file to work.
bun run db
This project exposes a package.json script for accessing prisma via bun run db:<command>. You should always try to use this script when interacting with prisma locally.
Making changes to the database schema
Make changes to your database by modifying prisma/schema.prisma.
๐ธ How to Deploy the Project
Follow the deployment guides for Vercel, Netlify and Docker for more information.
๐ License
This project is MIT-licensed and is free to use and modify for your own projects. Check the LICENSE file for details.
Created by Amirhossein Mohammadi.
