1. Prerequisites

• Node.js ≥ 18

• Git & GitHub account

• Stripe & Firebase accounts (free tier is fine)

• Cloudinary account (free tier)

2. One-Minute Setup

# 1. Clone NextMart starter

git clone https://github.com/your-repo/nextmart.git

cd nextmart

# 2. Install deps

npm i

# 3. Copy env template

cp .env.example .env.local

# 1. Clone NextMart starter

git clone https://github.com/your-repo/nextmart.git

cd nextmart

# 2. Install deps

npm i

# 3. Copy env template

cp .env.example .env.local

NEXT_PUBLIC_FIREBASE_API_KEY=xxx

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxx

NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxx

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxx

NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxx

NEXT_PUBLIC_FIREBASE_APP_ID=xxx

1. Enable Authentication → pick Email/Password & Google
2. Firestore: create products, orders, users collections
3. Storage: create images bucket → set rules to allow read, write: if request.auth != null;

Firebase CLI is optional; NextMart ships with pre-built security rules you can deploy via npm run firebase:rules.

4. Cloudinary for Instant Image CDN

1. Log in → create nextmart folder
2. Upload a test product image → copy the URL
3. In .env.local:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_name

NEXT_PUBLIC_CLOUDINARY_API_KEY=xxx

CLOUDINARY_API_SECRET=xxx

1. NextMart auto-transforms images on-the-fly for 5 device breakpoints and lazy-loads via next/image.

5. Stripe Checkout Flow

1. Stripe Dashboard → Developers → API keys → copy Publishable & Secret keys
2. In .env.local:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx

STRIPE_SECRET_KEY=sk_test_xxx

Stripe CLI for webhooks (dev):

stripe login

stripe listen --forward-to localhost:3000/api/webhooks/stripe

1. NextMart already includes /api/checkout_sessions and /api/webhooks/stripe routes—zero code needed.

6. Run Locally

npm run dev    # localhost:3000

npm run stripe:listen # in another tab

Visit http://localhost:3000 → you’ll see a demo store pulling products from Firestore and images from Cloudinary.

7. Deploy to Vercel (Edge Network)

1. Push repo to GitHub
2. Vercel Dashboard → Import → pick repo
3. Add the same env variables from .env.local
4. Deploy → live in ~60 s with global CDN + ISR caching

8. Performance Tuning Checklist

✅ Static pages pre-rendered via Next.js ISR

✅ Images served via Cloudinary f_auto,q_auto, 6-device src-set

✅ Firebase & Stripe SDKs tree-shaken (only 42 KB gzipped)

✅ Lighthouse score: 100 / 100 / 100 / 100 (tested on Vercel)

9. Adding Your First Product

1. Firebase Console → Firestore → products collection → New Document
2. JSON template:

{

 "title": "Vintage Denim Jacket",

 "slug": "vintage-denim-jacket",

 "price": 79.99,

 "images": ["vintage_jacket_x1.jpg"],

 "description": "Classic 90s style denim jacket.",

 "stock": 12,

 "category": "jackets"

}

Image file → upload to Cloudinary nextmart folder → auto-available via URL.

10. Next Steps & Scaling

• Enable Firebase Analytics → free insights on drop-offs

• Add Cloud Functions for inventory sync & email receipts

• Use Stripe Customer Portal for self-serve subscriptions

• Scale Firestore with composite indexes when traffic grows

Grab NextMart on CodeCanyon, follow this guide, and you’ll have a lightning-fast, fully-featured store live before your coffee gets cold.