# shivaay100/real_time_tracker architecture

> Architecture diagram of the GitHub repository shivaay100/real_time_tracker, 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/shivaay100/real_time_tracker
- Repository: https://github.com/shivaay100/real_time_tracker

## Overview

LiveRoute is an authenticated, real-time location-sharing web app with an interactive map and chat. The main workflow is: users register or log in, the browser collects GPS coordinates, the server records and broadcasts updates, and connected browsers show users on a map. The server also tracks online presence, serves user and history APIs, and handles chat. The README describes historical trails and messaging; source confirms history storage/API and direct-message storage, while the sampled client currently broadcasts chat and does not render fetched history. Arrows reflect the sampled app and client code; unsampled view details are not inferred.

Main entry points: [`app.js`](https://github.com/shivaay100/real_time_tracker/blob/main/app.js) (Express and Socket.IO), [`public/js/script.js`](https://github.com/shivaay100/real_time_tracker/blob/main/public/js/script.js) (Tracking client), [`views/index.ejs`](https://github.com/shivaay100/real_time_tracker/blob/main/views/index.ejs) (Map dashboard), [`models/User.js`](https://github.com/shivaay100/real_time_tracker/blob/main/models/User.js) (User model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and sessions"]
  node_app["Express and Socket.IO<br/>[app.js]"]
  node_auth["Auth guards<br/>[auth.js]"]
  node_login["Login view<br/>[login.ejs]"]
  node_register["Registration view<br/>[register.ejs]"]
end

subgraph group_realtime["Live collaboration"]
end

subgraph group_persistence["Persistence"]
  node_user_model["User model<br/>[User.js]"]
  node_db_config["DB connection<br/>[database.js]"]
  node_history_model["Location history model<br/>[LocationHistory.js]"]
  node_message_model["Message model<br/>[Message.js]"]
end

subgraph group_interface["Browser interface"]
  node_client["Tracking client<br/>[script.js]"]
  node_dashboard["Map dashboard<br/>[index.ejs]"]
  node_login_page["Login page<br/>[login.ejs]"]
  node_register_page["Register page<br/>[register.ejs]"]
  node_style["Interface styling<br/>[style.css]"]
  node_animations["UI effects<br/>[animations.js]"]
end

node_person(("User"))
node_mongo[("MongoDB")]
node_gps["Browser geolocation"]
node_tiles["OpenStreetMap tiles"]

node_person -->|"opens"| node_login_page
node_person -->|"opens"| node_register_page
node_person -->|"uses"| node_dashboard
node_app -->|"checks access"| node_auth
node_app -->|"renders"| node_login_page
node_app -->|"renders"| node_register_page
node_app -->|"renders"| node_dashboard
node_app -->|"queries and saves"| node_user_model
node_app -->|"stores and queries"| node_history_model
node_app -->|"stores direct messages"| node_message_model
node_app -->|"connects through"| node_db_config
node_db_config -->|"connects"| node_mongo
node_user_model -->|"persists users"| node_mongo
node_history_model -->|"persists locations"| node_mongo
node_message_model -->|"persists messages"| node_mongo
node_person -->|"operates"| node_client
node_dashboard -->|"loads"| node_client
node_client -->|"watches position"| node_gps
node_client -->|"sends locations and chat"| node_app
node_app -->|"broadcasts updates"| node_client
node_client -->|"requests users and history"| node_app
node_client -->|"loads map tiles"| node_tiles
node_dashboard -->|"uses"| node_style
node_client -->|"uses effects"| node_animations

click node_app "https://github.com/shivaay100/real_time_tracker/blob/main/app.js"
click node_auth "https://github.com/shivaay100/real_time_tracker/blob/main/middleware/auth.js"
click node_login "https://github.com/shivaay100/real_time_tracker/blob/main/views/login.ejs"
click node_register "https://github.com/shivaay100/real_time_tracker/blob/main/views/register.ejs"
click node_user_model "https://github.com/shivaay100/real_time_tracker/blob/main/models/User.js"
click node_db_config "https://github.com/shivaay100/real_time_tracker/blob/main/config/database.js"
click node_history_model "https://github.com/shivaay100/real_time_tracker/blob/main/models/LocationHistory.js"
click node_message_model "https://github.com/shivaay100/real_time_tracker/blob/main/models/Message.js"
click node_client "https://github.com/shivaay100/real_time_tracker/blob/main/public/js/script.js"
click node_dashboard "https://github.com/shivaay100/real_time_tracker/blob/main/views/index.ejs"
click node_login_page "https://github.com/shivaay100/real_time_tracker/blob/main/views/login.ejs"
click node_register_page "https://github.com/shivaay100/real_time_tracker/blob/main/views/register.ejs"
click node_style "https://github.com/shivaay100/real_time_tracker/blob/main/public/css/style.css"
click node_animations "https://github.com/shivaay100/real_time_tracker/blob/main/public/js/animations.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_app,node_auth,node_login,node_register,node_person,node_gps toneBlue
class node_user_model,node_db_config,node_history_model,node_message_model toneMint
class node_client,node_dashboard,node_login_page,node_register_page,node_style,node_animations toneRose
class node_mongo toneAmber
class node_tiles toneIndigo
```

## Components

### Access and sessions

- [Express and Socket.IO](https://github.com/shivaay100/real_time_tracker/blob/main/app.js): `app.js`
- [Auth guards](https://github.com/shivaay100/real_time_tracker/blob/main/middleware/auth.js): `middleware/auth.js`
- [Login view](https://github.com/shivaay100/real_time_tracker/blob/main/views/login.ejs): `views/login.ejs`
- [Registration view](https://github.com/shivaay100/real_time_tracker/blob/main/views/register.ejs): `views/register.ejs`

### Persistence

- [User model](https://github.com/shivaay100/real_time_tracker/blob/main/models/User.js): `models/User.js`
- [DB connection](https://github.com/shivaay100/real_time_tracker/blob/main/config/database.js): `config/database.js`
- [Location history model](https://github.com/shivaay100/real_time_tracker/blob/main/models/LocationHistory.js): `models/LocationHistory.js`
- [Message model](https://github.com/shivaay100/real_time_tracker/blob/main/models/Message.js): `models/Message.js`

### Browser interface

- [Tracking client](https://github.com/shivaay100/real_time_tracker/blob/main/public/js/script.js): `public/js/script.js`
- [Map dashboard](https://github.com/shivaay100/real_time_tracker/blob/main/views/index.ejs): `views/index.ejs`
- [Login page](https://github.com/shivaay100/real_time_tracker/blob/main/views/login.ejs): `views/login.ejs`
- [Register page](https://github.com/shivaay100/real_time_tracker/blob/main/views/register.ejs): `views/register.ejs`
- [Interface styling](https://github.com/shivaay100/real_time_tracker/blob/main/public/css/style.css): `public/css/style.css`
- [UI effects](https://github.com/shivaay100/real_time_tracker/blob/main/public/js/animations.js): `public/js/animations.js`

### Other components

- **User**
- **MongoDB**
- **Browser geolocation**
- **OpenStreetMap tiles**

## Connections

- User → Login page: opens
- User → Register page: opens
- User → Map dashboard: uses
- Express and Socket.IO → Auth guards: checks access
- Express and Socket.IO → Login page: renders
- Express and Socket.IO → Register page: renders
- Express and Socket.IO → Map dashboard: renders
- Express and Socket.IO → User model: queries and saves
- Express and Socket.IO → Location history model: stores and queries
- Express and Socket.IO → Message model: stores direct messages
- Express and Socket.IO → DB connection: connects through
- DB connection → MongoDB: connects
- User model → MongoDB: persists users
- Location history model → MongoDB: persists locations
- Message model → MongoDB: persists messages
- User → Tracking client: operates
- Map dashboard → Tracking client: loads
- Tracking client → Browser geolocation: watches position
- Tracking client → Express and Socket.IO: sends locations and chat
- Express and Socket.IO → Tracking client: broadcasts updates
- Tracking client → Express and Socket.IO: requests users and history
- Tracking client → OpenStreetMap tiles: loads map tiles
- Map dashboard → Interface styling: uses
- Tracking client → UI effects: uses effects