LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
X (Twitter)

Project Structure

Overview of the TanStarter template file and folder organization

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

Root Directory Structure

styles.css
biome.json
content-collections.ts
drizzle.config.ts
drizzle.config.local.ts
vite.config.ts
wrangler.jsonc

Key Files

  • vite.config.ts: Vite configuration with TanStack Start, Cloudflare, Tailwind CSS, and Content Collections plugins
  • wrangler.jsonc: Cloudflare Workers configuration including D1 database and R2 storage bindings
  • content-collections.ts: Content Collections configuration for blog, legal pages, and changelog
  • drizzle.config.ts: Drizzle ORM configuration for the database
  • biome.json: Biome linter and formatter configuration
  • .env.example: Template for environment variables

Key Directories

/src/api Directory

Server-side API logic organized by feature:

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 TanStack Router file-based routing convention:

__root.tsx
index.tsx

/src/components Directory

Components are organized by feature and purpose for better maintainability:

Shared Components

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

Feature Components

The components directory is organized by feature, making it easy to locate and maintain components related to specific features like authentication, blog, dashboard, etc.

Next Steps

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

IDE Setup

Configure your development environment

Environment Setup

Configure environment variables

Getting Started

TanStarter template getting started guide

Updating the Codebase

Keep your project codebase up to date

Table of Contents

Root Directory Structure
Key Files
Key Directories
/src/api Directory
/src/lib Directory
/src/routes Directory
/src/components Directory
Shared Components
Feature Components
Next Steps