# sifatahammed/van-life architecture

> Architecture diagram of the GitHub repository sifatahammed/van-life, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sifatahammed/van-life
- Repository: https://github.com/sifatahammed/van-life

## Overview

VanLife is a React single-page van-rental demo. Visitors browse and filter vans, then open deferred detail views; hosts sign in to reach a protected dashboard and van-management views. The route tree in src/main.jsx mounts these experiences, while route loaders use shared data helpers. Authentication persists in localStorage and is synchronized across tabs. The README also describes revenue and review summaries. Source excerpts do not include the data-helper or Mirage implementation, so their internal behavior and backend wiring are represented only where the README or sampled callers support them.

Main entry points: [`src/main.jsx`](https://github.com/sifatahammed/van-life/blob/main/src/main.jsx) (Router and app), [`src/components/loader.jsx`](https://github.com/sifatahammed/van-life/blob/main/src/components/loader.jsx) (Data helpers), [`src/pages/host/Dashboard.jsx`](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Dashboard.jsx) (Host dashboard), [`src/components/HostVanLayout.jsx`](https://github.com/sifatahammed/van-life/blob/main/src/components/HostVanLayout.jsx) (Van editor layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App routing"]
  node_app["Router and app<br/>[main.jsx]"]
  node_layout["Page layout<br/>[layout.jsx]"]
end

subgraph group_rental["Rental discovery"]
  node_home["Home and about<br/>[Home.jsx]"]
  node_vans["Van listings<br/>[Vans.jsx]"]
  node_van_detail["Van details<br/>[Van-Detail.jsx]"]
end

subgraph group_identity["Authentication"]
  node_login["Login form<br/>[Login.jsx]"]
  node_auth_guard["Route guard<br/>[Auth.jsx]"]
  node_auth_context["Auth state<br/>[AuthContext.jsx]"]
  node_local_storage[("Browser storage")]
end

subgraph group_hosting["Host console"]
  node_host_layout["Host layout<br/>[hostlayout.jsx]"]
  node_dashboard["Host dashboard<br/>[Dashboard.jsx]"]
  node_host_vans["Managed vans<br/>[VansList.jsx]"]
  node_host_van_layout["Van editor layout<br/>[HostVanLayout.jsx]"]
  node_host_details["Van details edit<br/>[Details.jsx]"]
  node_host_price["Van pricing<br/>[price.jsx]"]
  node_host_photo["Van photos<br/>[Photo.jsx]"]
  node_income["Revenue summary<br/>[income.jsx]"]
  node_reviews["Review summary<br/>[reviews.jsx]"]
end

subgraph group_data["Data access"]
  node_loader["Data helpers<br/>[loader.jsx]"]
  node_mock_api["Mock API<br/>[server.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"mounts routes"| node_layout
node_layout -->|"renders route"| node_home
node_app -->|"routes to"| node_vans
node_app -->|"routes to"| node_van_detail
node_vans -->|"loads vans"| node_loader
node_van_detail -->|"loads van"| node_loader
node_loader -.->|"requests data"| node_mock_api
node_app -->|"routes to"| node_login
node_login -->|"authenticates via"| node_loader
node_login -->|"writes login"| node_local_storage
node_auth_context -->|"reads and writes"| node_local_storage
node_auth_context -->|"provides auth state"| node_login
node_app -->|"protects host routes"| node_auth_guard
node_auth_guard -->|"checks login"| node_local_storage
node_app -->|"routes to"| node_host_layout
node_app -->|"routes to"| node_dashboard
node_dashboard -->|"checks access"| node_auth_guard
node_dashboard -->|"loads host vans"| node_loader
node_dashboard -->|"links to"| node_income
node_dashboard -->|"links to"| node_reviews
node_dashboard -->|"links to"| node_host_vans
node_app -->|"routes to"| node_host_vans
node_host_vans -->|"loads host vans"| node_loader
node_app -->|"routes to"| node_host_van_layout
node_host_van_layout -->|"checks access"| node_auth_guard
node_host_van_layout -->|"loads host van"| node_loader
node_host_van_layout -->|"renders child route"| node_host_details
node_host_van_layout -->|"renders child route"| node_host_price
node_host_van_layout -->|"renders child route"| node_host_photo

click node_app "https://github.com/sifatahammed/van-life/blob/main/src/main.jsx"
click node_layout "https://github.com/sifatahammed/van-life/blob/main/src/components/layout.jsx"
click node_home "https://github.com/sifatahammed/van-life/blob/main/src/pages/Home.jsx"
click node_vans "https://github.com/sifatahammed/van-life/blob/main/src/pages/Vans.jsx"
click node_van_detail "https://github.com/sifatahammed/van-life/blob/main/src/pages/Van-Detail.jsx"
click node_loader "https://github.com/sifatahammed/van-life/blob/main/src/components/loader.jsx"
click node_mock_api "https://github.com/sifatahammed/van-life/blob/main/src/assets/server.js"
click node_login "https://github.com/sifatahammed/van-life/blob/main/src/pages/Login.jsx"
click node_auth_guard "https://github.com/sifatahammed/van-life/blob/main/src/components/Auth.jsx"
click node_auth_context "https://github.com/sifatahammed/van-life/blob/main/src/components/AuthContext.jsx"
click node_host_layout "https://github.com/sifatahammed/van-life/blob/main/src/components/hostlayout.jsx"
click node_dashboard "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Dashboard.jsx"
click node_host_vans "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/VansList.jsx"
click node_host_van_layout "https://github.com/sifatahammed/van-life/blob/main/src/components/HostVanLayout.jsx"
click node_host_details "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Details.jsx"
click node_host_price "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/price.jsx"
click node_host_photo "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Photo.jsx"
click node_income "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/income.jsx"
click node_reviews "https://github.com/sifatahammed/van-life/blob/main/src/pages/host/reviews.jsx"

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_app,node_layout toneBlue
class node_home,node_vans,node_van_detail toneAmber
class node_login,node_auth_guard,node_auth_context,node_local_storage toneMint
class node_host_layout,node_dashboard,node_host_vans,node_host_van_layout,node_host_details,node_host_price,node_host_photo,node_income,node_reviews toneRose
class node_loader,node_mock_api,node_visitor toneIndigo
```

## Components

### App routing

- [Router and app](https://github.com/sifatahammed/van-life/blob/main/src/main.jsx): `src/main.jsx`
- [Page layout](https://github.com/sifatahammed/van-life/blob/main/src/components/layout.jsx): `src/components/layout.jsx`

### Rental discovery

- [Home and about](https://github.com/sifatahammed/van-life/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Van listings](https://github.com/sifatahammed/van-life/blob/main/src/pages/Vans.jsx): `src/pages/Vans.jsx`
- [Van details](https://github.com/sifatahammed/van-life/blob/main/src/pages/Van-Detail.jsx): `src/pages/Van-Detail.jsx`

### Authentication

- [Login form](https://github.com/sifatahammed/van-life/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Route guard](https://github.com/sifatahammed/van-life/blob/main/src/components/Auth.jsx): `src/components/Auth.jsx`
- [Auth state](https://github.com/sifatahammed/van-life/blob/main/src/components/AuthContext.jsx): `src/components/AuthContext.jsx`
- **Browser storage**

### Host console

- [Host layout](https://github.com/sifatahammed/van-life/blob/main/src/components/hostlayout.jsx): `src/components/hostlayout.jsx`
- [Host dashboard](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Dashboard.jsx): `src/pages/host/Dashboard.jsx`
- [Managed vans](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/VansList.jsx): `src/pages/host/VansList.jsx`
- [Van editor layout](https://github.com/sifatahammed/van-life/blob/main/src/components/HostVanLayout.jsx): `src/components/HostVanLayout.jsx`
- [Van details edit](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Details.jsx): `src/pages/host/Details.jsx`
- [Van pricing](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/price.jsx): `src/pages/host/price.jsx`
- [Van photos](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/Photo.jsx): `src/pages/host/Photo.jsx`
- [Revenue summary](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/income.jsx): `src/pages/host/income.jsx`
- [Review summary](https://github.com/sifatahammed/van-life/blob/main/src/pages/host/reviews.jsx): `src/pages/host/reviews.jsx`

### Data access

- [Data helpers](https://github.com/sifatahammed/van-life/blob/main/src/components/loader.jsx): `src/components/loader.jsx`
- [Mock API](https://github.com/sifatahammed/van-life/blob/main/src/assets/server.js): `src/assets/server.js`

### Other components

- **Visitor**

## Connections

- Visitor → Router and app: opens
- Router and app → Page layout: mounts routes
- Page layout → Home and about: renders route
- Router and app → Van listings: routes to
- Router and app → Van details: routes to
- Van listings → Data helpers: loads vans
- Van details → Data helpers: loads van
- Data helpers → Mock API: requests data
- Router and app → Login form: routes to
- Login form → Data helpers: authenticates via
- Login form → Browser storage: writes login
- Auth state → Browser storage: reads and writes
- Auth state → Login form: provides auth state
- Router and app → Route guard: protects host routes
- Route guard → Browser storage: checks login
- Router and app → Host layout: routes to
- Router and app → Host dashboard: routes to
- Host dashboard → Route guard: checks access
- Host dashboard → Data helpers: loads host vans
- Host dashboard → Revenue summary: links to
- Host dashboard → Review summary: links to
- Host dashboard → Managed vans: links to
- Router and app → Managed vans: routes to
- Managed vans → Data helpers: loads host vans
- Router and app → Van editor layout: routes to
- Van editor layout → Route guard: checks access
- Van editor layout → Data helpers: loads host van
- Van editor layout → Van details edit: renders child route
- Van editor layout → Van pricing: renders child route
- Van editor layout → Van photos: renders child route