Skip to main content

​
Overview

The SAAC Frontend follows the standard Vite + React + TypeScript structure, optimized for modern web development with minimal configuration.

​
Directory Tree

frontend/
├── public/              # Static assets served as-is
│   └── vite.svg        # Vite logo (favicon)
├── src/                # Source code directory
│   ├── assets/         # Application assets (images, fonts, etc.)
│   │   └── react.svg   # React logo
│   ├── App.css         # Component-specific styles for App
│   ├── App.tsx         # Main application component
│   ├── index.css       # Global styles
│   ├── main.tsx        # Application entry point
│   └── vite-env.d.ts   # Vite type definitions
├── index.html          # HTML template
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration (root)
├── tsconfig.app.json   # TypeScript config for application code
├── tsconfig.node.json  # TypeScript config for build tools
├── vite.config.ts      # Vite configuration
└── eslint.config.js    # ESLint configuration

​
Key Directories

The main source code directory containing all your application code.Key files:
  • main.tsx - Application entry point that renders the root component
  • App.tsx - Main application component
  • index.css - Global styles applied to the entire application
  • App.css - Component-specific styles
  • vite-env.d.ts - TypeScript definitions for Vite features
Subdirectories:
  • assets/ - Images, fonts, and other static resources imported in your code
Static files served directly without processing. Files here are accessible at the root URL.Usage:
  • Favicon and app icons
  • robots.txt and sitemap.xml
  • Static assets that don’t need processing
Difference from src/assets/:
  • public/ files are copied as-is to the build output
  • src/assets/ files are processed by Vite (optimization, hash names, etc.)

​
Configuration Files

vite.config.ts

Vite build tool configuration with React and Tailwind plugins

tsconfig.json

TypeScript project references configuration

tsconfig.app.json

TypeScript compiler options for application code

eslint.config.js

Code linting rules and configuration

​
Vite Configuration

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react() , tailwindcss()],
})
The @vitejs/plugin-react-swc uses SWC instead of Babel for faster builds and Hot Module Replacement.

​
TypeScript Configuration

The project uses TypeScript project references with three config files:
Root configuration that references other configs:
tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

​
Entry Points

1

index.html

The HTML template that loads your React application:
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
2

src/main.tsx

Application entry point that renders React:
src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
3

src/App.tsx

Main application component (see Components for details)

​
Adding New Files

​
Creating Components

1

Create component file

Add new component files in src/ or organize them in src/components/:
src/
├── components/
│   ├── Button.tsx
│   ├── Header.tsx
│   └── Layout.tsx
└── App.tsx
2

Add corresponding styles (optional)

Create a CSS file with the same name:
src/components/
├── Button.tsx
├── Button.css
├── Header.tsx
└── Header.css
3

Import and use

import Button from './components/Button'
import './components/Button.css'

​
Adding Assets

For images and files imported in your code:
import logo from './assets/logo.png'

function App() {
  return <img src={logo} alt="Logo" />
}
Vite will optimize and hash these files.

​
Best Practices

Component Organization

  • Group related components in folders
  • Keep component and styles together
  • Use index files for cleaner imports

Asset Management

  • Use src/assets/ for imported resources
  • Use public/ for static files
  • Optimize images before adding

Type Safety

  • Define TypeScript interfaces in component files
  • Create shared types in src/types/
  • Use strict TypeScript settings

Code Quality

  • Follow ESLint recommendations
  • Use consistent naming conventions
  • Keep components focused and small
The project uses React 19 and TypeScript 5.8 with strict type checking enabled. This ensures type safety and catches errors early.

Build docs developers (and LLMs) love

Get started for freeTalk to us