Skip to content
ShipSaaSShipSaaS Docs

Project Structure

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

Root Directory Structure

Section titled “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

Section titled “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

Section titled “Key Directories”

/src/api Directory

Section titled “/src/api Directory”

Server-side API logic organized by features:

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

/src/lib Directory

Section titled “/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

Section titled “/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

Section titled “/src/components Directory”

Components are organized by function and usage for better maintainability:

Shared Components

Section titled “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

Section titled “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

Section titled “Next Steps”

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