# sm-mayeen/roamease architecture

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

- Interactive diagram: https://gitdiagram.com/sm-mayeen/roamease
- Repository: https://github.com/sm-mayeen/roamease

## Overview

RoamEase is a client-side travel discovery and booking interface. Visitors search and filter destination packages, inspect cards or a map, view trip details, save trips, and submit booking details; the app then keeps bookings and wishlist items in React state for display in a drawer. The sampled code supports the app’s callback ownership and the booking modal’s direct contact links. Source excerpts for the map, list, and several state/data connections were not provided, so those uncertain links are omitted.

Main entry points: [`src/App.jsx`](https://github.com/sm-mayeen/roamease/blob/main/src/App.jsx) (App State & Views), [`src/components/BookingModal.jsx`](https://github.com/sm-mayeen/roamease/blob/main/src/components/BookingModal.jsx) (Booking Form), [`src/components/Hero.jsx`](https://github.com/sm-mayeen/roamease/blob/main/src/components/Hero.jsx) (Search & Filters), [`src/components/TourCard.jsx`](https://github.com/sm-mayeen/roamease/blob/main/src/components/TourCard.jsx) (Tour Card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Trip Discovery"]
  node_hero["Search &amp; Filters<br/>[Hero.jsx]"]
  node_tour_data["Tour Catalog<br/>[toursData.js]"]
  node_tour_card["Tour Card<br/>[TourCard.jsx]"]
  node_tour_list["Tour List<br/>[TourList.jsx]"]
  node_tour_map["Tour Map<br/>[TourMap.jsx]"]
  node_detail_modal["Trip Details"]
end

subgraph group_booking["Booking &amp; Saved Trips"]
  node_booking_modal["Booking Form<br/>[BookingModal.jsx]"]
  node_list_drawer["Saved &amp; Booked<br/>[ListDrawer.jsx]"]
end

subgraph group_app_shell["App Shell"]
  node_app["App State &amp; Views<br/>[App.jsx]"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_cursor["Custom Cursor<br/>[CustomCursor.jsx]"]
  node_background["Star Background<br/>[StarBackground.jsx]"]
end

node_visitor(("Visitor"))
node_contact(("Tour Coordinator"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_tour_card
node_app -->|"renders"| node_tour_map
node_app -->|"renders"| node_detail_modal
node_app -->|"renders"| node_booking_modal
node_app -->|"renders"| node_list_drawer
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_cursor
node_app -->|"renders"| node_background
node_hero -->|"updates filters"| node_app
node_tour_card -->|"dispatches selection"| node_app
node_detail_modal -->|"dispatches actions"| node_app
node_booking_modal -->|"submits booking"| node_app
node_list_drawer -->|"requests removal"| node_app
node_booking_modal -.->|"offers contact"| node_contact

click node_app "https://github.com/sm-mayeen/roamease/blob/main/src/App.jsx"
click node_entry "https://github.com/sm-mayeen/roamease/blob/main/src/main.jsx"
click node_navbar "https://github.com/sm-mayeen/roamease/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/sm-mayeen/roamease/blob/main/src/components/Hero.jsx"
click node_tour_data "https://github.com/sm-mayeen/roamease/blob/main/src/data/toursData.js"
click node_tour_card "https://github.com/sm-mayeen/roamease/blob/main/src/components/TourCard.jsx"
click node_tour_list "https://github.com/sm-mayeen/roamease/blob/main/src/components/TourList.jsx"
click node_tour_map "https://github.com/sm-mayeen/roamease/blob/main/src/components/TourMap.jsx"
click node_detail_modal "https://github.com/sm-mayeen/roamease/blob/main/src/components/TourDetailModal.jsx"
click node_booking_modal "https://github.com/sm-mayeen/roamease/blob/main/src/components/BookingModal.jsx"
click node_list_drawer "https://github.com/sm-mayeen/roamease/blob/main/src/components/ListDrawer.jsx"
click node_footer "https://github.com/sm-mayeen/roamease/blob/main/src/components/Footer.jsx"
click node_cursor "https://github.com/sm-mayeen/roamease/blob/main/src/components/CustomCursor.jsx"
click node_background "https://github.com/sm-mayeen/roamease/blob/main/src/components/StarBackground.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_hero,node_tour_data,node_tour_card,node_tour_list,node_tour_map,node_detail_modal toneBlue
class node_booking_modal,node_list_drawer toneAmber
class node_app,node_entry,node_navbar,node_footer,node_cursor,node_background toneMint
class node_visitor,node_contact toneIndigo
```

## Components

### Trip Discovery

- [Search & Filters](https://github.com/sm-mayeen/roamease/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Tour Catalog](https://github.com/sm-mayeen/roamease/blob/main/src/data/toursData.js): `src/data/toursData.js`
- [Tour Card](https://github.com/sm-mayeen/roamease/blob/main/src/components/TourCard.jsx): `src/components/TourCard.jsx`
- [Tour List](https://github.com/sm-mayeen/roamease/blob/main/src/components/TourList.jsx): `src/components/TourList.jsx`
- [Tour Map](https://github.com/sm-mayeen/roamease/blob/main/src/components/TourMap.jsx): `src/components/TourMap.jsx`
- [Trip Details](https://github.com/sm-mayeen/roamease/blob/main/src/components/TourDetailModal.jsx): `src/components/TourDetailModal.jsx`

### Booking & Saved Trips

- [Booking Form](https://github.com/sm-mayeen/roamease/blob/main/src/components/BookingModal.jsx): `src/components/BookingModal.jsx`
- [Saved & Booked](https://github.com/sm-mayeen/roamease/blob/main/src/components/ListDrawer.jsx): `src/components/ListDrawer.jsx`

### App Shell

- [App State & Views](https://github.com/sm-mayeen/roamease/blob/main/src/App.jsx): `src/App.jsx`
- [React Entry](https://github.com/sm-mayeen/roamease/blob/main/src/main.jsx): `src/main.jsx`
- [Navigation](https://github.com/sm-mayeen/roamease/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer](https://github.com/sm-mayeen/roamease/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Custom Cursor](https://github.com/sm-mayeen/roamease/blob/main/src/components/CustomCursor.jsx): `src/components/CustomCursor.jsx`
- [Star Background](https://github.com/sm-mayeen/roamease/blob/main/src/components/StarBackground.jsx): `src/components/StarBackground.jsx`

### Other components

- **Visitor**
- **Tour Coordinator**

## Connections

- Visitor → React Entry: opens app
- React Entry → App State & Views: renders
- App State & Views → Navigation: renders
- App State & Views → Search & Filters: renders
- App State & Views → Tour Card: renders
- App State & Views → Tour Map: renders
- App State & Views → Trip Details: renders
- App State & Views → Booking Form: renders
- App State & Views → Saved & Booked: renders
- App State & Views → Footer: renders
- App State & Views → Custom Cursor: renders
- App State & Views → Star Background: renders
- Search & Filters → App State & Views: updates filters
- Tour Card → App State & Views: dispatches selection
- Trip Details → App State & Views: dispatches actions
- Booking Form → App State & Views: submits booking
- Saved & Booked → App State & Views: requests removal
- Booking Form → Tour Coordinator: offers contact