# dhecaptain/trashcash architecture

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

## Overview

TrashCash is a React frontend for coordinating waste collection and related payments among vendors, cleaners, and government users. The visible route flow starts at the app shell, which routes visitors to public information or role-oriented account and operations pages; protected routes gate the dashboard, bin reporting, and payments. The sampled authentication context uses mock users and browser storage, and the theme context persists display preference. The README is a generic Vite template, and unsampled page implementations limit evidence about how collection work is actually dispatched or completed.

Main entry points: [`src/App.tsx`](https://github.com/dhecaptain/trashcash/blob/main/src/App.tsx) (Router and providers), [`src/components/ProtectedRoute.tsx`](https://github.com/dhecaptain/trashcash/blob/main/src/components/ProtectedRoute.tsx) (Protected route), [`src/context/AuthContext.tsx`](https://github.com/dhecaptain/trashcash/blob/main/src/context/AuthContext.tsx) (Authentication state), [`src/components/Navbar.tsx`](https://github.com/dhecaptain/trashcash/blob/main/src/components/Navbar.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_main["React entry<br/>[main.tsx]"]
  node_app["Router and providers<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer links<br/>[Footer.tsx]"]
end

subgraph group_public["Public information"]
  node_home["Home<br/>[HomePage.tsx]"]
  node_about["Platform overview<br/>[AboutPage.tsx]"]
  node_business["Business information<br/>[BusinessPage.tsx]"]
  node_cleaners["Cleaner information<br/>[CleanersPage.tsx]"]
end

subgraph group_identity["Access and preferences"]
  node_login["Login<br/>[LoginPage.tsx]"]
  node_signup["Signup<br/>[SignupPage.tsx]"]
  node_auth["Authentication state<br/>[AuthContext.tsx]"]
  node_theme["Theme preference<br/>[ThemeContext.tsx]"]
end

subgraph group_operations["Waste operations"]
  node_guard["Protected route<br/>[ProtectedRoute.tsx]"]
  node_dashboard["Dashboard<br/>[DashboardPage.tsx]"]
  node_report["Report full bin<br/>[ReportBinPage.tsx]"]
  node_payments["Payments and wallet<br/>[PaymentsPage.tsx]"]
  node_domain["Waste domain types<br/>[index.ts]"]
end

node_visitor(("Visitor or user"))
node_storage[("Browser local storage")]

node_visitor -->|"opens app"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_business
node_app -->|"routes to"| node_cleaners
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_app -->|"protects routes"| node_guard
node_guard -->|"allows access"| node_dashboard
node_guard -->|"allows access"| node_report
node_guard -->|"allows access"| node_payments
node_app -->|"provides state"| node_auth
node_app -->|"provides state"| node_theme
node_navbar -->|"uses auth state"| node_auth
node_navbar -->|"uses theme state"| node_theme
node_auth -->|"reads and writes"| node_storage
node_theme -->|"reads and writes"| node_storage
node_payments -->|"reads user"| node_auth
node_dashboard -.->|"uses types"| node_domain
node_report -.->|"uses types"| node_domain
node_payments -.->|"uses types"| node_domain

click node_main "https://github.com/dhecaptain/trashcash/blob/main/src/main.tsx"
click node_app "https://github.com/dhecaptain/trashcash/blob/main/src/App.tsx"
click node_navbar "https://github.com/dhecaptain/trashcash/blob/main/src/components/Navbar.tsx"
click node_footer "https://github.com/dhecaptain/trashcash/blob/main/src/components/Footer.tsx"
click node_home "https://github.com/dhecaptain/trashcash/blob/main/src/pages/HomePage.tsx"
click node_about "https://github.com/dhecaptain/trashcash/blob/main/src/pages/AboutPage.tsx"
click node_business "https://github.com/dhecaptain/trashcash/blob/main/src/pages/BusinessPage.tsx"
click node_cleaners "https://github.com/dhecaptain/trashcash/blob/main/src/pages/CleanersPage.tsx"
click node_login "https://github.com/dhecaptain/trashcash/blob/main/src/pages/LoginPage.tsx"
click node_signup "https://github.com/dhecaptain/trashcash/blob/main/src/pages/SignupPage.tsx"
click node_auth "https://github.com/dhecaptain/trashcash/blob/main/src/context/AuthContext.tsx"
click node_theme "https://github.com/dhecaptain/trashcash/blob/main/src/context/ThemeContext.tsx"
click node_guard "https://github.com/dhecaptain/trashcash/blob/main/src/components/ProtectedRoute.tsx"
click node_dashboard "https://github.com/dhecaptain/trashcash/blob/main/src/pages/DashboardPage.tsx"
click node_report "https://github.com/dhecaptain/trashcash/blob/main/src/pages/ReportBinPage.tsx"
click node_payments "https://github.com/dhecaptain/trashcash/blob/main/src/pages/PaymentsPage.tsx"
click node_domain "https://github.com/dhecaptain/trashcash/blob/main/src/types/index.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_main,node_app,node_navbar,node_footer,node_visitor toneBlue
class node_home,node_about,node_business,node_cleaners,node_storage toneAmber
class node_login,node_signup,node_auth,node_theme toneMint
class node_guard,node_dashboard,node_report,node_payments,node_domain toneRose
```

## Components

### Application shell

- [React entry](https://github.com/dhecaptain/trashcash/blob/main/src/main.tsx): `src/main.tsx`
- [Router and providers](https://github.com/dhecaptain/trashcash/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/dhecaptain/trashcash/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Footer links](https://github.com/dhecaptain/trashcash/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Public information

- [Home](https://github.com/dhecaptain/trashcash/blob/main/src/pages/HomePage.tsx): `src/pages/HomePage.tsx`
- [Platform overview](https://github.com/dhecaptain/trashcash/blob/main/src/pages/AboutPage.tsx): `src/pages/AboutPage.tsx`
- [Business information](https://github.com/dhecaptain/trashcash/blob/main/src/pages/BusinessPage.tsx): `src/pages/BusinessPage.tsx`
- [Cleaner information](https://github.com/dhecaptain/trashcash/blob/main/src/pages/CleanersPage.tsx): `src/pages/CleanersPage.tsx`

### Access and preferences

- [Login](https://github.com/dhecaptain/trashcash/blob/main/src/pages/LoginPage.tsx): `src/pages/LoginPage.tsx`
- [Signup](https://github.com/dhecaptain/trashcash/blob/main/src/pages/SignupPage.tsx): `src/pages/SignupPage.tsx`
- [Authentication state](https://github.com/dhecaptain/trashcash/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Theme preference](https://github.com/dhecaptain/trashcash/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`

### Waste operations

- [Protected route](https://github.com/dhecaptain/trashcash/blob/main/src/components/ProtectedRoute.tsx): `src/components/ProtectedRoute.tsx`
- [Dashboard](https://github.com/dhecaptain/trashcash/blob/main/src/pages/DashboardPage.tsx): `src/pages/DashboardPage.tsx`
- [Report full bin](https://github.com/dhecaptain/trashcash/blob/main/src/pages/ReportBinPage.tsx): `src/pages/ReportBinPage.tsx`
- [Payments and wallet](https://github.com/dhecaptain/trashcash/blob/main/src/pages/PaymentsPage.tsx): `src/pages/PaymentsPage.tsx`
- [Waste domain types](https://github.com/dhecaptain/trashcash/blob/main/src/types/index.ts): `src/types/index.ts`

### Other components

- **Visitor or user**
- **Browser local storage**

## Connections

- Visitor or user → React entry: opens app
- React entry → Router and providers: mounts
- Router and providers → Navigation: renders
- Router and providers → Footer links: renders
- Router and providers → Home: routes to
- Router and providers → Platform overview: routes to
- Router and providers → Business information: routes to
- Router and providers → Cleaner information: routes to
- Router and providers → Login: routes to
- Router and providers → Signup: routes to
- Router and providers → Protected route: protects routes
- Protected route → Dashboard: allows access
- Protected route → Report full bin: allows access
- Protected route → Payments and wallet: allows access
- Router and providers → Authentication state: provides state
- Router and providers → Theme preference: provides state
- Navigation → Authentication state: uses auth state
- Navigation → Theme preference: uses theme state
- Authentication state → Browser local storage: reads and writes
- Theme preference → Browser local storage: reads and writes
- Payments and wallet → Authentication state: reads user
- Dashboard → Waste domain types: uses types
- Report full bin → Waste domain types: uses types
- Payments and wallet → Waste domain types: uses types