Project Structure

A clean and modular project structure designed for scalability and maintainability.

Directory Overview

The project follows a clean and modular structure, making it easy to navigate and maintain:

├── src/
│   ├── app/                 # Next.js app router pages and layouts
│   ├── components/          # Reusable React components
│   ├── lib/                 # Utility functions and configurations
│   ├── styles/             # Global styles and CSS modules
│   └── types/              # TypeScript type definitions
├── public/                 # Static assets and images
├── emails/                 # React email templates
├── prisma/                # Database schema and migrations
└── tests/                 # Test files and test utilities

Key Directories Explained

src/app/

Uses Next.js 14 App Router for file-based routing. Each folder represents a route segment:

app/
├── (auth)/           # Authentication related pages
│   ├── login/       # Login page
│   ├── register/    # Registration page
│   └── layout.tsx   # Auth layout with centered content
├── (dashboard)/     # Dashboard and protected pages
│   ├── settings/    # User settings pages
│   ├── billing/     # Subscription management
│   └── layout.tsx   # Dashboard layout with sidebar
├── (marketing)/     # Public marketing pages
│   ├── pricing/     # Pricing page
│   ├── about/       # About page
│   └── layout.tsx   # Marketing layout
├── api/            # API routes and webhooks
└── docs/           # Documentation pages

src/components/

Organized collection of reusable components, following a modular structure:

components/
├── ui/             # Base UI components
│   ├── button.tsx  # Button component
│   ├── card.tsx    # Card component
│   └── input.tsx   # Input component
├── forms/          # Form-related components
│   ├── auth/       # Authentication forms
│   └── billing/    # Billing forms
├── layouts/        # Layout components
│   ├── header.tsx  # Site header
│   └── footer.tsx  # Site footer
├── auth/           # Authentication components
└── dashboard/      # Dashboard-specific components

src/lib/

Contains utility functions, configurations, and service integrations:

lib/
├── auth/           # Authentication utilities
├── supabase/       # Supabase client and helpers
├── stripe/         # Stripe integration utilities
├── email/          # Email sending utilities
└── utils/          # General utility functions

Configuration Files

Important configuration files in the root directory:

├── .env.example          # Example environment variables
├── next.config.js        # Next.js configuration
├── tailwind.config.ts    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
├── package.json          # Project dependencies and scripts
└── middleware.ts         # Next.js middleware for auth and headers

Best Practices

Component Organization

  • Keep components small and focused on a single responsibility
  • Use the appropriate directory for each type of component (ui/, forms/, etc.)
  • Follow the naming convention: kebab-case for files, PascalCase for components
  • Co-locate related components, styles, and tests

Code Organization

  • Keep pages thin and move business logic to components or utilities
  • Use TypeScript types and interfaces in the types/ directory
  • Follow the principle of least privilege for API routes
  • Keep configuration in appropriate config files

Next Steps

Tech Stack →

Learn about the core technologies used

Database Guide →

Set up your database schema