Project Structure

RocketFuel projects follow an opinionated structure designed for scalability and maintainability.

Overview

• Directorysrc/

  • Directoryapp/ Next.js App Router

    • Directoryapi/ API routes

      • Directoryauth/[…all]/ Authentication endpoints

        • …
      • Directorystripe/ Payment endpoints (if enabled)

        • …
    • Directory(auth)/ Auth pages (route group)

      • Directorylogin/

        • …
      • Directorysignup/

        • …
    • layout.tsx Root layout
    • page.tsx Home page
  • Directorycomponents/

    • Directoryui/ shadcn/ui components

      • …
  • Directorylib/ Shared utilities

    • auth.ts Authentication config
    • auth-client.ts Client-side auth
    • stripe.ts Stripe config (if enabled)
    • queue.ts BullMQ config (if enabled)
    • email.ts Resend config (if enabled)
    • utils.ts Utility functions
  • Directoryserver/

    • Directorydb/

      • index.ts Database client
      • schema.ts Drizzle schema
  • Directoryscripts/ Background workers

    • …
• Directorypublic/ Static assets

  • …
• Directorydrizzle/ Migration files

  • …
• .env.example Environment template
• docker-compose.yml Docker services
• drizzle.config.ts Drizzle configuration
• tailwind.config.ts Tailwind configuration

Directory Purposes

src/app/

Next.js App Router pages and API routes. Uses file-based routing.

• API Routes: Place in api/ subdirectories
• Route Groups: Use (folder) syntax to organize without affecting URLs
• Layouts: Shared UI in layout.tsx files

src/components/

React components organized by purpose:

• ui/ - shadcn/ui base components
• Add your own subdirectories: forms/, dashboard/, etc.

src/lib/

Shared utilities and configuration:

• Third-party service configs (auth, stripe, etc.)
• Helper functions
• Type definitions

src/server/

Server-only code:

• Database client and schema
• Server actions (if used)
• Backend utilities

src/scripts/

Standalone scripts:

• Background job workers
• Database seeders
• One-off tasks

Conventions

File Naming

• Components: PascalCase (UserProfile.tsx)
• Utilities: camelCase (formatDate.ts)
• Pages: lowercase with hyphens (user-settings/)

Import Aliases

The project uses @/ as an alias to src/:

import { Button } from "@/components/ui/button";
import { db } from "@/server/db";
import { auth } from "@/lib/auth";

Environment Variables

• Server-only: DATABASE_URL, STRIPE_SECRET_KEY
• Client-accessible: Prefix with NEXT_PUBLIC_

Extending the Structure

As your project grows, consider adding:

src/
├── hooks/          # Custom React hooks
├── types/          # TypeScript type definitions
├── constants/      # App-wide constants
├── services/       # Business logic
└── emails/         # React Email templates