Folder Structure

• Directoryprisma/ # Database management (Prisma ORM)

  • schema.prisma # Database schema definitions and relationships
• Directorypublic/ # Static assets (images, fonts, etc.)

  • …
• Directorysrc/ # Main source code directory

  • Directoryapp/ # Next.js 13+ App Router directory

    • Directoryapi/ # API routes

      • Directorytrpc/ # tRPC API configuration

        • Directory[trpc]/ # tRPC dynamic routes

          • …
    • Directorycontact/ # Contact page feature

      • page.tsx # Contact page component
    • Directoryabout/ # About section with dynamic routing

      • Directory[type]/ # Dynamic route for different types

        • Directory[department]/ # Nested dynamic route for departments

          • page.tsx
      • Directorylogo-philosophy/ # Logo philosophy section

        • page.tsx
    • Directorydedication/ # Dedication page feature

      • page.tsx
    • Directorynews/ # News feature

      • page.tsx
    • page.tsx # Homepage
    • layout.tsx # Root layout
  • Directorycomponents/ # React components organized by feature

    • Directoryabout/ # About page components

      • …
    • Directorybrand/ # Branding related components

      • …
    • Directorycontact/ # Contact page components

      • …
    • Directorycommon/ # Shared components across features

      • global-footer.tsx # Footer component
    • Directorydedication/ # Dedication page components

      • …
    • Directorylogo-philosophy/ # Logo philosophy components

      • …
    • Directorymotion/ # Animation components

      • …
    • Directorynews/ # News feature components

      • …
    • Directoryui/ # Reusable UI components (shadcn/ui)

      • …
  • Directoryhooks/ # Custom React hooks

    • …
  • Directorylib/ # Utility functions and shared logic

    • utils.ts # General utility functions
  • Directorystyles/ # Styling files

    • globals.css # Global CSS styles
  • Directoryserver/ # Server-side code

    • Directoryapi/ # Server-side API implementations

      • …
  • Directorytrpc/ # tRPC configurations and routers

    • …
  • env.js # Environment variable validation (t3-env)

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

• prisma/: Contains database-related files using Prisma ORM
  • schema.prisma: Defines database models, relationships, and configurations
• public/: Static assets that are served directly
  • Images, fonts, and other public resources
• src/: Main source code directory containing all application code

App Directory (Next.js App Router)

The app/ directory follows Next.js 13+ App Router conventions:

• api/: Backend API routes
  • trpc/: tRPC API configuration and endpoints
• Feature-based pages: Each major feature has its own directory
  • about/, contact/, news/, etc.
  • Each contains a page.tsx for the main view
• Dynamic Routes: Uses Next.js file-based routing
  • [type]/: Dynamic routes for different department types
  • [department]/: Nested dynamic routes for department pages

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

Core Directories

• hooks/: Custom React hooks for shared logic
• lib/: Core utilities and shared logic
  • Authentication helpers
  • Common utilities
  • Type definitions
• server/: Server-side specific code
  • API implementations
  • Server utilities
• trpc/: tRPC configuration and routers
  • API route definitions
  • Type-safe procedures

Styles

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

Importing Files

To import files, you can use the @/ alias. This alias is automatically configured in the project.

src/app/news/page.tsx

import { FadeIn } from "@/components/motion/fade-in";
import { MotionText } from "@/components/motion/motion-text";
import { UnderlineHover } from "@/components/motion/underline-hover";
import { NewsCard } from "@/components/news/news-card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { buttonVariants } from "@/components/ui/button";
import { abbreviation, cn, momentId } from "@/lib/utils";
import { api } from "@/trpc/server";

This approach is very useful when you are working on a large project with a lot of files and folders and it can be done by updating the tsconfig.json file to the following:

Typescript Config

tsconfig.json

{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,

    /* Bundled projects */
    "lib": ["dom", "dom.iterable", "ES2022"],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "incremental": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "lint-staged.config.js", "commitlint.config.js"]
}