NextLaunch OS

🚀 Open-source codebase for creating your own Next.js template store

NextLaunch OS is the open-source platform codebase powering the NextLaunch marketplace. It enables developers to build, customize, and deploy their own template store with a clean, scalable architecture. Built with Next.js, TypeScript, Tailwind CSS, and Framer Motion.

✨ Features

✨ Store-Ready Architecture – Includes logic for product listings, checkout flow, and user management.
🌙 Dark Mode Support - Built-in theme switching with next-themes
📱 Fully Responsive - Mobile-first design approach
⚡ Performance Optimized - Next.js 15 with App Router
🎭 Smooth Animations - Framer Motion for engaging user experiences
🛠️ Developer Friendly - Clean, well-documented code
🎯 SEO Ready - Meta tags, sitemaps, and structured data
🧩 Modular Components - Reusable UI components with Radix UI
📦 Zero Config - Ready to use out of the box
💳 Payment Ready - Stripe, PayPal, Razorpay examples
📧 Email Integration - Multiple email service providers
🔐 Authentication - Clerk, NextAuth.js examples
🗄️ Database Ready - Supabase, Firebase, PlanetScale examples

🎨 Design & Customization Notice

Important for Developers: This open-source version of NextLaunch serves as a foundation for your projects. The current design, layout, and styling are intentionally basic and may not match your specific requirements or preferences.

🛠️ We Encourage You To:

🎯 Implement Your Own Design System - Replace the existing styling with your brand colors, typography, and components
📐 Customize Layouts - Modify page structures and component arrangements to fit your needs
🌟 Add Your Personal Touch - The templates are meant to be starting points, not final products
🎪 Create Unique Experiences - Use your creativity to make something truly yours
📱 Optimize for Your Audience - Adapt the responsive design for your specific user base

💡 What This Means:

This repository provides the functionality and structure, but the visual design is up to you. Think of it as a powerful scaffold rather than a finished house. The real magic happens when you apply your own design vision!

Don't be concerned if some pages or components don't look "polished" - that's intentional. Build something amazing with your own style! 🚀

🧪 API Testing

You can test all API endpoints immediately after setup:

Test Templates API

# Get all templates
curl -X GET "http://localhost:3000/api/templates"

# Get featured templates
curl -X GET "http://localhost:3000/api/templates?featured=true"

# Add a new template
curl -X POST "http://localhost:3000/api/templates/add" \
  -H "Content-Type: application/json" \
  -d '{"title":"My Template","description":"A great template","category":"landing","price":49.99}'

Test Purchase API

# Create a purchase
curl -X POST "http://localhost:3000/api/purchases" \
  -H "Content-Type: application/json" \
  -d '{"userId":"user123","templateId":"template_1","orderId":"order_abc","amount":49,"currency":"USD"}'

# Get user purchases
curl -X GET "http://localhost:3000/api/purchases?userId=user123"

Test Email API

# Send contact email
curl -X POST "http://localhost:3000/api/send-mail" \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"[email protected]","message":"Hello from API!","services":["web-development"]}'

All APIs return proper JSON responses and include error handling with meaningful messages.

🚀 Quick Start

Prerequisites

Node.js 18.0 or later
npm, yarn, or pnpm

Installation

Clone the repository

git clone https://github.com/gitnaseem745/nextlaunch-os.git
cd nextlaunch-os

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up environment variables
```
cp .env.example .env.local
```
Edit .env.local with your configuration values.
Start the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser Visit http://localhost:3000 to see your site.

🎯 What's Included

🎨 Multiple Pricing Tiers

Starter Plan - Individual projects ($49)
Professional Plan - Agencies and freelancers ($149)
Enterprise Plan - Large teams ($299)
Bundle Offers - Save with multiple template packages

🔧 API Endpoints

Payment Processing - Stripe, PayPal, Razorpay integration examples
Template Management - CRUD operations for template data
Purchase System - Order processing and notification system
Email Services - Multiple email provider integrations
User Authentication - Clerk integration examples

📄 Complete Page Set

Landing Page - Hero, features, testimonials, pricing
Templates Gallery - Filterable template showcase
Pricing Page - Multiple pricing plans with comparison
FAQ Page - Comprehensive question sections
Contact Page - Multi-service contact form
Dashboard - User account management
Authentication - Sign-in/Sign-up pages

🧩 Ready-to-Use Components

Pricing Cards - Multiple tier display with features
Template Cards - Showcase with previews and tech stack
FAQ Sections - Categorized question/answer system
Contact Forms - Multi-service selection
Testimonial Sliders - Customer feedback carousel
Payment Integration - Checkout and processing flows

📁 Project Structure

