NextLaunch

Launch high-converting websites instantly—no coding, no stress, just results.

NextLaunch is a production-ready Next.js template marketplace. It bundles premium landing-page/ui kits, a purchase flow with Razorpay, authenticated dashboards powered by Clerk, template delivery backed by Firebase, and delightful UI micro-interactions via Framer Motion. Use it as the foundation for marketplaces, theme stores, or any digital product catalog.

Table of contents

1. Overview
2. Highlights
3. Architecture
4. Tech stack
5. Project structure
6. Getting started
7. Environment variables
8. Core workflows
9. Quality checks
10. Deployment
11. Contributing
12. Security
13. License
14. Maintainer

Overview

• Templates storefront with category filters, curated sections, testimonials, FAQs, pricing comparison, and conversion-focused CTAs.
• Authenticated dashboard for buyers to review purchases and re-download assets.
• Serverless API routes for template fetching, purchase verification, secure download URLs, emails, and payment notifications.
• Single-point customization via config/siteConfig.ts so branding, navigation, hero copy, and theme settings stay centralized.

Highlights

• 🎨 Multi-theme UI system powered by next-themes, Tailwind presets, and reusable section components.
• ⚡ Smooth motion + scroll experiences using Framer Motion, custom animation presets, and Lenis integration.
• 💳 Razorpay checkout flow with HMAC verification, download access gating, and frontend Razorpay widget support.
• 🔐 Clerk authentication keeps dashboards and purchase APIs secure with JWT verification helpers.
• ☁️ Firebase (Firestore + Storage) hosts template metadata, purchase receipts, and downloadable assets.
• 📬 Transactional email automation through Nodemailer + Gmail SMTP for purchase confirmations and contact replies.
• 📦 Persistent template store using Zustand with caching, offline fallbacks, and filter helpers.

Architecture

