General

The project is structured like a regular TypeScript-based Next.js 14 project which is using the modern /app folder. Here is what the file tree looks like when you clone the project:

• app
  • _actions (all server actions)
    • moduleName (e.g. 'auth' or 'tags')
      • serverAction.ts (specific server action belonging to that module: 1 file = 1 function)
  • _components (all components)
    • ___pageName (components belonging to a certain page, e.g. home)
    • _ui (all shadcn and other custom UI-only components)
    • moduleName (e.g. ads or comments)
      • componentName.tsx (specific component belonging to what module: 1 file = 1 component)
    • componentName.tsx (general purpose components used multiple times through out the app - e.g. Footer)
  • _constants
    • constants.ts (the company config file with all static data)
  • _lib (helper functions)
    • utils.ts (general purpose helper functions like capitalize())
    • useXYZ.ts (Custom React Hooks)
    • otherName.ts (Standalone functions with a single purpose, e.g. Error Handling)
  • _types (all typescript types)
    • supabase-queries.ts (custom supabase queries and corresponding types)
    • supabase.ts (automated supabase types - directly from the database)
    • types.ts (general purpose types used in multiple files)
  • (Protected) (Page Group of user or admin protected paths)
    • account (all account related pages)
      • moduleName (e.g. 'posts' or 'settings')
  • (Public) (Page Group of publically available paths)
    • (auth) (Page Group of all auth-related pages)
    • (legal) (Page Group of all legal-related pages)
    • otherName (e.g. 'explore')
  • api (API-related pages)
    • moduleName (e.g. auth)
  • file: apple-icon.png (If users bookmark your page on their iPhone, this icon will be shown)
  • file: error.tsx and global-error.tsx (Standalone html pages which are shown in case there are errors)
  • file: globals.css (This file includes tailwind css styles and custom shadcn themes.)
  • file: icon.ico (This is the icon shown in the tab of the browser.)
  • file: layout.tsx (This is the layout of your whole app.)
  • file: manifest.ts (This is to let browsers and search engines know where to find your icons.)
  • file: not-found.ts (Component shown when a file or path cannot be found.)
  • file: page.tsx (This is your front page.)
  • file: sitemap.ts (This file generates your sitemap automatically!)
• public (storage of publically available files)
  • icons
  • img
  • logos
  • file: favicon.ico (This is the icon shown in the tab of the browser. I feel it is used in local development.)
• supabase (Supabase migration & seed files which are used to setup your database schema)
• files: .eslintignore, .eslintrc, .gitignore, .prettierignore, mdx-components.tsx, next-env.d.ts, next.config.js, package.json, pnpm-lock.yaml, postcss.config.js, tailwind.config.ts, tsconfig.json (general purpose files, you do not need to care about)
• file: .env.local (holds your secret keys - copy the content to your hosting provider)
• file: middleware.ts (Supabase auth is configured here. If you need to change something.)
• file: README.md (This file contains a setup guide in short form.)
• file: vercel.json (This file configures your CRON Jobs. If you do not host on Vercel, make sure to re-create the file's logic with your other hosting provider.)