Getting Started
Relevant source files
The following files were used as context for generating this wiki page:This document provides a guide for setting up and running the TAF-SAF project. TAF-SAF is a web application built using the Next.js framework and bootstrapped with create-next-app. It includes instructions on installation, running the development server, and an overview of the project's structure, dependencies, and core components.
The project utilizes Next.js 15, React 19, and TypeScript. Styling is managed through Tailwind CSS, and it features the Geist font family for typography. This guide is intended for developers looking to contribute to or run the project locally.
Sources: README.md, package.json, src/app/layout.tsx
Project Setup and Installation
To get the project running locally, you need to install the dependencies and then start the development server.
Prerequisites
- Node.js
- A package manager (npm, yarn, pnpm, or bun)
Installation
Clone the repository and install the required dependencies using your preferred package manager. The dependencies are defined in package.json.
Sources: package.json:9-16, README.md:5-15
Running the Development Server
Once the dependencies are installed, you can start the development server. The project uses next dev with the --turbopack flag for faster development.
npm run dev
After running this command, the application will be accessible at http://localhost:3000. The main page can be modified by editing src/app/page.tsx, and changes will be reflected instantly in the browser.
The following diagram illustrates the local development startup flow.
Sources: README.md:5-15, package.json:5
Project Structure
The project follows a standard Next.js App Router structure. Key files and directories are configured to support TypeScript, Tailwind CSS, and Next.js features.
The diagram below shows the high-level structure of the project.
Sources: tsconfig.json:25, src/app/page.tsx, src/app/layout.tsx
Key Files
| File | Description |
|---|---|
package.json | Defines project metadata, dependencies, and npm scripts. |
next.config.ts | Configuration file for the Next.js framework. It is currently empty. |
tsconfig.json | TypeScript compiler configuration. It sets the target to ES2017, enables JSX, and defines path aliases like @/* for ./src/*. |
src/app/layout.tsx | The root layout component that wraps all pages. It defines the <html> and <body> tags, loads global CSS, and sets up fonts. |
src/app/page.tsx | The main page component for the / route. This is the primary entry point for the application's UI. |
src/app/globals.css | Global stylesheet imported into the root layout. It includes Tailwind CSS directives and defines CSS variables for theming (light/dark mode). |
Sources: package.json, next.config.ts, tsconfig.json, src/app/layout.tsx, src/app/page.tsx, src/app/globals.css
Dependencies and Scripts
The project's functionality is defined by its dependencies and the scripts used to manage it.
Dependencies
The core functionality relies on Next.js and React.
| Package | Version | Description |
|---|---|---|
next | 15.3.2 | The React framework for building the application. |
react | ^19.0.0 | A JavaScript library for building user interfaces. |
react-dom | ^19.0.0 | Serves as the entry point to the DOM and server renderers for React. |
Development dependencies include TypeScript and Tailwind CSS for building and styling.
| Package | Version | Description |
|---|---|---|
typescript | ^5 | A typed superset of JavaScript that compiles to plain JavaScript. |
@types/node | ^20 | TypeScript type definitions for Node.js. |
@types/react | ^19 | TypeScript type definitions for React. |
tailwindcss | ^4 | A utility-first CSS framework for styling. |
Sources: package.json:9-16
Scripts
The package.json file defines scripts for common development tasks.
| Script | Command | Description |
|---|---|---|
dev | next dev --turbopack | Starts the development server with Turbopack for fast refresh. |
build | next build | Builds the application for production. |
start | next start | Starts the production server. |
lint | next lint | Runs the Next.js linter to check for code quality issues. |
Sources: package.json:4-8
Styling and Fonts
The project uses Tailwind CSS for styling and next/font for font optimization.
Tailwind CSS
Tailwind CSS is integrated into the project. The base directives are imported in src/app/globals.css.
/* src/app/globals.css:1 */
@import "tailwindcss";
Sources: src/app/globals.css:1
Theming
The application supports both light and dark color schemes. CSS variables are defined in :root for light mode and updated in a media query for dark mode. These variables are then used by Tailwind's theme configuration.
/* src/app/globals.css:3-13 */
:root {
--background: #ffffff;
--foreground: #171717;
}
@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:3-13
Fonts
The project uses the Geist font family, which is loaded and optimized via next/font. The sans-serif and mono versions are imported and configured in the root layout.
The RootLayout component applies the font variables to the <body> tag, making them available globally.
// src/app/layout.tsx:2, 5-14
import { Geist, Geist_Mono } from "next/font/google";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
The CSS classes generated from these font configurations are then applied to the <body> element.
// src/app/layout.tsx:27-29
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
The fonts are then consumed in components using Tailwind's arbitrary value support, as seen in src/app/page.tsx.
// src/app/page.tsx:5
<div className="... font-[family-name:var(--font-geist-sans)]">
Sources: src/app/layout.tsx:2, 5-14, 27-29, src/app/page.tsx:5, README.md:17-18