dashboard/frontend

Feuerwehr Dashboard - Frontend

React + TypeScript + Vite frontend application for the fire department dashboard.

Tech Stack

• React 18.2 - UI library
• TypeScript 5.2 - Type safety
• Vite 5.0 - Build tool and dev server
• React Router DOM 6.20 - Client-side routing
• Material-UI 5.14 - Component library
• Axios - HTTP client
• Emotion - CSS-in-JS styling

Project Structure

frontend/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── auth/           # Authentication components
│   │   ├── dashboard/      # Dashboard-specific components
│   │   └── shared/         # Shared components
│   ├── contexts/           # React contexts for state management
│   ├── pages/              # Page components
│   │   ├── Login.tsx
│   │   ├── Dashboard.tsx
│   │   └── NotFound.tsx
│   ├── services/           # API service layer
│   ├── types/              # TypeScript type definitions
│   ├── utils/              # Utility functions
│   ├── App.tsx             # Root component with routing
│   ├── main.tsx            # Application entry point
│   └── vite-env.d.ts       # Vite environment types
├── index.html              # HTML template
├── vite.config.ts          # Vite configuration
├── tsconfig.json           # TypeScript configuration
├── tsconfig.node.json      # TypeScript config for Node
└── package.json            # Dependencies and scripts

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

npm install

Development

Start the development server:

npm run dev

The application will be available at http://localhost:5173

Build

Create a production build:

npm run build

The build output will be in the dist/ directory.

Preview

Preview the production build:

npm run preview

Environment Variables

Create a .env.development file for development:

VITE_API_URL=http://localhost:3000

For production, create a .env.production file with appropriate values.

Available Scripts

• npm run dev - Start development server
• npm run build - Create production build
• npm run preview - Preview production build locally
• npm run lint - Run ESLint (when configured)

Routing

The application uses React Router with the following routes:

• / - Login page (default)
• /login - Login page
• /dashboard - Dashboard (main application)
• /* - 404 Not Found page

Features

Current

• Basic routing structure
• Login page with Material-UI
• Dashboard placeholder
• 404 Not Found page
• Material-UI theming
• TypeScript type safety

Planned

• Authentication context and JWT handling
• Protected routes
• API integration
• Member management
• Vehicle tracking
• Equipment inventory
• Incident reporting
• And more...

Configuration

Vite Configuration

The vite.config.ts includes:

• React plugin
• Path alias (@/ → ./src/)
• Dev server on port 5173
• API proxy to backend (/api → http://localhost:3000)
• Source maps for production builds

TypeScript Configuration

Strict mode enabled with:

• ES2020 target
• Bundler module resolution
• Path mapping for @/ imports
• Strict type checking

Styling

Material-UI with custom theme:

• Primary color: Red (#d32f2f) - Fire department theme
• Secondary color: Blue (#1976d2)
• Light mode by default
• Emotion for CSS-in-JS

Development Notes

• All pages are currently placeholders
• Authentication is not yet implemented
• API integration pending
• Add actual business logic as backend becomes available