nextlaunch-os/
├── animations/          # Framer Motion animation configurations
├── app/                 # Next.js App Router pages and layouts
├── components/          # Reusable UI components
│   ├── ui/             # Base UI components (buttons, cards, etc.)
│   ├── sections/       # Page sections and layouts
│   └── pages/          # Page-specific components
├── config/             # Site configuration
├── db/                 # Database utilities and configurations
├── lib/                # Utility functions and helpers
├── public/             # Static assets
├── sections/           # Main page sections
├── store/              # State management with Zustand
└── types/              # TypeScript type definitions

🎨 Customization

Site Configuration

Edit config/siteConfig.ts to customize your site:

export const siteConfig = {
  title: "Your Site Title",
  description: "Your site description",
  siteUrl: "https://your-domain.com",
  author: "Your Name",
  // ... more configuration options
};

API Endpoints

The project includes example API routes for common functionality:

Templates API

GET /api/templates - Get all templates
```
curl -X GET "http://localhost:3000/api/templates"
```
Optional query params: ?featured=true for featured templates only

POST /api/templates/add - Add new template

curl -X POST "http://localhost:3000/api/templates/add" \
  -H "Content-Type: application/json" \
  -d '{"title":"My Template","description":"A great template","category":"landing","price":49.99}'

Purchase Management

GET /api/purchases?userId=USER_ID - Get user purchases

POST /api/purchases - Create new purchase

curl -X POST "http://localhost:3000/api/purchases" \
  -H "Content-Type: application/json" \
  -d '{"userId":"user123","templateId":"template_1","orderId":"order_abc","amount":49,"currency":"USD"}'

Payment Processing

GET /api/payments?orderId=ORDER_ID - Get payment status
POST /api/payments - Process payment (integration examples for Stripe, PayPal, Razorpay)

Email Services

POST /api/send-mail - Send contact form emails

curl -X POST "http://localhost:3000/api/send-mail" \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"[email protected]","message":"Hello!","services":["web-dev"]}'

Purchase Notifications

POST /api/purchase-notify - Webhook for payment provider notifications

All API routes include example implementations with detailed comments showing how to integrate with real services like Stripe, SendGrid, and database providers.

📖 Complete API Documentation - Detailed documentation with examples for all endpoints.

Environment Setup

Copy .env.example to .env.local and configure:

# Required for basic functionality
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME="Your Site Name"

# Choose your preferred services
STRIPE_SECRET_KEY=sk_test_your_key
CLERK_SECRET_KEY=sk_test_your_key
RESEND_API_KEY=re_your_key

Themes

The project supports multiple themes out of the box. You can:

Toggle between light and dark modes
Customize colors in tailwind.config.ts
Add new theme variants

Components

All components are modular and customizable:

UI components in components/ui/
Page sections in components/sections/
Animations in animations/

🛠️ Detailed Setup Guide

1. Environment Configuration

The project includes a comprehensive .env.example with 140+ environment variables for all major services. Key configurations:

Core Settings

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME="NextLaunch OS"
NEXT_PUBLIC_SITE_URL=https://your-domain.com

# Authentication (Choose one)
CLERK_PUBLISHABLE_KEY=pk_test_your_key
CLERK_SECRET_KEY=sk_test_your_key
# OR
NEXTAUTH_SECRET=your_secret
NEXTAUTH_URL=http://localhost:3000

Payment Providers (Examples included for all)

# Stripe
STRIPE_PUBLISHABLE_KEY=pk_test_your_key
STRIPE_SECRET_KEY=sk_test_your_key
STRIPE_WEBHOOK_SECRET=whsec_your_secret

# PayPal
PAYPAL_CLIENT_ID=your_client_id
PAYPAL_CLIENT_SECRET=your_secret

# Razorpay
RAZORPAY_KEY_ID=rzp_test_your_key
RAZORPAY_KEY_SECRET=your_secret

Email Services (Multiple options)

# Resend (Recommended)
RESEND_API_KEY=re_your_key

# SendGrid
SENDGRID_API_KEY=SG.your_key

# Gmail/Nodemailer
SMTP_HOST=smtp.gmail.com
[email protected]
SMTP_PASS=your_app_password

Database Options (Examples for all major providers)

# Supabase
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_key

# Firebase
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_PRIVATE_KEY=your_private_key
FIREBASE_CLIENT_EMAIL=your_client_email

# PlanetScale/MySQL
DATABASE_URL=mysql://username:password@host:port/database

2. Service Integration Examples

Each API route includes detailed examples for popular services:

Payment Integration

Stripe: Complete checkout flow with webhooks
PayPal: REST API integration
Razorpay: Indian payment gateway

Authentication

Clerk: Drop-in authentication with user management
NextAuth.js: Flexible OAuth and credential auth
Custom JWT: Roll your own solution

Email Services

Resend: Modern email API with React templates
SendGrid: Enterprise email delivery
Nodemailer: SMTP and Gmail integration

3. Database Setup

Choose your preferred database and follow the setup:

