# sagun-basnet/contactapp architecture

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

- Interactive diagram: https://gitdiagram.com/sagun-basnet/contactapp
- Repository: https://github.com/sagun-basnet/contactapp

## Overview

This repository combines a ContactHub-branded React frontend with an Express API for account authentication and contact CRUD. The evidenced account workflow is browser-side login/logout through the API helper, routed to authentication handlers that query MySQL; registration and password recovery also send OTP email. The frontend excerpt is primarily a marketing landing page, not the contact-management interface. Route mounting is visible, but the post-route/controller wiring and protected-route usage are not sampled, so those connections are left out.

Main entry points: [`api/index.js`](https://github.com/sagun-basnet/contactapp/blob/main/api/index.js) (Express server), [`api/controller/auth.js`](https://github.com/sagun-basnet/contactapp/blob/main/api/controller/auth.js) (Auth handlers), [`api/db/db.js`](https://github.com/sagun-basnet/contactapp/blob/main/api/db/db.js) (MySQL connection), [`frontend/src/main.jsx`](https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_main["React entry<br/>[main.jsx]"]
  node_app["ContactHub landing<br/>[App.jsx]"]
  node_auth_context["Auth context<br/>[authContext.jsx]"]
  node_api_client["HTTP client<br/>[api.jsx]"]
end

subgraph group_api["API runtime"]
  node_server["Express server<br/>[index.js]"]
  node_db_config["MySQL connection<br/>[db.js]"]
end

subgraph group_identity["Identity"]
  node_auth_routes["Auth routes<br/>[authRoute.js]"]
  node_auth_controller["Auth handlers<br/>[auth.js]"]
  node_auth_middleware["JWT role checks<br/>[isAuth.js]"]
  node_mail["OTP mailer<br/>[mail.js]"]
end

subgraph group_contacts["Contacts"]
  node_post_routes["Contact routes<br/>[postRoute.js]"]
  node_post_controller["Contact handlers<br/>[post.js]"]
end

node_browser(("Browser user"))
node_mailer_service["Email service"]
node_mysql[("Contactapp database")]

node_browser -->|"opens"| node_main
node_main -->|"renders"| node_app
node_auth_context -->|"calls"| node_api_client
node_api_client -->|"HTTP requests"| node_server
node_server -->|"mounts"| node_auth_routes
node_server -->|"mounts"| node_post_routes
node_auth_routes -->|"dispatches"| node_auth_controller
node_auth_controller -->|"queries"| node_db_config
node_auth_controller -->|"sends OTP"| node_mail
node_mail -->|"sends email"| node_mailer_service
node_db_config -->|"connects"| node_mysql
node_post_controller -->|"queries"| node_db_config

click node_main "https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/main.jsx"
click node_app "https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/App.jsx"
click node_auth_context "https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/context/authContext.jsx"
click node_api_client "https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/utils/api.jsx"
click node_server "https://github.com/sagun-basnet/contactapp/blob/main/api/index.js"
click node_auth_routes "https://github.com/sagun-basnet/contactapp/blob/main/api/routes/authRoute.js"
click node_auth_controller "https://github.com/sagun-basnet/contactapp/blob/main/api/controller/auth.js"
click node_auth_middleware "https://github.com/sagun-basnet/contactapp/blob/main/api/middleware/isAuth.js"
click node_mail "https://github.com/sagun-basnet/contactapp/blob/main/api/utils/mail.js"
click node_db_config "https://github.com/sagun-basnet/contactapp/blob/main/api/db/db.js"
click node_post_routes "https://github.com/sagun-basnet/contactapp/blob/main/api/routes/postRoute.js"
click node_post_controller "https://github.com/sagun-basnet/contactapp/blob/main/api/controller/post.js"

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_main,node_app,node_auth_context,node_api_client,node_browser toneBlue
class node_server,node_db_config,node_mysql toneAmber
class node_auth_routes,node_auth_controller,node_auth_middleware,node_mail toneMint
class node_post_routes,node_post_controller toneRose
class node_mailer_service toneIndigo
```

## Components

### Frontend

- [React entry](https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [ContactHub landing](https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth context](https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/context/authContext.jsx): `frontend/src/context/authContext.jsx`
- [HTTP client](https://github.com/sagun-basnet/contactapp/blob/main/frontend/src/utils/api.jsx): `frontend/src/utils/api.jsx`

### API runtime

- [Express server](https://github.com/sagun-basnet/contactapp/blob/main/api/index.js): `api/index.js`
- [MySQL connection](https://github.com/sagun-basnet/contactapp/blob/main/api/db/db.js): `api/db/db.js`

### Identity

- [Auth routes](https://github.com/sagun-basnet/contactapp/blob/main/api/routes/authRoute.js): `api/routes/authRoute.js`
- [Auth handlers](https://github.com/sagun-basnet/contactapp/blob/main/api/controller/auth.js): `api/controller/auth.js`
- [JWT role checks](https://github.com/sagun-basnet/contactapp/blob/main/api/middleware/isAuth.js): `api/middleware/isAuth.js`
- [OTP mailer](https://github.com/sagun-basnet/contactapp/blob/main/api/utils/mail.js): `api/utils/mail.js`

### Contacts

- [Contact routes](https://github.com/sagun-basnet/contactapp/blob/main/api/routes/postRoute.js): `api/routes/postRoute.js`
- [Contact handlers](https://github.com/sagun-basnet/contactapp/blob/main/api/controller/post.js): `api/controller/post.js`

### Other components

- **Browser user**
- **Email service**
- **Contactapp database**

## Connections

- Browser user → React entry: opens
- React entry → ContactHub landing: renders
- Auth context → HTTP client: calls
- HTTP client → Express server: HTTP requests
- Express server → Auth routes: mounts
- Express server → Contact routes: mounts
- Auth routes → Auth handlers: dispatches
- Auth handlers → MySQL connection: queries
- Auth handlers → OTP mailer: sends OTP
- OTP mailer → Email service: sends email
- MySQL connection → Contactapp database: connects
- Contact handlers → MySQL connection: queries