https://github.com/giladfuchs/next-ecommerce

Free, Modern, accessible monorepo e-commerce platform built with Next.js 16. Includes two standalone implementations: Payload CMS–based and Express with a custom admin. Features a dynamic storefront and production-ready commerce flow
https://github.com/giladfuchs/next-ecommerce

ecommerce express nextjs payloadcms postgresql storefront typescipt

Last synced: about 1 month ago
JSON representation

Free, Modern, accessible monorepo e-commerce platform built with Next.js 16. Includes two standalone implementations: Payload CMS–based and Express with a custom admin. Features a dynamic storefront and production-ready commerce flow

• Host: GitHub
• URL: https://github.com/giladfuchs/next-ecommerce
• Owner: giladfuchs
• License: mit
• Created: 2025-05-19T15:59:13.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2026-03-20T13:02:39.000Z (2 months ago)
• Last Synced: 2026-03-21T05:36:10.628Z (about 2 months ago)
• Topics: ecommerce, express, nextjs, payloadcms, postgresql, storefront, typescipt
• Language: TypeScript
• Homepage: https://payload.url-link.org
• Size: 1.9 MB
• Stars: 60
• Watchers: 1
• Forks: 6
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

## 🧱 Payload Version

This repository contains the **Express + PostgreSQL** e-commerce template.

If you're looking for the **Payload CMS (Next.js + Payload 3)** version, see:

- [`/payload`](payload) — Payload-based store (Next.js + Payload CMS 3)

---

# Next.js E-commerce Template 🛍️

A modern, accessible e-commerce platform built with Next.js 16 (frontend) and Express + PostgreSQL (backend), designed for both customers and store administrators.


Includes a dynamic storefront, full admin dashboard, backend API, image upload, order tracking, and multilingual support (RTL & LTR).

---

## 🌐 Live Preview

This project uses a mixed mock dataset of **Hebrew (RTL)** and **English (LTR)** product and category entries.  

The layout is fully optimized for both directions, ensuring a seamless multilingual experience.

- **🇺🇸 LTR (English):** [modern-ecommerce-store.vercel.app/en](https://modern-ecommerce-store.vercel.app/en)

- **🇮🇱 RTL (Hebrew):** [modern-ecommerce-store.vercel.app/he](https://modern-ecommerce-store.vercel.app/he)

- **🔐 Admin Panel:** [modern-ecommerce-store.vercel.app/admin](https://modern-ecommerce-store.vercel.app/admin) — includes a built-in login form

---

## ▲ Deploy Your Own

Deploy your own version of this e-commerce storefront.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/giladfuchs/next-ecommerce)

This deploy uses Next.js route handlers (app/api) as the server.


After creating your project, make sure to go to the Vercel dashboard  

and update your environment variables based on [functions/.env.example](functions/.env.example)

---

## 📦 Environment Variables

To run the app locally or in production, you must configure the appropriate environment variables.

See the example files for full variable lists and inline comments:

- [`frontend/.env.example`](frontend/.env.example) — for frontend mode

- [`functions/.env.example`](functions/.env.example) — for Next.js API routes & Frontend

- [`backend/.env.example`](backend/.env.example) — for Express backend mode

---

## 🚀 Getting Started (for Local Development)

This project supports multiple development modes:

- **Fullstack** — run a real backend with PostgreSQL + Express

- **Next.js API** — use serverless functions instead of Express

- **Mock** — use local mock data for instant setup

Choose the guide that fits your workflow:

- [🛍️ `frontend/README.md`](frontend/README.md) — run the frontend with mock data or connect to a backend

- [🛠️ `backend/README.md`](backend/README.md) — set up the Express API and database

- [⚙️ `functions/README.md`](functions/README.md) — uses Next.js API routes for backend logic (no separate server needed)

---

## ✨ Key Features

### 🧑‍💻 Frontend (`/frontend`)

- 💅 Fully styled with **MUI v7**

- 🛍️ Dynamic storefront with product filtering and category browsing

- 🧾 **Admin dashboard** with full model management (products, categories, orders, images)

- 🧠 SEO & Open Graph via **Next.js 16 Metadata API**

- ♿ **Accessibility bar** with font scaling and contrast settings

- 🛒 **Cart and admin state managed via Redux Toolkit** with **persisted state**

- 🧪 **Playwright-based E2E tests** for key storefront and admin flows

### 🔌 Backend (`/backend`)

- 🔄 RESTFUL CRUD API for products, categories, orders, and images

- 🔐 Token-based authentication using **JWT**

- 🗃️ **TypeORM + PostgreSQL** schema design

- 📤 Image upload via **Vercel Blob** + processing with **Multer + Sharp**

- ✉️ Optional: email and WhatsApp order notifications

- ✅ **100% test coverage** for API routes using **Vitest + Supertest**

---

## 🧩 Tech Stack

### Frontend

- **Next.js 16**, **React 19**, **TypeScript**

- **MUI 7**

- **Redux Toolkit** with **redux-persist**

- **AG Grid**, **Formik**, **Yup**, **react-intl**, **Sonner**

- **Playwright** for E2E testing

### Backend

- **Express.js** + **TypeScript**

- **TypeORM** with **PostgreSQL**

- **JWT** + **bcryptjs** for authentication

- **Multer** + **Sharp** for image upload & processing

- **Vercel Blob** for cloud storage

- **Nodemailer**, **SendGrid**, **CallMeBot** for notifications

- **Vitest** + **Supertest** for full API test coverage

---

## 🤝 Contributing

Contributions are welcome!  

If you find this project useful, consider giving it a ⭐ on GitHub — it helps others discover it!

To contribute, fork the repository and submit a pull request with your enhancements or bug fixes.

---

## 📄 License

This project is licensed under the [MIT License](./LICENSE).