┌────────────┐        ┌───────────────┐        ┌──────────────┐
│  Next.js   │        │  API Routes   │        │ Integrations │
│  App Dir   │  ->    │ (app/api/*)   │  ->    │  Razorpay    │
│  (UI + UX) │        │  auth, CRUD   │        │  Firebase    │
└────────────┘        └───────────────┘        │  Clerk      │
	↑                     ↓                 │  Nodemailer │
	│             Zustand Store             └──────────────┘
	└────────── Client <-> Server ─────────────────────────┘

Key principles:

1. App Router + RSC for streaming, metadata, and route groups (marketing pages live under app/(pages) while transactional routes live under app/api).
2. Composable sections in sections/ feed page-level layouts, making it easy to plug templates into other projects.
3. Data-first configuration via db/templates.ts (seed data) and config/siteConfig.ts (content + theming) to keep UI code lean.

Tech stack

Layer	Tools
Framework	Next.js 15 (App Router) + React 19
Language	TypeScript
Styling	Tailwind CSS, tailwind-merge, custom animation presets
State	Zustand with persist middleware
Auth	Clerk (publishable + secret keys)
Payments	Razorpay Checkout, HMAC verification
Data	Firebase Firestore + Storage, server-side Admin SDK
Email	Nodemailer + Gmail SMTP
UI	Lucide icons, Radix primitives, Framer Motion, Lenis

Project structure

next-launch/
├── app/
│   ├── (pages)/...        # Marketing pages, auth routes, dashboard routes
│   ├── api/               # Purchase, template, payment, and email endpoints
│   ├── globals.css
│   └── layout.tsx
├── components/            # UI primitives, navbar/footer, Razorpay checkout, mockups
├── sections/              # Reusable page sections (hero, pricing, testimonials, etc.)
├── store/templateStore.ts # Zustand store for templates & purchases
├── db/templates.ts        # Seed/template metadata and helper exports
├── config/siteConfig.ts   # Centralized site copy, links, feature lists, etc.
├── lib/                   # Auth helpers, Firebase Admin SDK, utilities
├── public/                # Logos, mock images, favicons, testimonial assets
├── animations/            # Shared animation variants and easing curves
├── types/                 # Shared TypeScript interfaces
├── tailwind.config.ts / postcss.config.mjs
└── package.json / tsconfig.json / eslint.config.mjs

Getting started

1. Prerequisites

• Node.js 20+
• npm 10+ (or pnpm/yarn, adjust commands accordingly)
• Firebase project, Clerk application, Razorpay account, Gmail SMTP app password

2. Install dependencies

npm install

3. Configure environment

Create a .env.local file in the project root using the variables below. Never commit production secrets—.gitignore already excludes .env*.

4. Run the development server

npm run dev

Visit http://localhost:3000 and sign in via Clerk to access authenticated flows.

5. Production build & lint

npm run build
npm run start   # serve the production build
npm run lint    # ESLint (Next.js rules)

Environment variables

Variable	Description
NEXT_PUBLIC_DB_API_KEY	Firebase web API key for client-side SDK
NEXT_PUBLIC_DB_AUTH_DOMAIN	Firebase auth domain
NEXT_PUBLIC_DB_PROJECT_ID	Firebase project ID (client)
NEXT_PUBLIC_DB_STORAGE_BUCKET	Firebase storage bucket
NEXT_PUBLIC_DB_MESSAGING_SENDER_ID	Sender ID for Firebase
NEXT_PUBLIC_DB_APP_ID	Firebase app ID
NEXT_PUBLIC_DB_MEASUREMENT_ID	Analytics measurement ID
NEXT_PUBLIC_FIREBASE_PROJECT_ID	Used for helpful Firestore index hints
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk frontend key for providers
NEXT_PUBLIC_RAZORPAY_KEY_ID	Public Razorpay key for checkout widget
CLERK_SECRET_KEY	Server-side Clerk key for token verification
FIREBASE_PROJECT_ID	Service account project ID
FIREBASE_CLIENT_EMAIL	Service account email
FIREBASE_PRIVATE_KEY	Service account private key (\n escaped)
RAZORPAY_KEY_ID	Server Razorpay key (order creation)
RAZORPAY_KEY_SECRET	Razorpay HMAC secret
GMAIL_USER	Gmail address used for SMTP notification emails
GMAIL_PASS	Gmail app password for SMTP

Tip: Provide dev-safe defaults (e.g., test Razorpay keys, test Gmail inbox) and keep production secrets in Vercel project settings.

Core workflows

Template catalog

1. db/templates.ts exposes seed data and metadata for SEO.
2. sections/templates-showcase-section.tsx + components/sections/* render cards, pricing, testimonials.
3. The Zustand store (store/templateStore.ts) handles caching, filtering, and local persistence.

Purchase flow

1. Frontend calls /api/payments/create-order to create a Razorpay order with the secret key.
2. components/pages/razorpay-checkout.tsx opens the Razorpay widget with the publishable key.
3. On success, /api/payments/verify validates the signature and records the purchase in Firestore.
4. /api/purchases/get|check-updates|download-url hydrate dashboards and gated downloads.

Payment gateway swap: Razorpay is the default implementation, but the flow is modular. Replace the /app/api/payments/* routes plus components/pages/razorpay-checkout.tsx with calls to your preferred provider (Stripe, PayPal, Lemon Squeezy, etc.), keeping the purchase documents and download flow unchanged.

Notifications & support

• /api/purchase-notify sends transactional emails to the buyer with template/payment details.
• /api/send-mail powers the contact form, including validation and basic rate limiting.

Admin controls

• Update db/templates.ts to add new templates or metadata.
• Curate homepage/marketing content via config/siteConfig.ts without touching component code.

Quality checks

• npm run lint – ESLint/Next.js ruleset (recommended before commits).
• npm run build – ensures App Router routes, API handlers, and type checks are healthy.
• Consider adding CI (GitHub Actions) to run these commands automatically on PRs.

Deployment

1. Push the repository to GitHub (public).
2. Create a new Vercel project → Import this repo.
3. Copy all environment variables from .env.local into Vercel → Settings → Environment Variables.
4. Add required third-party webhooks/redirects (Razorpay, Clerk) pointing to your Vercel domain.
5. Trigger a production deploy; Vercel will handle Next.js build + serverless routing.

Contributing

1. Fork the repository & create a feature branch.
2. Run npm run lint locally before opening a PR.
3. Describe the motivation, screenshots (if UI), and testing steps.
4. For larger features, open an issue first so we can discuss requirements.

Security

Please avoid opening public issues for vulnerabilities. Instead, email mrnaseem745@gmail.com with a detailed report. You’ll receive an acknowledgement within 48 hours and coordinated disclosure will be arranged if needed.

License

Distributed under the MIT License. You are free to use the code in commercial and personal projects, but purchased template assets themselves may include additional licensing terms—respect your buyers.

Maintainer

Built and maintained by Naseem Ansari. Feel free to reach out on LinkedIn or Twitter for support, collaborations, or template ideas.