Project Structure

ShipSaaS follows a modular architecture based on TanStack Router file-based routing, focusing on scalability and maintainability.

Root Directory Structure

src
├── api
├── auth
├── components
├── config
├── db
├── env
├── hooks
├── lib
├── mail
├── messages
├── middlewares
├── newsletter
├── notification
├── payment
├── storage
├── routes
├── types
└── styles.css

content
public
scripts
biome.json
content-collections.ts
drizzle.config.ts
drizzle.config.local.ts
vite.config.ts
wrangler.jsonc

Key Files

• vite.config.ts: Vite configuration containing plugins for ShipStack (NextJS), Cloudflare, Tailwind CSS, and Content Collections.
• wrangler.jsonc: Cloudflare Workers configuration, including bindings for D1 database and R2 storage.
• content-collections.ts: Content Collections configuration for blog, legal pages, and changelog.
• drizzle.config.ts: Drizzle ORM configuration for the database.
• biome.json: Biome linting and formatting configuration.
• .env.example: Environment variables template.

Key Directories

/src/api Directory

Server-side API logic organized by features:

• contact.ts
• newsletter.ts
• payment.ts
• user-files.ts
• users.ts

/src/lib Directory

Core application logic and utilities:

• blog.ts
• changelog.ts
• formatter.ts
• markdown.ts
• pages.ts
• price-plan.ts
• routes.ts
• seo.ts
• urls.ts
• utils.ts

/src/routes Directory

The routes directory follows the TanStack Router file-based routing conventions:

• __root.tsx
• index.tsx
• auth
• dashboard
• settings
• admin
• (pages)
• (legals)
• blog
• api

/src/components Directory

Components are organized by function and usage for better maintainability:

Shared Components

Shared components are reusable across the application and organized in dedicated directories:

• ui
• blocks
• layout
• shared
• theme
• analytics
• chatbox
• affiliate

Feature-Specific Components

Component directories organized by features for easier location and maintenance of components related to specific functionality:

• admin
• auth
• blog
• changelog
• contact
• dashboard
• payment
• pricing
• settings
• waitlist

Next Steps

Now that you understand the project structure, explore these related topics:

• Development Environment - Configure development environment

• Environment Configuration - Configure environment variables

• Get ShipSaaS - Getting started documentation for ShipSaaS template

• Changelog - Keeping your project codebase up to date

• API Key Management

• Code Linting