Dirstarter follows a modular architecture based on Next.js App Router. This page explains the key directories and files in the project.

Root Directory Structure

Key Directories

/components Directory

Components are organized by their purpose:

/server Directory

Server-side code is organized by feature:

Each folder contains a well-defined set of files for a specific feature. You can store your server actions, queries, schemas, and other server-side code in these folders.

Key Files

• prisma/schema.prisma: Defines your database schema
• content-collections.ts: Configures MDX content collections
• middleware.ts: Contains route protection logic
• next.config.js: Next.js configuration
• .env.example: Template for environment variables

Naming Conventions

Dirstarter follows these naming conventions:

• React Components: PascalCase (e.g., ToolCard.tsx)
• Utility Functions: camelCase (e.g., formatDate.ts)
• Server Actions: camelCase (e.g., createTool.ts)
• Database Models: PascalCase in schema, camelCase in code

Next Steps

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

• VSCode / Cursor Setup
• Formatting & Linting
• Update the Codebase