# alicialeeyuelin/mern-stack-project architecture

> Architecture diagram of the GitHub repository alicialeeyuelin/mern-stack-project, 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/alicialeeyuelin/mern-stack-project
- Repository: https://github.com/alicialeeyuelin/mern-stack-project

## Overview

This is a shark-information and conservation web app with a React frontend and Express/MongoDB API. Users register or log in, then explore shark records and a map of locations and sighting frequencies; authenticated researchers can submit research applications, while admin-oriented screens support content and request management. The backend exposes separate user, shark, location, sighting, research, info, and admin routes. Sampled source confirms the home, shark, and research request calls; other route capabilities are represented from the tree and their mount points, without assuming unsampled route-to-model wiring.

Main entry points: [`backend/index.js`](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/index.js) (Express API), [`frontend/src/App.jsx`](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/App.jsx) (App routing), [`frontend/src/pages/home.jsx`](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/home.jsx) (Home and map), [`backend/routes/shark.js`](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/shark.js) (Shark routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["App routing<br/>[App.jsx]"]
  node_home["Home and map<br/>[home.jsx]"]
  node_shark_page["Shark catalog<br/>[shark.jsx]"]
  node_auth_pages["Login and register<br/>[login.jsx]"]
  node_research_form["Research application<br/>[researcherForm.jsx]"]
  node_admin_ui["Admin screens<br/>[approve.jsx]"]
end

subgraph group_api["API and access"]
  node_api_server["Express API<br/>[index.js]"]
  node_auth_middleware["JWT authentication<br/>[auth.js]"]
end

subgraph group_catalog["Marine information"]
  node_shark_routes["Shark routes<br/>[shark.js]"]
  node_location_routes["Location routes<br/>[location.js]"]
  node_sighting_routes["Sighting routes<br/>[sighting.js]"]
  node_info_routes["Information routes<br/>[info.js]"]
  node_shark_model[("Shark records<br/>[Shark.js]")]
  node_location_model[("Location records<br/>[Location.js]")]
  node_sighting_model[("Sighting records<br/>[Sighting.js]")]
  node_info_model[("Information records<br/>[Info.js]")]
end

subgraph group_accounts["Accounts and research"]
  node_user_routes["User routes<br/>[user.js]"]
  node_research_routes["Research requests<br/>[research.js]"]
  node_admin_routes["Admin routes<br/>[admin.js]"]
  node_research_model[("Research records<br/>[Research.js]")]
  node_user_model[("User records<br/>[User.js]")]
end

node_visitor(("Visitor / user"))
node_mongo[("MongoDB")]
node_map_tiles["OpenStreetMap tiles"]

node_visitor -->|"uses"| node_app
node_app -->|"routes"| node_auth_pages
node_app -->|"routes"| node_home
node_app -->|"routes"| node_shark_page
node_app -->|"routes"| node_admin_ui
node_home -->|"fetches user"| node_user_routes
node_home -->|"fetches locations"| node_location_routes
node_home -->|"fetches frequency"| node_sighting_routes
node_home -->|"loads tiles"| node_map_tiles
node_shark_page -->|"fetches user"| node_user_routes
node_shark_page -->|"fetches sharks"| node_shark_routes
node_research_form -->|"fetches user"| node_user_routes
node_research_form -->|"submits request"| node_research_routes
node_api_server -->|"mounts"| node_user_routes
node_api_server -->|"mounts"| node_shark_routes
node_api_server -->|"mounts"| node_location_routes
node_api_server -->|"mounts"| node_sighting_routes
node_api_server -->|"mounts"| node_info_routes
node_api_server -->|"mounts"| node_research_routes
node_api_server -->|"mounts"| node_admin_routes
node_api_server -->|"connects"| node_mongo
node_research_routes -->|"authenticates"| node_auth_middleware
node_shark_routes -->|"authenticates"| node_auth_middleware
node_auth_middleware -->|"looks up user"| node_user_model
node_research_routes -->|"saves application"| node_research_model
node_shark_routes -->|"queries and saves"| node_shark_model

click node_app "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/home.jsx"
click node_shark_page "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/shark.jsx"
click node_auth_pages "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/login.jsx"
click node_research_form "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/component/researcherForm.jsx"
click node_admin_ui "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/component/approve.jsx"
click node_api_server "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/index.js"
click node_auth_middleware "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/middleware/auth.js"
click node_user_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/user.js"
click node_shark_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/shark.js"
click node_location_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/location.js"
click node_sighting_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/sighting.js"
click node_info_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/info.js"
click node_research_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/research.js"
click node_admin_routes "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/admin.js"
click node_research_model "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Research.js"
click node_user_model "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/User.js"
click node_shark_model "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Shark.js"
click node_location_model "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Location.js"
click node_sighting_model "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Sighting.js"
click node_info_model "https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Info.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_home,node_shark_page,node_auth_pages,node_research_form,node_admin_ui,node_visitor toneBlue
class node_api_server,node_auth_middleware,node_mongo toneAmber
class node_shark_routes,node_location_routes,node_sighting_routes,node_info_routes,node_shark_model,node_location_model,node_sighting_model,node_info_model toneMint
class node_user_routes,node_research_routes,node_admin_routes,node_research_model,node_user_model toneRose
class node_map_tiles toneIndigo
```

## Components

### Web client

- [App routing](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Home and map](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/home.jsx): `frontend/src/pages/home.jsx`
- [Shark catalog](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/shark.jsx): `frontend/src/pages/shark.jsx`
- [Login and register](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/pages/login.jsx): `frontend/src/pages/login.jsx`
- [Research application](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/component/researcherForm.jsx): `frontend/src/component/researcherForm.jsx`
- [Admin screens](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/frontend/src/component/approve.jsx): `frontend/src/component/approve.jsx`

### API and access

- [Express API](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/index.js): `backend/index.js`
- [JWT authentication](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/middleware/auth.js): `backend/middleware/auth.js`

### Marine information

- [Shark routes](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/shark.js): `backend/routes/shark.js`
- [Location routes](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/location.js): `backend/routes/location.js`
- [Sighting routes](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/sighting.js): `backend/routes/sighting.js`
- [Information routes](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/info.js): `backend/routes/info.js`
- [Shark records](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Shark.js): `backend/models/Shark.js`
- [Location records](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Location.js): `backend/models/Location.js`
- [Sighting records](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Sighting.js): `backend/models/Sighting.js`
- [Information records](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Info.js): `backend/models/Info.js`

### Accounts and research

- [User routes](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/user.js): `backend/routes/user.js`
- [Research requests](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/research.js): `backend/routes/research.js`
- [Admin routes](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/routes/admin.js): `backend/routes/admin.js`
- [Research records](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/Research.js): `backend/models/Research.js`
- [User records](https://github.com/alicialeeyuelin/mern-stack-project/blob/main/backend/models/User.js): `backend/models/User.js`

### Other components

- **Visitor / user**
- **MongoDB**
- **OpenStreetMap tiles**

## Connections

- Visitor / user → App routing: uses
- App routing → Login and register: routes
- App routing → Home and map: routes
- App routing → Shark catalog: routes
- App routing → Admin screens: routes
- Home and map → User routes: fetches user
- Home and map → Location routes: fetches locations
- Home and map → Sighting routes: fetches frequency
- Home and map → OpenStreetMap tiles: loads tiles
- Shark catalog → User routes: fetches user
- Shark catalog → Shark routes: fetches sharks
- Research application → User routes: fetches user
- Research application → Research requests: submits request
- Express API → User routes: mounts
- Express API → Shark routes: mounts
- Express API → Location routes: mounts
- Express API → Sighting routes: mounts
- Express API → Information routes: mounts
- Express API → Research requests: mounts
- Express API → Admin routes: mounts
- Express API → MongoDB: connects
- Research requests → JWT authentication: authenticates
- Shark routes → JWT authentication: authenticates
- JWT authentication → User records: looks up user
- Research requests → Research records: saves application
- Shark routes → Shark records: queries and saves