# matyqrr/vehicle-maintenance-log architecture

> Architecture diagram of the GitHub repository matyqrr/vehicle-maintenance-log, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/matyqrr/vehicle-maintenance-log
- Repository: https://github.com/matyqrr/vehicle-maintenance-log

## Overview

Vehicle Maintenance Log is a React client and Express/SQLite API for creating, listing, and deleting vehicle records. The main flow starts in the browser: App loads vehicles, renders the form and list, and coordinates refresh and deletion; form submissions and App requests call the REST API, which delegates persistence to the vehicle repository and SQLite. Maintenance-history tracking and cost/service intervals are planned, not implemented. Relationships are limited to calls, rendering, and data flow shown in excerpts or documented in the README.

Main entry points: [`frontend/src/App.tsx`](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/App.tsx) (App coordinator), [`frontend/src/components/VehicleList.tsx`](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/components/VehicleList.tsx) (Vehicle list), [`frontend/src/components/VehicleForm.tsx`](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/components/VehicleForm.tsx) (Vehicle form), [`backend/src/data/vehicleRepository.ts`](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/data/vehicleRepository.ts) (Vehicle repository)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vehicle client"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_form["Vehicle form<br/>[VehicleForm.tsx]"]
  node_list["Vehicle list<br/>[VehicleList.tsx]"]
  node_clienttype["Vehicle type<br/>[vehicle.ts]"]
end

subgraph group_api["REST API"]
  node_server["Express API<br/>[server.ts]"]
end

subgraph group_storage["Vehicle storage"]
  node_repository["Vehicle repository"]
  node_model["Vehicle model<br/>[vehicle.ts]"]
  node_database[("SQLite database<br/>[db.ts]")]
end

node_driver(("User"))

node_driver -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_form
node_app -->|"renders"| node_list
node_app -->|"loads and deletes"| node_server
node_form -->|"submits vehicle"| node_server
node_form -->|"requests refresh"| node_app
node_app -->|"passes vehicles"| node_list
node_list -->|"dispatches deletion"| node_app
node_list -->|"uses type"| node_clienttype
node_app -->|"uses type"| node_clienttype
node_server -->|"calls CRUD"| node_repository
node_repository -->|"queries and writes"| node_database
node_repository -->|"uses types"| node_model

click node_entry "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/main.tsx"
click node_app "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/App.tsx"
click node_form "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/components/VehicleForm.tsx"
click node_list "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/components/VehicleList.tsx"
click node_clienttype "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/types/vehicle.ts"
click node_server "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/api/server.ts"
click node_repository "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/data/vehicleRepository.ts"
click node_model "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/models/vehicle.ts"
click node_database "https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/data/db.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_form,node_list,node_clienttype,node_driver toneBlue
class node_server toneAmber
class node_repository,node_model,node_database toneMint
```

## Components

### Vehicle client

- [React entry](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/main.tsx): `frontend/src/main.tsx`
- [App coordinator](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Vehicle form](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/components/VehicleForm.tsx): `frontend/src/components/VehicleForm.tsx`
- [Vehicle list](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/components/VehicleList.tsx): `frontend/src/components/VehicleList.tsx`
- [Vehicle type](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/frontend/src/types/vehicle.ts): `frontend/src/types/vehicle.ts`

### REST API

- [Express API](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/api/server.ts): `backend/src/api/server.ts`

### Vehicle storage

- [Vehicle repository](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/data/vehicleRepository.ts): `backend/src/data/vehicleRepository.ts`
- [Vehicle model](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/models/vehicle.ts): `backend/src/models/vehicle.ts`
- [SQLite database](https://github.com/matyqrr/vehicle-maintenance-log/blob/main/backend/src/data/db.ts): `backend/src/data/db.ts`

### Other components

- **User**

## Connections

- User → React entry: opens app (evidence: `README.md`)
- React entry → App coordinator: renders (evidence: `frontend/src/main.tsx`)
- App coordinator → Vehicle form: renders (evidence: `frontend/src/App.tsx`)
- App coordinator → Vehicle list: renders (evidence: `frontend/src/App.tsx`)
- App coordinator → Express API: loads and deletes (evidence: `frontend/src/App.tsx`)
- Vehicle form → Express API: submits vehicle (evidence: `frontend/src/components/VehicleForm.tsx`)
- Vehicle form → App coordinator: requests refresh (evidence: `frontend/src/components/VehicleForm.tsx`)
- App coordinator → Vehicle list: passes vehicles (evidence: `frontend/src/App.tsx`)
- Vehicle list → App coordinator: dispatches deletion (evidence: `frontend/src/components/VehicleList.tsx`)
- Vehicle list → Vehicle type: uses type (evidence: `frontend/src/components/VehicleList.tsx`)
- App coordinator → Vehicle type: uses type (evidence: `frontend/src/App.tsx`)
- Express API → Vehicle repository: calls CRUD (evidence: `backend/src/api/server.ts`)
- Vehicle repository → SQLite database: queries and writes (evidence: `backend/src/data/vehicleRepository.ts`)
- Vehicle repository → Vehicle model: uses types (evidence: `backend/src/data/vehicleRepository.ts`)