next-ecommerce - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #machine-learning #rust #macos #nodejs #awesome-list #vue #security #pytorch #ios #open-source

next-ecommerce

(★ 112)

Free, modern, and accessible e-commerce platform built with Next.js 16 and Payload CMS. Features a dynamic storefront, flexible content management, and a production-ready commerce flow.

File Explorer

Download Latest Version (.zip)

- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
- - image_meta.webp
  - logo.webp
  - mock-data-en.json
  - mock-data-he.json
- game.ts
- helpers.ts
- index.ts
- run.ts
- - robots.ts
  - sitemap.ts
- payload.config.ts
.env.example
.gitignore
CLAUDE.md
eslint.config.mjs
LICENSE
next.config.ts
package.json
pnpm-lock.yaml
postcss.config.mjs
README.md
tailwind.config.mjs
tsconfig.json

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd next-ecommerce

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm install

Downloads and installs the libraries listed in package.json.

pnpm dev

Starts the development/run server.

pnpm seed

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js + Payload E-commerce Starter

Production-ready e-commerce starter built with Next.js 16 and Payload CMS 3.

Clone, configure, and launch your store.

---

## Features

- Full Payload E-commerce CMS integration
- Complete Category → Product → Add to Cart → Checkout → Purchase storefront flow
- Store pickup flow ready
- Aggressive tag-based caching with manual revalidation
- SEO-ready (metadata + JSON-LD + sitemap + robots.txt)
- Analytics & pixels (GA4 / GTag / Meta / TikTok) with built-in conversion tracking (add_to_cart, begin_checkout, purchase)
- Order email confirmation + WhatsApp notification

## Live Preview

**Main Site:**
https://payload.url-link.org

**Admin Panel:**
https://payload.url-link.org/admin

**Demo Login:**
Email: `admin@admin.com`
Password: `admin`

🔄 Reset Demo Data

If demo data was modified while you or another user were testing, you can restore it to a fresh state by visiting:
https://payload.url-link.org/preview/reset

#### This will reset and reseed the database (media preserved).

---

## ▲ Deploy Your Own

Deploy your own Payload-powered e-commerce storefront.

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

After creating your project, make sure to go to the Vercel dashboard
and update your environment variables based on [.env.example](.env.example)

---

## Notes on Payload E-commerce

Payload is a powerful CMS, and the e-commerce plugin gives you many features out of the box.

However, in real production use you may need to customize parts of it.

For example:

- Slug field was customized to properly support non-Latin characters.
- Image upload hook converts images to WebP and resizes them automatically for optimized performance and reduced bandwidth usage.
- Some behaviors are opinionated and may require collection overrides.

This starter already includes structural adjustments to make it more production-ready.

---

## Stack

- **Next.js 16** (App Router) + **React 19** + **Payload CMS 3** + **PostgreSQL**
- **Tailwind CSS 4** + **React Icons** + **next-intl** + **radix-ui** + **React Hook Form**
- **pnpm** as package manager (Node >= 22)

### Data Layer, Caching & Revalidation

The project uses a simple DAL (Data Access Layer) abstraction.

You can choose the implementation in:

[`src/lib/core/dal/Pages.ts`](src/lib/core/dal/index.ts)

- **Api** → Headless REST mode (recommended for production)
- **Queries** → Direct Payload SDK mode (monolith)

Both expose the same public methods.

---

### Caching & Revalidation

- The frontend uses Next.js cache with tag-based revalidation. Products and categories auto-revalidate on save or delete. The storefront is aggressively cached for performance.
- After changing products, categories, layout, footer or sitemap, click **“Revalidate” in Admin → Site Settings** to refresh immediately.
- Draft mode is supported — preview content does not affect the published cache.

### Orders & Notifications

- On order creation, a confirmation email is automatically sent to the customer.
- A WhatsApp notification is sent to the store owner via Callmebot.
- The architecture is ready for store pickup flow.
- Payment gateway integration can be added easily (Stripe, PayPal, etc.) using order hooks.

### Local Development

Clone the repo and start a local PostgreSQL with Docker:

```bash
docker run --name payload-ecommerce \
  -e POSTGRES_USER=admin \
  -e POSTGRES_PASSWORD=admin \
  -e POSTGRES_DB=payload \
  -p 5443:5432 \
  -v payload_ecommerce_data:/var/lib/postgresql \
  -d postgres:18
```

Create a `.env` file based on [`.env.example`](.env.example) and configure your environment variables, then install and run:

```bash
pnpm install
pnpm dev
```

To seed mock data for local development, run the [`seeder script`](seed/index.ts):

```bash
pnpm seed
```

### Key Directories

- `src/app/(app)/` — Public storefront (home, product, category, checkout, preview)
- `src/app/(payload)/` — Payload admin + API routes
- `src/lib/` — Core app logic (collections, queries, caching, types, utilities, providers, i18n)
- `src/lib/collections/` — Payload CMS collection definitions (Products, Category, Media, Users, Orders, etc.)
- `src/components/` — UI + domain components (cart, checkout, product, layout, shared, ui)

---

## 🤝 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).