# akanxikushwaha/oceanhazardreporting architecture

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

## Overview

OceanGuard is a coastal-hazard reporting web app with public information, user reporting, and administrator monitoring. A visitor signs in or signs up, users submit location- and image-supported hazard reports and can view dashboard features, while administrators review reports and access monitoring, analytics, and authority-contact views. The sampled source confirms routing, authentication, report submission and image storage, and administrator report retrieval; other dashboard component behavior is represented only at the documented component level.

Main entry points: [`src/pages/homePage/signUp/supabaseClient.js`](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/signUp/supabaseClient.js) (Supabase client), [`src/App.jsx`](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/App.jsx) (Router and session), [`src/pages/homePage/HomePage.jsx`](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/HomePage.jsx) (Public home page), [`src/pages/adminDashboard/AdminDashboard.jsx`](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/AdminDashboard.jsx) (Administrator dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application and access"]
  node_main["React entry point<br/>[main.jsx]"]
  node_app["Router and session<br/>[App.jsx]"]
  node_protected["Role gate<br/>[ProtectedRoute.jsx]"]
  node_authui["Sign-in and signup<br/>[Header.jsx]"]
  node_client["Supabase client<br/>[supabaseClient.js]"]
end

subgraph group_public["Public information"]
  node_home["Public home page<br/>[HomePage.jsx]"]
  node_home_sections["Hero, features, statistics, footer"]
  node_news["Hazard news headlines<br/>[NewsHeadlines.jsx]"]
end

subgraph group_reporting["User reporting"]
  node_userdash["User dashboard<br/>[UserDashboard.jsx]"]
  node_reportform["Hazard report submission<br/>[ReportForm.jsx]"]
  node_user_views["Map, history, quick stats"]
end

subgraph group_admin["Administration"]
  node_admindash["Administrator dashboard<br/>[AdminDashboard.jsx]"]
  node_admin_reports["Report review and export<br/>[Reports.jsx]"]
  node_admin_views["Dashboard, map, analytics"]
  node_authorities["Authority contacts and alerts"]
end

node_visitor(("Visitor or user"))
node_admin_actor(("Administrator"))
node_supabase[("Supabase service")]
node_reportsdb[("Reports data")]
node_images[("Report image storage")]

node_visitor -->|"opens app"| node_main
node_admin_actor -->|"opens app"| node_main
node_main -->|"renders"| node_app
node_app -->|"checks session and role"| node_client
node_app -->|"routes public"| node_home
node_app -->|"guards dashboards"| node_protected
node_protected -->|"admits user"| node_userdash
node_protected -->|"admits admin"| node_admindash
node_home -->|"renders"| node_authui
node_home -->|"renders"| node_home_sections
node_home -->|"renders"| node_news
node_authui -->|"signs in or up; reads profile"| node_client
node_client -->|"auth and data requests"| node_supabase
node_app -->|"reads profile role"| node_supabase
node_userdash -->|"renders"| node_reportform
node_userdash -->|"renders"| node_user_views
node_reportform -->|"gets user; uploads image; inserts report"| node_client
node_client -->|"stores and reads reports"| node_reportsdb
node_client -->|"stores images"| node_images
node_admindash -->|"selects reports view"| node_admin_reports
node_admindash -->|"selects dashboard, map, or analytics"| node_admin_views
node_admindash -->|"selects alerts view"| node_authorities
node_admin_reports -->|"fetches reports"| node_client
node_admin_reports -->|"reads reports"| node_reportsdb

click node_main "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/main.jsx"
click node_app "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/App.jsx"
click node_protected "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/signUp/ProtectedRoute.jsx"
click node_authui "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/components/Header.jsx"
click node_client "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/signUp/supabaseClient.js"
click node_home "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/HomePage.jsx"
click node_home_sections "https://github.com/akanxikushwaha/oceanhazardreporting/tree/main/src/pages/homePage/components"
click node_news "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/components/NewsHeadlines.jsx"
click node_userdash "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/userDashboard/UserDashboard.jsx"
click node_reportform "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/userDashboard/components/ReportForm.jsx"
click node_user_views "https://github.com/akanxikushwaha/oceanhazardreporting/tree/main/src/pages/userDashboard/components"
click node_admindash "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/AdminDashboard.jsx"
click node_admin_reports "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/components/Reports.jsx"
click node_admin_views "https://github.com/akanxikushwaha/oceanhazardreporting/tree/main/src/pages/adminDashboard/components"
click node_authorities "https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/components/AlertAuthorities.jsx"

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_protected,node_authui,node_client,node_visitor toneBlue
class node_home,node_home_sections,node_news,node_supabase,node_reportsdb,node_images toneAmber
class node_userdash,node_reportform,node_user_views toneMint
class node_admindash,node_admin_reports,node_admin_views,node_authorities toneRose
class node_admin_actor toneIndigo
```

## Components

### Application and access

- [React entry point](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/main.jsx): `src/main.jsx`
- [Router and session](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/App.jsx): `src/App.jsx`
- [Role gate](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/signUp/ProtectedRoute.jsx): `src/pages/homePage/signUp/ProtectedRoute.jsx`
- [Sign-in and signup](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/components/Header.jsx): `src/pages/homePage/components/Header.jsx`
- [Supabase client](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/signUp/supabaseClient.js): `src/pages/homePage/signUp/supabaseClient.js`

### Public information

- [Public home page](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/HomePage.jsx): `src/pages/homePage/HomePage.jsx`
- [Hero, features, statistics, footer](https://github.com/akanxikushwaha/oceanhazardreporting/tree/main/src/pages/homePage/components): `src/pages/homePage/components`
- [Hazard news headlines](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/homePage/components/NewsHeadlines.jsx): `src/pages/homePage/components/NewsHeadlines.jsx`

### User reporting

- [User dashboard](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/userDashboard/UserDashboard.jsx): `src/pages/userDashboard/UserDashboard.jsx`
- [Hazard report submission](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/userDashboard/components/ReportForm.jsx): `src/pages/userDashboard/components/ReportForm.jsx`
- [Map, history, quick stats](https://github.com/akanxikushwaha/oceanhazardreporting/tree/main/src/pages/userDashboard/components): `src/pages/userDashboard/components`

### Administration

- [Administrator dashboard](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/AdminDashboard.jsx): `src/pages/adminDashboard/AdminDashboard.jsx`
- [Report review and export](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/components/Reports.jsx): `src/pages/adminDashboard/components/Reports.jsx`
- [Dashboard, map, analytics](https://github.com/akanxikushwaha/oceanhazardreporting/tree/main/src/pages/adminDashboard/components): `src/pages/adminDashboard/components`
- [Authority contacts and alerts](https://github.com/akanxikushwaha/oceanhazardreporting/blob/main/src/pages/adminDashboard/components/AlertAuthorities.jsx): `src/pages/adminDashboard/components/AlertAuthorities.jsx`

### Other components

- **Visitor or user**
- **Administrator**
- **Supabase service**
- **Reports data**
- **Report image storage**

## Connections

- Visitor or user → React entry point: opens app
- Administrator → React entry point: opens app
- React entry point → Router and session: renders
- Router and session → Supabase client: checks session and role
- Router and session → Public home page: routes public
- Router and session → Role gate: guards dashboards
- Role gate → User dashboard: admits user
- Role gate → Administrator dashboard: admits admin
- Public home page → Sign-in and signup: renders
- Public home page → Hero, features, statistics, footer: renders
- Public home page → Hazard news headlines: renders
- Sign-in and signup → Supabase client: signs in or up; reads profile
- Supabase client → Supabase service: auth and data requests
- Router and session → Supabase service: reads profile role
- User dashboard → Hazard report submission: renders
- User dashboard → Map, history, quick stats: renders
- Hazard report submission → Supabase client: gets user; uploads image; inserts report
- Supabase client → Reports data: stores and reads reports
- Supabase client → Report image storage: stores images
- Administrator dashboard → Report review and export: selects reports view
- Administrator dashboard → Dashboard, map, analytics: selects dashboard, map, or analytics
- Administrator dashboard → Authority contacts and alerts: selects alerts view
- Report review and export → Supabase client: fetches reports
- Report review and export → Reports data: reads reports