Frontend Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• src/app/layout.tsx
• src/app/page.tsx
• package.json
• src/app/globals.css
• tsconfig.json
• next.config.ts
• README.md

The TAF-SAF project is a modern web application built using Next.js 15 and React 19, bootstrapped with create-next-app. The architecture leverages the Next.js App Router for file-system-based routing and server-side rendering capabilities. The project is written in TypeScript, ensuring type safety and improved developer experience.

Styling is managed through Tailwind CSS v4, configured for a streamlined, utility-first CSS workflow. The application also features a basic light/dark mode theming system and utilizes the custom Geist font family for typography. The overall structure is a standard, yet powerful, setup for building scalable and performant React applications.

Sources: README.md, package.json, src/app/layout.tsx, src/app/globals.css

Technology Stack

The core of the frontend is built on a specific set of libraries and frameworks. The development server is run with Turbopack for enhanced performance (next dev --turbopack).

Sources: package.json:5-8

The following diagram illustrates the main technologies and their roles in the project.

Key Dependencies

Dependency	Version	Role
next	15.3.2	The core React framework for the application.
react	^19.0.0	The UI library for building components.
react-dom	^19.0.0	Serves as the entry point to the DOM and server renderers for React.
typescript	^5	Provides static typing for the JavaScript code.
tailwindcss	^4	A utility-first CSS framework for styling.
@tailwindcss/postcss	^4	PostCSS plugin for Tailwind CSS.

Sources: package.json:10-21

Project Structure and Components

The project follows the Next.js App Router convention, where directories and special files within the src/app directory define routes and UI.

Sources: src/app/layout.tsx, src/app/page.tsx

Core Files

• src/app/layout.tsx: This file defines the root layout that wraps all pages. It sets up the <html> and <body> tags, loads global stylesheets, and configures fonts.
• src/app/page.tsx: This file corresponds to the root URL (/) of the application and exports the main page component.
• src/app/globals.css: Contains global styles, Tailwind CSS imports, and CSS variable definitions for theming.

Component Hierarchy

The application has a simple nested component structure where the RootLayout component wraps the Home page component.

The diagram below shows how a request for the home page is rendered.

Root Layout

The RootLayout component is responsible for the global page shell. Its key functions are:

• Defining page metadata (title and description).
• Importing and applying the Geist and Geist_Mono fonts via CSS variables (--font-geist-sans, --font-geist-mono).
• Applying global styles by importing globals.css.
• Rendering child components (i.e., the current page) within the <body> tag.

// src/app/layout.tsx:21-32
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Sources: src/app/layout.tsx:5-14, 16-19, 21-32

Home Page

The Home component in src/app/page.tsx renders the main content for the application's entry point. It is structured using a three-row CSS grid and styled with Tailwind CSS utility classes. It makes use of the next/image component for optimized image loading.

Sources: src/app/page.tsx:4-94

Styling and Theming

Styling is primarily handled by Tailwind CSS v4. Global styles and theme variables are defined in src/app/globals.css.

CSS Variables and Theming

The application defines CSS custom properties (variables) for background and foreground colors. It supports a dark mode theme by re-defining these variables within a @media (prefers-color-scheme: dark) query.

/* src/app/globals.css:3-8 */
:root {
  --background: #ffffff;
  --foreground: #171717;
}

/* src/app/globals.css:16-21 */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

These variables, along with font variables from layout.tsx, are mapped to Tailwind's theme using the @theme inline directive, making them available as utility classes.

Sources: src/app/globals.css:3-21, src/app/layout.tsx:5-14

Font Management

The project uses next/font to load and optimize the Geist and Geist_Mono fonts. These are configured in src/app/layout.tsx and made available globally as CSS variables, which are then referenced in components and the global stylesheet.

Sources: src/app/layout.tsx:2, 5-14, src/app/page.tsx:6, 14, src/app/globals.css:12-13

The flow of style application is as follows:

Configuration

TypeScript Configuration

The tsconfig.json file configures the TypeScript compiler. Key settings include:

• target: "ES2017": Compiles TypeScript to a modern version of JavaScript.
• moduleResolution: "bundler": Uses the modern module resolution strategy.
• jsx: "preserve": Passes JSX through to be handled by Next.js.
• paths: Sets up a path alias "@/*" to point to the src/ directory, simplifying import statements.

Sources: tsconfig.json:3, 10, 13, 18-20

Next.js Configuration

The next.config.ts file is present for Next.js-specific configuration. Although currently empty, it is the designated place for customizing the Next.js build process, setting up redirects, and other advanced features.

Sources: next.config.ts:1-5

Summary

The frontend architecture of TAF-SAF is a robust and modern setup based on Next.js 15. It effectively utilizes the App Router for structure, TypeScript for type safety, and Tailwind CSS for efficient styling. The project is well-configured for development with features like Turbopack and path aliases, providing a solid foundation for future expansion. The use of next/font and a CSS variable-based theming system demonstrates an attention to performance and modern web standards.