# hollyxue05/hopperhacks-2026 architecture

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

- Interactive diagram: https://gitdiagram.com/hollyxue05/hopperhacks-2026
- Repository: https://github.com/hollyxue05/hopperhacks-2026

## Overview

This is a React/Flask trip planner for journeys involving LIRR and Amtrak. Users enter stations, date, time, and transfer buffer; the frontend requests itinerary options, presents connections, and can request stop-by-stop details. The backend searches stored schedules and constructs eligible connections. A map provides station and route context. The excerpts establish the frontend entry and map behavior, plus backend schedule-search and detail logic; omitted code leaves some API wiring and schedule branches uncertain.

Main entry points: [`backend/app.py`](https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py) (Flask API), [`frontend/src/main.jsx`](https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/main.jsx) (React entry), [`frontend/src/LandingPage.jsx`](https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/LandingPage.jsx) (Trip form and results), [`frontend/src/MapBackground.jsx`](https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/MapBackground.jsx) (Station map)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Trip interface"]
  node_app["React entry<br/>[main.jsx]"]
  node_planner_ui["Trip form and results<br/>[LandingPage.jsx]"]
end

subgraph group_backend["Trip planning"]
  node_api["Flask API<br/>[app.py]"]
  node_trip_search["Journey search<br/>[app.py]"]
  node_lirr_search["LIRR schedules<br/>[app.py]"]
  node_amtrak_search["Amtrak schedules<br/>[app.py]"]
  node_details["Trip stop details<br/>[app.py]"]
end

subgraph group_data["Schedule data"]
  node_mongo[("MongoDB schedules")]
end

subgraph group_map["Map context"]
  node_map_view["Station map<br/>[MapBackground.jsx]"]
end

node_traveler(("Traveler"))
node_station_api["Amtrak stations"]
node_tile_service["OpenStreetMap tiles"]

node_traveler -->|"opens"| node_app
node_app -->|"renders"| node_planner_ui
node_planner_ui -->|"requests trips"| node_api
node_api -->|"dispatches search"| node_trip_search
node_trip_search -->|"searches LIRR"| node_lirr_search
node_trip_search -->|"searches Amtrak"| node_amtrak_search
node_lirr_search -->|"reads schedules"| node_mongo
node_amtrak_search -->|"reads schedules"| node_mongo
node_planner_ui -->|"requests details"| node_api
node_api -->|"dispatches details"| node_details
node_details -->|"reads trip stops"| node_mongo
node_app -->|"renders"| node_map_view
node_map_view -.->|"fetches stations"| node_station_api
node_map_view -.->|"loads tiles"| node_tile_service

click node_app "https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/main.jsx"
click node_planner_ui "https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/LandingPage.jsx"
click node_map_view "https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/MapBackground.jsx"
click node_api "https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py"
click node_trip_search "https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py"
click node_lirr_search "https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py"
click node_amtrak_search "https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py"
click node_details "https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py"

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_planner_ui toneBlue
class node_api,node_trip_search,node_lirr_search,node_amtrak_search,node_details toneAmber
class node_mongo toneMint
class node_map_view toneRose
class node_traveler,node_station_api,node_tile_service toneIndigo
```

## Components

### Trip interface

- [React entry](https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [Trip form and results](https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/LandingPage.jsx): `frontend/src/LandingPage.jsx`

### Trip planning

- [Flask API](https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py): `backend/app.py`
- [Journey search](https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py): `backend/app.py`
- [LIRR schedules](https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py): `backend/app.py`
- [Amtrak schedules](https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py): `backend/app.py`
- [Trip stop details](https://github.com/hollyxue05/hopperhacks-2026/blob/main/backend/app.py): `backend/app.py`

### Schedule data

- **MongoDB schedules**

### Map context

- [Station map](https://github.com/hollyxue05/hopperhacks-2026/blob/main/frontend/src/MapBackground.jsx): `frontend/src/MapBackground.jsx`

### Other components

- **Traveler**
- **Amtrak stations**
- **OpenStreetMap tiles**

## Connections

- Traveler → React entry: opens
- React entry → Trip form and results: renders
- Trip form and results → Flask API: requests trips
- Flask API → Journey search: dispatches search
- Journey search → LIRR schedules: searches LIRR
- Journey search → Amtrak schedules: searches Amtrak
- LIRR schedules → MongoDB schedules: reads schedules
- Amtrak schedules → MongoDB schedules: reads schedules
- Trip form and results → Flask API: requests details
- Flask API → Trip stop details: dispatches details
- Trip stop details → MongoDB schedules: reads trip stops
- React entry → Station map: renders
- Station map → Amtrak stations: fetches stations
- Station map → OpenStreetMap tiles: loads tiles