Root Directory

App/
├── src/                    # Source code directory
├── public/                 # Static assets (images, icons, etc.)
├── next.config.mjs         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
├── tailwind.config.ts     # TailwindCSS configuration
├── postcss.config.mjs     # PostCSS configuration
├── vercel.json            # Vercel deployment configuration
├── package.json           # Dependencies and scripts
├── yarn.lock              # Dependency lock file
└── components.json        # shadcn/ui component configuration

Configuration Files

• next.config.mjs: Next.js configuration including image domain allowlist for Supabase Storage
• tsconfig.json: TypeScript compiler options with path aliases (@/* → ./src/*)
• tailwind.config.ts: TailwindCSS theme and plugin configuration
• vercel.json: Vercel deployment settings for branch-based deployments
• package.json: Project metadata, dependencies, and npm/yarn scripts

---

Middleware Entry Point

Location: src/middleware.ts

Purpose: Next.js middleware entry point that handles session management and route protection.

Key Responsibilities:

• Session refresh via Supabase
• Authentication checks
• Route protection based on permissions
• Redirect handling for unauthenticated users

---

File Naming Conventions

Actions

• Pattern: *-action.ts (e.g., create-campaign-action.ts)
• Purpose: Server Actions for mutations

Services

• Pattern: get*.ts, fetch*.ts, create*.ts, update*.ts
• Purpose: Data access and business logic

Components

• Pattern: kebab-case.tsx (e.g., campaign-create.tsx)
• Purpose: React components

Types

• Pattern: *.ts with descriptive names (e.g., campaign.ts)
• Purpose: TypeScript type definitions

Hooks

• Pattern: use*.ts or use*.tsx (e.g., use-debounce.ts)
• Purpose: Custom React hooks

---

Best Practices

1. Separation of Concerns:

   • Actions handle mutations
   • Services handle data access
   • Components handle UI
   • Types provide type safety

2. Code Organization:

   • Group related files in directories
   • Use consistent naming conventions
   • Keep files focused on a single responsibility

3. Reusability:

   • Common components in components/common/
   • Shared utilities in lib/
   • Reusable hooks in hooks/

4. Type Safety:

   • Define types in types/ directory
   • Use TypeScript throughout
   • Leverage Zod for runtime validation

---

Directory Size Summary

Directory	Approximate Files	Purpose
actions/	~30 files	Server Actions for mutations
app/	~80+ files	Next.js routes and pages
components/	~200+ files	React components
context/	~7 files	React Context providers
hooks/	~12 files	Custom React hooks
lib/	~20 files	Utilities and helpers
middleware/	~10 files	Route protection
services/	~40 files	Data access layer
types/	~15 files	TypeScript types

---