Guides
Project Structure

Project Structure

Top Structure

Here's the top level structure of the project:

.
├── README.md
├...
├── package.json # Scripts and dependencies
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public # Public directory for assets
├...
├── src # Code
├── stripe # Files specifically used by Stripe
├── supabase # Files specifically used by Supabase
├── tailwind.config.ts # Configuration for Tailwind
├── tsconfig.json # Configuration for Typescript
└...

Code Structure

Here's the code level structure inside ./src:

.
├── src
│   ├── app # Next.js App Router
│   ├── components # React components
│   ├── configs # Configuration for your project
│   └── helpers # Functions to be used in multiple places within the project

App Router Structure

Here's the App Router structure inside ./src/app

.
├── src
│   ├── app
│   │   ├── (account) # Authentication pages
│   │   │   ├── account
│   │   │   │   ├...
│   │   │   │   ├── sign-in
│   │   │   │   └── sign-up
│   │   │   └── layout.tsx
│   │   ├── (admin) # Admin pages
│   │   │   ├── admin
│   │   │   │   └── dashboard
│   │   │   └── layout.tsx
│   │   ├── (apps) # App specific pages
│   │   │   ├── apps
│   │   │   │   ├── ai-assistant-app
│   │   │   │   ├── ai-copy-writer-app
│   │   │   │   ├── image-generator-app
│   │   │   │   ├── pdf-chat-app
│   │   │   │   ├── profile-image-creator-app
│   │   │   │   └── text-to-speech-app
│   │   │   └── layout.tsx
│   │   ├── (marketing) # Landing pages, such as home page and pricing details
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx
│   │   │   └...
│   │   ├── api
│   │   │   ├── account # Authentication specific API
│   │   │   │   └...
│   │   │   ├── apps # App specific API
│   │   │   │   ├── ai-assistant-app
│   │   │   │   ├── ai-copy-writer-app
│   │   │   │   ├── image-generator-app
│   │   │   │   ├── pdf-chat-app
│   │   │   │   ├── profile-image-creator-app
│   │   │   │   └── text-to-speech-app
│   │   │   └── webhooks
│   │   │       └── stripe # Stripe webhook API
│   │   └── globals.css # Global styles for the whole site