Supabase (Recommended)

Create account at supabase.com
Create new project
Copy connection details to .env.local
Use provided SQL schema in /db/schema.sql

Firebase

Create project at firebase.google.com
Enable Firestore
Download service account key
Configure environment variables

4. Deployment Checklist

Before deploying, ensure:

🧩 Tech Stack

Framework: Next.js 15 with App Router
Language: TypeScript
Styling: Tailwind CSS
UI Components: Radix UI
Animations: Framer Motion
Icons: Lucide React
State Management: Zustand
Theme: next-themes

📦 Available Templates & Examples

Landing Page - Modern business landing pages with hero, features, testimonials
E-commerce Store - Complete shop with product catalogs and checkout
Creative Portfolio - Designer and developer portfolios with galleries
Blog Platform - Content management with MDX and newsletter integration
Dashboard - Analytics and admin interfaces
SaaS Templates - Subscription-based service templates

💼 Business Features

Payment Integration Examples

Stripe - Credit card processing and subscriptions
PayPal - Alternative payment method
Razorpay - Indian market payment solutions

Authentication Options

Clerk - Complete authentication solution
NextAuth.js - Flexible authentication library
Custom JWT - Roll your own authentication

Email Service Integration

Resend - Modern email API
SendGrid - Enterprise email delivery
Nodemailer - SMTP email sending
Gmail API - Google email integration

Database Examples

Supabase - PostgreSQL with real-time features
Firebase - NoSQL with real-time sync
PlanetScale - MySQL at scale
MongoDB - Document database

🚀 Deployment

Vercel (Recommended)

Push your code to GitHub
Import your repository on Vercel
Configure environment variables
Deploy!

Other Platforms

Netlify: Follow their Next.js deployment guide
AWS Amplify: Use their Next.js hosting
Self-hosted: Build with npm run build and serve the out folder

🔧 Troubleshooting

Common Issues

Development Server Won't Start

# Clear Next.js cache
rm -rf .next
npm run dev

Build Errors

# Check TypeScript errors
npm run type-check

# Lint code
npm run lint

Environment Variables Not Loading

Ensure .env.local exists in root directory
Restart development server after adding new variables
Check variable names start with NEXT_PUBLIC_ for client-side access

API Routes Returning 404

Verify file structure in /app/api/
Check route exports (GET, POST, etc.)
Ensure proper file naming (route.ts)

Database Connection Issues

Verify connection strings in environment variables
Check firewall rules and IP allowlisting
Test connection with provided utility scripts

Getting Help

If you encounter issues:

Check the Issues for existing solutions
Search Next.js documentation
Create a new issue with detailed reproduction steps

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🙏 Acknowledgments

Next.js team for the amazing framework
Tailwind CSS for the utility-first CSS framework
Radix UI for accessible UI components
Framer Motion for smooth animations
All contributors and the open-source community

🔗 Links

Made with ❤️ by Naseem

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
animations		animations
app		app
components		components
config		config
db		db
lib		lib
public		public
sections		sections
store		store
types		types
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
API.md		API.md
CONTRIBUTING.md		CONTRIBUTING.md
DEPLOYMENT.md		DEPLOYMENT.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

License

Gitnaseem745/nextlaunch-os

Folders and files

Latest commit

History

Repository files navigation

NextLaunch OS

✨ Features

🎨 Design & Customization Notice

🛠️ We Encourage You To:

💡 What This Means:

🧪 API Testing

Test Templates API

Test Purchase API

Test Email API

🚀 Quick Start

Prerequisites

Installation

🎯 What's Included

🎨 Multiple Pricing Tiers

🔧 API Endpoints

📄 Complete Page Set

🧩 Ready-to-Use Components

📁 Project Structure

🎨 Customization

Site Configuration

API Endpoints

Templates API

Purchase Management

Payment Processing

Email Services

Purchase Notifications

Environment Setup

Themes

Components

🛠️ Detailed Setup Guide

1. Environment Configuration

Core Settings

Payment Providers (Examples included for all)

Email Services (Multiple options)

Database Options (Examples for all major providers)

2. Service Integration Examples

Payment Integration

Authentication

Email Services

3. Database Setup

Supabase (Recommended)

Firebase

4. Deployment Checklist

🧩 Tech Stack

📦 Available Templates & Examples

💼 Business Features

Payment Integration Examples

Authentication Options

Email Service Integration

Database Examples

🚀 Deployment

Vercel (Recommended)

Other Platforms

🔧 Troubleshooting

Common Issues

Development Server Won't Start

Build Errors

Environment Variables Not Loading

API Routes Returning 404

Database Connection Issues

Getting Help

🤝 Contributing

Development

📝 License

🆘 Support

🙏 Acknowledgments

🔗 Links

About

Resources

License

Contributing

Uh oh!

Stars

Watchers

Packages