Overview

Verve is a production-ready Next.js boilerplate that accelerates SaaS application development from weeks to days. It provides a complete foundation with authentication, beautiful UI components, optimized performance, and best practices baked in. Focus on building your unique features, not reinventing the wheel.

What's Included

Technology Stack

Core Technologies

Next.js 14 - React meta-framework

• App Router
• Server Components
• Server Actions
• Route handlers
• Middleware
• Streaming

React 18 - UI library

• Server Components
• Suspense
• Concurrent rendering
• Hooks
• Context API

TypeScript - Type safety

• Static typing
• Enhanced IDE support
• Better refactoring
• Self-documenting code

Styling & UI

Tailwind CSS - Utility-first CSS

• JIT compiler
• Custom theme
• Dark mode
• Responsive utilities
• Custom plugins

Shadcn UI - Component library

• Radix UI primitives
• Accessible components
• Customizable
• Copy-paste friendly
• No package bloat

Framer Motion - Animation library

• Declarative animations
• Gesture support
• Layout animations
• Scroll animations
• SVG animations

Additional Tools

Zod - Schema validation

• Runtime validation
• TypeScript integration
• Form validation
• API validation
• Error messages

pnpm - Package manager

• Fast installations
• Efficient storage
• Workspace support
• Strict dependencies

Vercel - Deployment platform

• One-click deployment
• Edge Network
• Analytics
• Preview deployments
• Domain management

What Makes Verve Special

Time-Saving Features

Getting Started

git clone https://github.com/yourusername/verve
cd verve
pnpm install

cp .env.example .env.local

pnpm dev

vercel deploy

Project Structure

Customization Guide

Branding

Colors:

// tailwind.config.ts
theme: {
  extend: {
    colors: {
      primary: {...},
      secondary: {...},
      accent: {...}
    }
  }
}

Typography:

// app/layout.tsx
import { Inter, Poppins } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

Logo:

• Replace /public/logo.svg
• Update components/marketing/header.tsx
• Update favicons in /public

Content

Landing Page:

• Edit app/(marketing)/page.tsx
• Update copy in component files
• Modify sections as needed
• Add/remove sections
• Update images

Pricing:

• Edit config/pricing.ts
• Customize pricing tiers
• Add/remove features
• Update CTAs

Testimonials:

• Edit config/testimonials.ts
• Add customer quotes
• Update avatars
• Add company logos

Performance Benchmarks

Metrics

Performance

• LCP: < 1.2s
• FID: < 100ms
• CLS: < 0.1
• FCP: < 1.0s
• TTI: < 2.0s

Best Practices

• HTTPS enforced
• No console errors
• Secure headers
• Modern APIs
• Accessibility

SEO

• Semantic HTML
• Meta tags
• Structured data
• Mobile-friendly
• Fast loading

Use Cases

Scenario 1: SaaS Startup

Launch your SaaS faster:

• Use pre-built landing page
• Integrate your authentication
• Add your app features
• Deploy in days, not months

Scenario 2: MVP Development

Build and validate quickly:

• Focus on core features
• Skip boilerplate code
• Professional appearance
• Production-ready foundation

Scenario 3: Agency Projects

Accelerate client work:

• Consistent starting point
• Best practices included
• Easy to customize
• Client-ready quality

What to Build Next

After setup, focus on:

1. Database Integration - Add Prisma/MongoDB
2. Authentication - Integrate auth provider
3. Core Features - Build your unique functionality
4. Payment - Add Stripe/payment gateway
5. Email - Set up transactional emails
6. Analytics - Add tracking
7. Testing - Add test suite
8. CI/CD - Automated deployments

Frequently Asked Questions

Included Scripts

# Development
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint

# Fix linting issues
pnpm lint:fix

# Type check
pnpm type-check

# Format code
pnpm format

# Analyze bundle
pnpm analyze

Deployment

Vercel (Recommended)

vercel deploy

Automatic optimizations:

• Edge Network
• Serverless Functions
• Image Optimization
• Analytics
• Preview URLs

Other Platforms

Verve works on:

• Netlify
• AWS Amplify
• Digital Ocean App Platform
• Railway
• Render
• Self-hosted (PM2, Docker)

Future Roadmap

• Database Templates - Pre-configured Prisma schemas
• Auth Templates - Complete auth implementations
• Payment Integration - Stripe setup guide
• Email Templates - Transactional email setup
• Admin Dashboard - Basic admin interface
• API Documentation - Built-in API docs
• Testing Setup - Jest and Playwright
• Storybook - Component library docs
• Multi-Tenancy - Multi-tenant patterns
• Internationalization - i18n setup