# skakke/react_calendar architecture

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

- Interactive diagram: https://gitdiagram.com/skakke/react_calendar
- Repository: https://github.com/skakke/react_calendar

## Overview

This is a calendar web app with token-based sign-in: users open the calendar or sign in, after which protected routes become available. The calendar currently renders a hard-coded meeting; no calendar-event API or persistence is shown. Authentication uses a React client and FastAPI endpoints backed by SQL Server. The sampled backend entry point contains register, login, and current-user endpoints; the separate auth router’s wiring is unclear, so it is omitted.

Main entry points: [`backend/app/main.py`](https://github.com/skakke/react_calendar/blob/master/backend/app/main.py) (FastAPI endpoints), [`frontend/src/App.tsx`](https://github.com/skakke/react_calendar/blob/master/frontend/src/App.tsx) (Routes and shell), [`frontend/src/auth/AuthContext.tsx`](https://github.com/skakke/react_calendar/blob/master/frontend/src/auth/AuthContext.tsx) (Auth state), [`frontend/src/api/auth.ts`](https://github.com/skakke/react_calendar/blob/master/frontend/src/api/auth.ts) (Auth API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_bootstrap["Client bootstrap<br/>[main.tsx]"]
  node_app["Routes and shell<br/>[App.tsx]"]
  node_navbar["Navigation bar<br/>[NavBar.tsx]"]
  node_calendar["Calendar view"]
end

subgraph group_identity["Authentication"]
  node_login["Login form<br/>[Login.tsx]"]
  node_authcontext["Auth state<br/>[AuthContext.tsx]"]
  node_guard["Route guard<br/>[RequireAuth.tsx]"]
  node_authapi["Auth API client<br/>[auth.ts]"]
end

subgraph group_server["Backend API"]
  node_api["FastAPI endpoints<br/>[main.py]"]
  node_deps["Auth dependencies<br/>[deps.py]"]
  node_security["Token and passwords<br/>[security.py]"]
  node_schemas["Request responses<br/>[schemas.py]"]
end

subgraph group_storage["Persistence"]
  node_models["User model<br/>[models.py]"]
  node_database["DB sessions<br/>[database.py]"]
end

node_user(("User"))
node_sqlserver[("SQL Server")]

node_user -->|"opens app"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_login
node_app -->|"protects routes"| node_guard
node_app -->|"routes to"| node_calendar
node_navbar -->|"reads auth state"| node_authcontext
node_navbar -->|"clears token"| node_authapi
node_guard -->|"reads auth state"| node_authcontext
node_login -->|"submits credentials"| node_authapi
node_login -->|"sets user"| node_authcontext
node_authcontext -->|"fetches identity"| node_authapi
node_authapi -->|"HTTP auth requests"| node_api
node_api -->|"uses sessions"| node_database
node_api -->|"queries users"| node_models
node_api -->|"hashes and tokens"| node_security
node_api -->|"validates responses"| node_schemas
node_api -->|"requires current user"| node_deps
node_database -->|"connects"| node_sqlserver

click node_bootstrap "https://github.com/skakke/react_calendar/blob/master/frontend/src/main.tsx"
click node_app "https://github.com/skakke/react_calendar/blob/master/frontend/src/App.tsx"
click node_navbar "https://github.com/skakke/react_calendar/blob/master/frontend/src/components/NavBar.tsx"
click node_calendar "https://github.com/skakke/react_calendar/blob/master/frontend/src/pages/FullCalendarPage.tsx"
click node_login "https://github.com/skakke/react_calendar/blob/master/frontend/src/pages/Login.tsx"
click node_authcontext "https://github.com/skakke/react_calendar/blob/master/frontend/src/auth/AuthContext.tsx"
click node_guard "https://github.com/skakke/react_calendar/blob/master/frontend/src/auth/RequireAuth.tsx"
click node_authapi "https://github.com/skakke/react_calendar/blob/master/frontend/src/api/auth.ts"
click node_api "https://github.com/skakke/react_calendar/blob/master/backend/app/main.py"
click node_deps "https://github.com/skakke/react_calendar/blob/master/backend/app/deps.py"
click node_security "https://github.com/skakke/react_calendar/blob/master/backend/app/security.py"
click node_schemas "https://github.com/skakke/react_calendar/blob/master/backend/app/schemas.py"
click node_models "https://github.com/skakke/react_calendar/blob/master/backend/app/models.py"
click node_database "https://github.com/skakke/react_calendar/blob/master/backend/app/database.py"

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_bootstrap,node_app,node_navbar,node_calendar,node_user toneBlue
class node_login,node_authcontext,node_guard,node_authapi,node_sqlserver toneAmber
class node_api,node_deps,node_security,node_schemas toneMint
class node_models,node_database toneRose
```

## Components

### Web client

- [Client bootstrap](https://github.com/skakke/react_calendar/blob/master/frontend/src/main.tsx): `frontend/src/main.tsx`
- [Routes and shell](https://github.com/skakke/react_calendar/blob/master/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Navigation bar](https://github.com/skakke/react_calendar/blob/master/frontend/src/components/NavBar.tsx): `frontend/src/components/NavBar.tsx`
- [Calendar view](https://github.com/skakke/react_calendar/blob/master/frontend/src/pages/FullCalendarPage.tsx): `frontend/src/pages/FullCalendarPage.tsx`

### Authentication

- [Login form](https://github.com/skakke/react_calendar/blob/master/frontend/src/pages/Login.tsx): `frontend/src/pages/Login.tsx`
- [Auth state](https://github.com/skakke/react_calendar/blob/master/frontend/src/auth/AuthContext.tsx): `frontend/src/auth/AuthContext.tsx`
- [Route guard](https://github.com/skakke/react_calendar/blob/master/frontend/src/auth/RequireAuth.tsx): `frontend/src/auth/RequireAuth.tsx`
- [Auth API client](https://github.com/skakke/react_calendar/blob/master/frontend/src/api/auth.ts): `frontend/src/api/auth.ts`

### Backend API

- [FastAPI endpoints](https://github.com/skakke/react_calendar/blob/master/backend/app/main.py): `backend/app/main.py`
- [Auth dependencies](https://github.com/skakke/react_calendar/blob/master/backend/app/deps.py): `backend/app/deps.py`
- [Token and passwords](https://github.com/skakke/react_calendar/blob/master/backend/app/security.py): `backend/app/security.py`
- [Request responses](https://github.com/skakke/react_calendar/blob/master/backend/app/schemas.py): `backend/app/schemas.py`

### Persistence

- [User model](https://github.com/skakke/react_calendar/blob/master/backend/app/models.py): `backend/app/models.py`
- [DB sessions](https://github.com/skakke/react_calendar/blob/master/backend/app/database.py): `backend/app/database.py`

### Other components

- **User**
- **SQL Server**

## Connections

- User → Client bootstrap: opens app
- Client bootstrap → Routes and shell: renders
- Routes and shell → Navigation bar: renders
- Routes and shell → Login form: routes to
- Routes and shell → Route guard: protects routes
- Routes and shell → Calendar view: routes to
- Navigation bar → Auth state: reads auth state
- Navigation bar → Auth API client: clears token
- Route guard → Auth state: reads auth state
- Login form → Auth API client: submits credentials
- Login form → Auth state: sets user
- Auth state → Auth API client: fetches identity
- Auth API client → FastAPI endpoints: HTTP auth requests
- FastAPI endpoints → DB sessions: uses sessions
- FastAPI endpoints → User model: queries users
- FastAPI endpoints → Token and passwords: hashes and tokens
- FastAPI endpoints → Request responses: validates responses
- FastAPI endpoints → Auth dependencies: requires current user
- DB sessions → SQL Server: connects