166 lines
3.7 KiB
Markdown
166 lines
3.7 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Development
|
|
|
|
Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The application will be available at `http://localhost:5173`
|
|
|
|
### Build
|
|
|
|
Create a production build:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
The build output will be in the `dist/` directory.
|
|
|
|
### Preview
|
|
|
|
Preview the production build:
|
|
|
|
```bash
|
|
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
|