Folder Structure

This project utilizes the Next.js App Router, which uses a folder-based routing system. This document explains the conventions used, particularly Route Groups and Private Folders, to organize the application effectively.

Core Concepts

• Route Groups (...): Folders enclosed in parentheses () are ignored for URL path matching. Their primary purpose is to organize routes and apply specific layouts (layout.tsx) to segments without affecting the URL structure. For example, files within app/(main)/dashboard/page.tsx will be served at /dashboard.

• Private Folders _...: Folders prefixed with an underscore _ (e.g., _components, _lib) are entirely opted out of routing. They and all their subfolders are treated as private implementation details, suitable for colocating UI components, utilities, styles, etc., relevant to a specific route segment or layout. Reference: Next.js Docs - Private Folders

Top-Level Structure: (landing) vs (app)

The application is broadly divided into two main route groups at the src/app level:

• (landing): Contains all routes accessible to unauthenticated users. This includes the public homepage (/home), marketing pages, and authentication-related pages (/signin, /signup, etc., nested within (auth)).
• (app): Contains all routes accessible only to authenticated users. This is the main application interface users interact with after logging in.

Note: The root path / itself doesn't have a page file. The middleware (src/middleware.ts) rewrites requests for / to either /home (if logged out) or /app (if logged in) internally. See Middleware Documentation for details.

(landing) Group

• Purpose: Public-facing pages and authentication flows.
• Layout (src/app/(landing)/layout.tsx): Defines the shared structure for landing pages, typically including a LandingHeader and LandingFooter.
• Nested (auth) Group: Contains authentication-specific pages (signin, signup, forgot-password, etc.).
  • Purpose: Groups auth pages together.
  • Layout (src/app/(landing)/(auth)/layout.tsx): Often applies a simpler layout suitable for forms (e.g., centered content) while still inheriting the base landing styles/providers if needed.

(app) Group

• Purpose: The main application interface for logged-in users.
• Layout (src/app/(app)/layout.tsx): Defines the core application shell, usually including a persistent sidebar (AppSidebar), main header (AppHeader), and the main content area.

Nested Layouts within (app)

The (app) group further utilizes nested route groups to apply different content layout behaviors within the main app shell:

• (full-page) (src/app/(app)/(full-page)/layout.tsx): Designed for pages that should occupy the full viewport height, typically with a fixed header and an internally scrollable content area. The page content itself doesn't cause the main browser window to scroll.

  • Use Case: Dashboards, complex interfaces, or pages where the primary interaction happens within a defined content boundary. Example: The /admin page uses this layout.
  • To Use: Place page routes that require this behavior inside the src/app/(app)/(full-page)/ directory.

• (scrollable) (src/app/(app)/(scrollable)/layout.tsx): Designed for standard pages where the entire page content, including the main app header, should scroll normally within the browser window.

  • Use Case: Settings pages, content pages, forms, or any typical document-style page.
  • To Use: Place standard page routes inside the src/app/(app)/(scrollable)/ directory.

Private Folders (_components, etc.)

Throughout the structure (e.g., src/app/(app)/_components), you'll find folders prefixed with _. As mentioned, these are private implementation details and do not participate in routing.

• Convention: While not strictly required by Next.js, prefixing component folders with _components is a good practice adopted here.
• Purpose: It clearly indicates these folders contain supporting files (React components, hooks, utils) specific to the surrounding route segment or layout, rather than being route segments themselves.