# milkert/mern-boilerplate architecture

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

- Interactive diagram: https://gitdiagram.com/milkert/mern-boilerplate
- Repository: https://github.com/milkert/mern-boilerplate

## Overview

This MERN boilerplate provides public and protected React routes, with user signup, login, Google sign-in, session checks, and logout as its main workflow. The browser sends authentication requests to the Express API; the API verifies credentials or Google identity, manages JWT cookies, and reads or writes user records in MongoDB. The graph also shows route protection and the shared auth state that drives the UI. The README documents these capabilities; unsampled frontend pages and API configuration are represented only where their paths are present in the tree.

Main entry points: [`backend/app.ts`](https://github.com/milkert/mern-boilerplate/blob/main/backend/app.ts) (Express app), [`frontend/src/components/routes/AppRoutes.tsx`](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/routes/AppRoutes.tsx) (App routes), [`backend/routes/userApi.ts`](https://github.com/milkert/mern-boilerplate/blob/main/backend/routes/userApi.ts) (User auth API), [`frontend/src/main.tsx`](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web client"]
  node_app["React entry<br/>[main.tsx]"]
  node_routes["App routes<br/>[AppRoutes.tsx]"]
  node_authstate["Auth context<br/>[AuthContext.tsx]"]
  node_signup["Signup form<br/>[SignupForm.tsx]"]
  node_login["Login form<br/>[LoginForm.tsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
end

subgraph group_backend["API and auth"]
  node_api["Express app<br/>[app.ts]"]
  node_authroutes["User auth API<br/>[userApi.ts]"]
  node_limits["Rate limits<br/>[ratelimit.ts]"]
end

subgraph group_storage["User persistence"]
  node_users["User model<br/>[userModel.ts]"]
end

node_visitor(("Visitor"))
node_mongodb[("MongoDB")]
node_google["Google identity"]

node_visitor -->|"opens app"| node_app
node_app -->|"renders"| node_routes
node_routes -->|"routes signup"| node_signup
node_routes -->|"routes login"| node_login
node_routes -->|"protects route"| node_dashboard
node_app -->|"provides auth"| node_authstate
node_authstate -->|"checks session"| node_api
node_signup -->|"posts signup"| node_api
node_login -->|"posts login"| node_api
node_navbar -->|"posts logout"| node_api
node_navbar -->|"clears user"| node_authstate
node_api -->|"mounts API"| node_authroutes
node_authroutes -->|"applies limits"| node_limits
node_authroutes -->|"reads or writes"| node_users
node_api -->|"connects"| node_mongodb
node_users -->|"persists users"| node_mongodb
node_authroutes -.->|"verifies identity"| node_google

click node_app "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/main.tsx"
click node_routes "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/routes/AppRoutes.tsx"
click node_authstate "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/context/AuthContext.tsx"
click node_signup "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/forms/SignupForm.tsx"
click node_login "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/forms/LoginForm.tsx"
click node_dashboard "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/pages/Dashboard.tsx"
click node_navbar "https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/nav/Navbar.tsx"
click node_api "https://github.com/milkert/mern-boilerplate/blob/main/backend/app.ts"
click node_authroutes "https://github.com/milkert/mern-boilerplate/blob/main/backend/routes/userApi.ts"
click node_limits "https://github.com/milkert/mern-boilerplate/blob/main/backend/middleware/ratelimit.ts"
click node_users "https://github.com/milkert/mern-boilerplate/blob/main/backend/models/userModel.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_app,node_routes,node_authstate,node_signup,node_login,node_dashboard,node_navbar toneBlue
class node_api,node_authroutes,node_limits,node_mongodb toneAmber
class node_users toneMint
class node_visitor,node_google toneIndigo
```

## Components

### Web client

- [React entry](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/main.tsx): `frontend/src/main.tsx`
- [App routes](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/routes/AppRoutes.tsx): `frontend/src/components/routes/AppRoutes.tsx`
- [Auth context](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/context/AuthContext.tsx): `frontend/src/context/AuthContext.tsx`
- [Signup form](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/forms/SignupForm.tsx): `frontend/src/components/forms/SignupForm.tsx`
- [Login form](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/forms/LoginForm.tsx): `frontend/src/components/forms/LoginForm.tsx`
- [Dashboard](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/pages/Dashboard.tsx): `frontend/src/pages/Dashboard.tsx`
- [Navigation](https://github.com/milkert/mern-boilerplate/blob/main/frontend/src/components/nav/Navbar.tsx): `frontend/src/components/nav/Navbar.tsx`

### API and auth

- [Express app](https://github.com/milkert/mern-boilerplate/blob/main/backend/app.ts): `backend/app.ts`
- [User auth API](https://github.com/milkert/mern-boilerplate/blob/main/backend/routes/userApi.ts): `backend/routes/userApi.ts`
- [Rate limits](https://github.com/milkert/mern-boilerplate/blob/main/backend/middleware/ratelimit.ts): `backend/middleware/ratelimit.ts`

### User persistence

- [User model](https://github.com/milkert/mern-boilerplate/blob/main/backend/models/userModel.ts): `backend/models/userModel.ts`

### Other components

- **Visitor**
- **MongoDB**
- **Google identity**

## Connections

- Visitor → React entry: opens app
- React entry → App routes: renders
- App routes → Signup form: routes signup
- App routes → Login form: routes login
- App routes → Dashboard: protects route
- React entry → Auth context: provides auth
- Auth context → Express app: checks session
- Signup form → Express app: posts signup
- Login form → Express app: posts login
- Navigation → Express app: posts logout
- Navigation → Auth context: clears user
- Express app → User auth API: mounts API
- User auth API → Rate limits: applies limits
- User auth API → User model: reads or writes
- Express app → MongoDB: connects
- User model → MongoDB: persists users
- User auth API → Google identity: verifies identity