Folder Structure

• Directorypublic/ # Static assets (images, fonts, etc.)

  • …
• Directorysrc/ # Main source code directory

  • Directorycomponents/ # UI Components

    • …
  • Directorydata/ # Mock Data

    • …
  • Directoryhooks/ # Custom React Hooks

    • …
  • Directorylayouts/ # Main Layout

    • …
  • Directorylib/ # SEO

    • …
  • Directorypages/ # Here lies a pages

    • …
  • Directoryservices/ # API calls

    • …
  • App.css
  • App.jsx
  • index.css
  • main.jsx

Directory Structure Explanation

This project follows the T3 Stack architecture, which emphasizes type-safety and modularity. The structure above shows our feature-based organization, clear separation of client/server code, and adherence to Next.js App Router conventions.

Root Directories

• public/: Static assets that are served directly
  • Images, fonts, and other public resources
• src/: Main source code directory containing all application code

Components Directory

Components are organized by feature and responsibility:

• Feature Components: Grouped by feature
  • about/: Components specific to about pages
  • contact/: Contact page components
  • news/: News feature components
• Common Components: Shared across features
  • common/: Global components like headers and footers
  • motion/: Animation and transition components
  • ui/: Reusable UI components (using shadcn/ui)
    • Buttons, forms, modals, etc.
    • Theme configuration and base components

Styles

• styles/: Global styling configurations
  • globals.css: Global CSS styles, Tailwind configurations, and Shadcn/UI theme configuration