Project Structure

Relevant source files

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

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

This document outlines the project structure of the TAF-SAF application. The project is a web application built using the Next.js framework, bootstrapped with create-next-app. It utilizes TypeScript for type safety, React for the user interface, and Tailwind CSS for styling.

The structure follows the conventions of the Next.js App Router, with core application logic residing in the src/app directory. Configuration for the framework, TypeScript, and dependencies are managed at the root level. The primary goal of this structure is to provide a scalable and maintainable foundation for application development.

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

Core Technologies and Dependencies

The project is built on a modern web stack. The core dependencies and development dependencies define its technical foundation.

Sources: package.json

Dependencies

The application relies on the following core libraries for its runtime functionality:

Package	Version	Description
next	15.3.2	The React framework for production.
react	19.0.0	A JavaScript library for building UIs.
react-dom	19.0.0	Serves as the entry point to the DOM.

Sources: package.json:10-12

Development Dependencies

These packages are used during the development and build process:

Package	Version	Description
typescript	^5	A typed superset of JavaScript.
@types/node	^20	Type definitions for Node.js.
@types/react	^19	Type definitions for React.
@types/react-dom	^19	Type definitions for React DOM.
@tailwindcss/postcss	^4	A PostCSS plugin for Tailwind CSS.
tailwindcss	^4	A utility-first CSS framework.

Sources: package.json:14-21

The following diagram shows the relationship between the main configuration files and the core technologies.

This diagram illustrates how configuration files manage the project's core technologies.
Sources: package.json, tsconfig.json, next.config.ts, src/app/globals.css

Application Structure

The application's file-based routing and layout system are centered within the src/ directory, following Next.js conventions.

Root Layout and Page

The main entry point for the application's UI is defined by src/app/layout.tsx and src/app/page.tsx.

• src/app/layout.tsx: This file defines the root RootLayout component, which wraps all pages. It sets up the main <html> and <body> tags, imports global stylesheets, and configures fonts.
• src/app/page.tsx: This file exports the Home component, which renders the content for the root URL (/).

The rendering flow starts with RootLayout, which then renders its children, in this case, the Home component from page.tsx.

This diagram shows the basic rendering flow for the home page.
Sources: src/app/layout.tsx:21-33, src/app/page.tsx:3

Styling and Fonts

Styling is managed globally via src/app/globals.css, which uses Tailwind CSS.

• Tailwind CSS: The project uses Tailwind CSS 4, imported directly into globals.css.
• CSS Variables: The :root selector in globals.css defines CSS custom properties for background and foreground colors, supporting both light and dark themes via a prefers-color-scheme media query.
• Fonts: The application uses the Geist and Geist_Mono fonts from next/font/google. These are loaded in layout.tsx and assigned to CSS variables (--font-geist-sans, --font-geist-mono), which are then used in globals.css and page.tsx.

// src/app/layout.tsx:5-14
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

/* src/app/globals.css:10-13 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

Sources: src/app/globals.css:1-25, src/app/layout.tsx:2-14, src/app/page.tsx:5

Configuration

The project's behavior is controlled by several root-level configuration files.

Next.js Configuration

The next.config.ts file is the primary configuration for the Next.js framework. In its current state, it contains an empty configuration object, meaning the project is running with default Next.js settings.

// next.config.ts:3-5
const nextConfig: NextConfig = {
  /* config options here */
};

Sources: next.config.ts:3-5

TypeScript Configuration

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

• Target: Compiles to ES2017 JavaScript.
• Module Resolution: Uses bundler strategy.
• JSX: Preserves JSX for Next.js to handle.
• Path Aliases: Defines a @/* alias to point to the src/* directory for cleaner import paths.

Configuration	Value	Description
target	ES2017	Specifies ECMAScript target version.
module	esnext	Specifies module code generation.
moduleResolution	bundler	Modern module resolution strategy.
jsx	preserve	Keeps JSX for another transform step.
paths	{"@/*": ["./src/*"]}	Sets up a base URL and path mapping.

Sources: tsconfig.json:2-22

Scripts

The package.json file defines several npm scripts for common development tasks.

This diagram shows the sequence of events when a developer starts the development server.
Sources: package.json:5-9, README.md:5-13

Available Scripts

Script	Command	Description
dev	next dev --turbopack	Runs the development server with Turbopack.
build	next build	Creates an optimized production build.
start	next start	Starts the production server.
lint	next lint	Runs the Next.js linter.

Sources: package.json:5-9

Summary

The TAF-SAF project is a standard Next.js 15 application using the App Router. It is configured with TypeScript for type safety and Tailwind CSS for styling. The structure is modular, with a clear separation between pages, layouts, and global styles. The provided scripts in package.json support a typical development workflow, including development, building, and linting. The foundation is solid for extending the application with new features and components.

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