Project Structure

This guide explains the folder structure and organization of the FastStartup Starter Kit built with Next.js 15 using the App Router. The structure is designed to be scalable, modular, and flexible for various SaaS use cases. However, you can customize it to fit your specific requirements.

Tech Stack

  • Next.js 15
  • React 19
  • TypeScript
  • shadcn/ui
  • TailwindCSS
  • Zod
  • Prisma
  • Auth.js
  • Resend
  • Stripe

Root Directory

prisma

Contains the Prisma configuration files and schemas. This is where you define your database models and manage migrations.

src

The core application resides in the src/ folder, organized for scalability and ease of development.

Inside the src/ Folder

The core application resides in the src/ folder, organized for scalability and ease of development. Here are the main subdirectories:

plugins (Currently Being Renamed to api)

  • A headless API layer that simplifies integration with third-party services such as Auth.js, Stripe, and others.
  • These APIs are designed to be modular and reusable across different parts of the application.

Note: Plugins are being renamed to api to better reflect their purpose.

templates

  • Ready-to-use templates for various purposes.
  • Templates utilize plugins (or APIs) under the hood, making it easy to add features like authentication, payment integrations, etc.
  • Examples include:
    • Authentication flows
    • Stripe-based checkout templates

app

The Next.js App Router folder, organized into different sections:

(app)

  • The authenticated app.
  • Users are sent here after logging in.
  • Contains the main functionality of the app for logged-in users.

(landing)

  • Marketing and public-facing pages.
  • Includes landing pages, blogs, and other promotional content.

(auth)

  • Authentication-related pages.
  • Handles user login, signup, and password recovery flows.

api

  • REST APIs exposed by the application.
  • Custom APIs for backend logic or integrations can be defined here.

webhooks

  • Example implementations of webhooks, such as Stripe webhook handlers.

emails

  • Email templates built using @react-email.
  • Predefined email designs for user communication (e.g., welcome emails, password reset links).

components

  • Reusable components for your application.
  • Includes general UI components as well as shadcn/ui components for styling and interactivity.

Modular Approach with Features and Templates

FastStartup encourages a modular structure:

  • Feature-Specific Plugins: Encapsulate reusable logic and integrations with external services.
  • Feature-Specific Templates: Provide pre-built UI and workflows that use the plugins under the hood.

By combining plugins and templates, you can create fully functional Features for your application.

Flexibility and Customization

This structure is a suggestion based on best practices for scalability and modularity. You can:

  • Restructure directories to better fit your project.
  • Add or remove folders based on your application's specific needs.

The aim is to provide a foundation that accelerates your development while remaining flexible enough to adapt to future requirements.

Example Folder Structure

root
├── prisma
├── src
│   ├── plugins (will be renamed to api)
│   ├── templates
│   ├── app
│   │   ├── (app)
│   │   ├── (landing)
│   │   ├── (auth)
│   │   ├── api
│   │   ├── webhooks
│   ├── emails
│   ├── components

This structure keeps your application organized, modular, and ready to scale.