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