https://github.com/sesto-dev/next-prisma-tailwind-ecommerce
✨ Open-Source Full-stack E-Commerce Storefront with Admin Panel. Built with Typescript, Next.js 14 App Dir, Tailwind CSS ( @shadcn-ui ) and Prisma. Admin Panel: https://pardis.vercel.app
https://github.com/sesto-dev/next-prisma-tailwind-ecommerce
authentication ecommerce email full-stack httponly-cookie next-themes nextjs nodejs postgresql prisma react react-server-components server-side-rendering serverless shadcn shadcn-ui tailwindcss typescript
Last synced: 18 days ago
JSON representation
✨ Open-Source Full-stack E-Commerce Storefront with Admin Panel. Built with Typescript, Next.js 14 App Dir, Tailwind CSS ( @shadcn-ui ) and Prisma. Admin Panel: https://pardis.vercel.app
- Host: GitHub
- URL: https://github.com/sesto-dev/next-prisma-tailwind-ecommerce
- Owner: sesto-dev
- License: mit
- Created: 2022-06-08T18:56:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-17T07:45:08.000Z (6 months ago)
- Last Synced: 2024-10-19T10:27:06.218Z (6 months ago)
- Topics: authentication, ecommerce, email, full-stack, httponly-cookie, next-themes, nextjs, nodejs, postgresql, prisma, react, react-server-components, server-side-rendering, serverless, shadcn, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://pasargad.vercel.app
- Size: 3.65 MB
- Stars: 211
- Watchers: 6
- Forks: 31
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
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
- [x] [**Next.js 14**](https://nextjs.org) App Router and React Server Components.
- [x] Custom dynamic `Sitemap.xml` generation.
- [x] Admin dashboard with products, orders, and payments.
- [x] File uploads using `next-cloudinary`.
- [x] Authentication using `middleware.ts` and `httpOnly` cookies.
- [x] Storefront with blog, products, and categories.
- [x] Database-Stored blogs powered by **MDX** templates.
- [x] Email verification and invoices using [react-email-tailwind-templates](https://github.com/sesto-dev/react-email-tailwind-templates).
- [x] [**TailwindCSS**](https://tailwindcss.com/) for utility-first CSS.
- [x] UI built with [**Radix**](https://www.radix-ui.com/) and stunning UI components, all thanks to [**shadcn/ui**](https://ui.shadcn.com/).
- [x] Type-Validation with **Zod**.
- [x] [**Next Metadata API**](https://nextjs.org/docs/api-reference/metadata) 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](https://nextjs.org/docs/basic-features/environment-variables).
## 🏃♂️ Getting Started Locally
Clone the repository.
```bash
git clone https://github.com/sesto-dev/next-prisma-tailwind-ecommerce
```
Navigate to each folder in the `apps` folder and and set the variables.
```sh
cp .env.example .env
```
Get all dependencies sorted.
```sh
bun install
```
Bring your database to life with pushing the database schema.
```bash
bun run db:push
```
```sh
bun run dev
```
## 🔑 Database
Prisma ORM can use any PostgreSQL database. [Supabase is the easiest to work with.](https://www.prisma.io/docs/guides/database/supabase) 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:`. 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](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
## 📄 License
This project is MIT-licensed and is free to use and modify for your own projects. Check the [LICENSE](./LICENSE) file for details.
Created by [Amirhossein Mohammadi](https://github.com/sesto-dev).