# riahmad-swe/tournext-client architecture
> Architecture diagram of the GitHub repository riahmad-swe/tournext-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-29). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/riahmad-swe/tournext-client
- Repository: https://github.com/riahmad-swe/tournext-client
## Overview
1. **Repository shape**
- This is a client-side React single-page application built with Vite.
- The app is organized around routed pages, reusable UI components, a global auth context, and a small service layer for API access.
2. **Primary user-facing areas**
- The app splits cleanly into:
- a public marketing/browse experience: Home, About Us, Tours, and Stories
- an authenticated dashboard experience: profile, bookings, stories, tour posting, tour-guide application, and admin management screens
- The README confirms the product focus is tourism booking plus community content and tour-guide workflows.
3. **Routing and top-level composition**
- `src/routes/router.js` is the central navigation map.
- `src/main.jsx` bootstraps the app and likely wires the router plus providers.
- Layout components define the major shells:
- `RootLayout` for the public site frame
- `AuthLayout` for login/signup/reset flows
- `DashboardLayout` for the logged-in area with sidebar/navigation
- This means the architecture is “route-driven UI with layout wrappers,” not a monolithic page app.
4. **Authentication and session boundary**
- Authentication state is centralized in `src/contexts/AuthContext.js` and exposed via `src/providers/AuthProvider.jsx` and `src/hooks/useAuth.js`.
- `src/components/auth/GoogleLogin.jsx` indicates Google-based sign-in is part of the auth boundary.
- The auth layer is the main gate between public browsing and protected dashboard actions.
5. **Backend/API integration**
- `src/services/apiClient.js` is the main abstraction for server communication.
- `config/firebase.config.js` indicates Firebase is part of the infrastructure, likely for auth and possibly data/storage integration.
- The exact backend shape isn’t fully visible here, but the code clearly separates API access from UI components, which helps keep page logic thin.
6. **Public content and discovery subsystem**
- Home-page sections live under `src/components/home`, including:
- hero/overview marketing content
- top tours
- top guides
- top community stories
- travel essentials
- app promotion
- These sections are assembled by `src/pages/HomePage.jsx`.
- Related pages include `ViewToursPage`, `ViewTourDetailsPage`, `ViewStoriesPage`, and `TourGuideProfilePage`, so the public side is mostly browse-and-detail oriented.
7. **Tour booking flow**
- The tours area is a core transactional flow:
- list tours
- inspect a tour’s details
- choose a guide
- submit a booking
- `src/components/shared/TourCard.jsx` and `src/pages/tours/ViewTourDetailsPage.jsx` likely form the browse-to-detail transition.
- `src/pages/dashboard/MyBookings.jsx` and `src/components/dashboard/MyBookingsTable.jsx` show the user’s post-booking management area.
8. **Community/content subsystem**
- Stories are treated as first-class content:
- public viewing in `ViewStoriesPage`
- creation and management in the dashboard via `PostStory`, `ManageStories`, and `PostStoryForm`
- Shared presentation components like `StoryCard.jsx` suggest stories are reused across the home page and community page.
- The README’s Facebook sharing mention implies stories may be promoted externally, but the repo itself mainly exposes story CRUD and display.
9. **Tour-guide workflow**
- There is a dedicated application path for becoming a guide:
- `TourGuideApplicationPage`
- `TourGuideApplicationForm`
- `ManageCandidates` for admin review
- Guide-related display components such as `TourGuideCard.jsx` and `OurTourGuides.jsx` support discovery and selection.
- This is a distinct business process with an approval boundary, separate from ordinary user behavior.
10. **Admin and role-based dashboard behavior**
- The dashboard contains role-sensitive management areas:
- `ManageUsers`
- `ManageCandidates`
- `PostTour`
- `ManageStories`
- `Profile`
- This implies the app has at least user/admin/tour-guide role distinctions, with route or component-level authorization checks likely handled through the auth context and router.
11. **UI composition strategy**
- Shared presentational components live under `src/components/shared` and are reused across pages.
- Feature-specific forms and tables live under `src/components/dashboard`, which keeps admin/user operations separate from marketing pages.
- This layered UI structure suggests a clear split:
- page containers handle orchestration
- reusable cards/tables/forms handle rendering
- layouts handle shell and navigation
12. **Assets and presentation-heavy media**
- The app includes substantial static media under `src/assets`, especially:
- overview videos
- hero imagery
- Lottie animation JSON
- This matters architecturally because the Home/Overview experience is media-driven rather than purely text-based.
13. **Build and deployment context**
- The project uses Vite and standard frontend tooling (`eslint`, `index.html`, package lockfiles).
- The README links to a deployed Firebase-hosted site, so the runtime is a browser SPA with cloud deployment rather than a server-rendered app.
14. **How to draw the architecture**
- A good diagram would show:
- browser SPA at the center
- router dispatching into public/auth/dashboard layouts
- auth context/provider wrapping the app
- UI pages consuming shared components and forms
- service/API layer and Firebase as external dependencies
- role-specific dashboard branches for user, guide, and admin workflows
Main entry points: [`src/pages/dashboard/Dashboard.jsx`](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/Dashboard.jsx) (Dashboard), [`src/layouts/RootLayout.jsx`](https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/RootLayout.jsx) (Root layout), [`src/services/apiClient.js`](https://github.com/riahmad-swe/tournext-client/blob/main/src/services/apiClient.js) (API client), [`src/components/shared/TourCard.jsx`](https://github.com/riahmad-swe/tournext-client/blob/main/src/components/shared/TourCard.jsx) (Shared cards)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_g1["App shell"]
node_n1(("Main
bootstraps app
[main.jsx]"))
node_n2["Router
route map
[router.js]"]
node_n3["Root layout
public shell
[RootLayout.jsx]"]
node_n4["Auth layout
auth shell
[AuthLayout.jsx]"]
node_n5["Dashboard layout
dashboard shell"]
end
subgraph group_g2["Public experience"]
node_n10["Home page
public page
[HomePage.jsx]"]
node_n11["About page
public page
[AboutUsPage.jsx]"]
node_n12["Tours browse
tour listing
[ViewToursPage.jsx]"]
node_n13["Tour details"]
node_n14["Stories browse
content feed"]
node_n15["Guide profile"]
node_n24["Home sections
marketing sections
[Hero.jsx]"]
end
subgraph group_g3["Dashboard workflows"]
node_n16["Dashboard
hub page
[Dashboard.jsx]"]
node_n17["Profile
account page
[Profile.jsx]"]
node_n18["Bookings
booking management
[MyBookings.jsx]"]
node_n19["Stories admin
content management
[ManageStories.jsx]"]
node_n20["Guide workflow
application flow"]
node_n21["User admin
admin management
[ManageUsers.jsx]"]
node_n22["Content forms
ui forms
[PostTourForm.jsx]"]
end
subgraph group_g4["Shared foundation"]
node_n6[("Auth context
session state
[AuthContext.js]")]
node_n7["Auth provider
context provider
[AuthProvider.jsx]"]
node_n8[("API client
service layer
[apiClient.js]")]
node_n9["Firebase config
cloud config
[firebase.config.js]"]
node_n23["Shared cards
ui components
[TourCard.jsx]"]
end
node_n1 -->|"wraps"| node_n7
node_n1 -->|"boots"| node_n2
node_n2 -->|"public routes"| node_n3
node_n2 -->|"auth routes"| node_n4
node_n2 -->|"protected routes"| node_n5
node_n3 -->|"hosts"| node_n10
node_n3 -->|"hosts"| node_n11
node_n3 -->|"hosts"| node_n12
node_n3 -->|"hosts"| node_n14
node_n3 -->|"hosts"| node_n15
node_n4 -->|"reads auth"| node_n7
node_n5 -->|"hosts"| node_n16
node_n16 -->|"links"| node_n17
node_n16 -->|"links"| node_n18
node_n16 -->|"links"| node_n19
node_n16 -->|"links"| node_n20
node_n16 -->|"links"| node_n21
node_n16 -->|"uses forms"| node_n22
node_n10 -->|"assembles"| node_n24
node_n10 -->|"renders cards"| node_n23
node_n12 -->|"renders cards"| node_n23
node_n13 -->|"shows related"| node_n23
node_n14 -->|"renders cards"| node_n23
node_n15 -->|"renders cards"| node_n23
node_n22 -->|"submits data"| node_n8
node_n23 -->|"fetches data"| node_n8
node_n7 -->|"provides"| node_n6
node_n6 -->|"integrates"| node_n9
node_n8 -->|"configured by"| node_n9
node_n20 -->|"requests"| node_n8
node_n19 -->|"requests"| node_n8
node_n18 -->|"requests"| node_n8
click node_n1 "https://github.com/riahmad-swe/tournext-client/blob/main/src/main.jsx"
click node_n2 "https://github.com/riahmad-swe/tournext-client/blob/main/src/routes/router.js"
click node_n3 "https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/RootLayout.jsx"
click node_n4 "https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/AuthLayout.jsx"
click node_n5 "https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/DashboardLayout.jsx"
click node_n6 "https://github.com/riahmad-swe/tournext-client/blob/main/src/contexts/AuthContext.js"
click node_n7 "https://github.com/riahmad-swe/tournext-client/blob/main/src/providers/AuthProvider.jsx"
click node_n8 "https://github.com/riahmad-swe/tournext-client/blob/main/src/services/apiClient.js"
click node_n9 "https://github.com/riahmad-swe/tournext-client/blob/main/config/firebase.config.js"
click node_n10 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/HomePage.jsx"
click node_n11 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/AboutUsPage.jsx"
click node_n12 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/tours/ViewToursPage.jsx"
click node_n13 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/tours/ViewTourDetailsPage.jsx"
click node_n14 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/stories/ViewStoriesPage.jsx"
click node_n15 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/TourGuideProfilePage.jsx"
click node_n16 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/Dashboard.jsx"
click node_n17 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/Profile.jsx"
click node_n18 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/MyBookings.jsx"
click node_n19 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/ManageStories.jsx"
click node_n20 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/TourGuideApplication.jsx"
click node_n21 "https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/ManageUsers.jsx"
click node_n22 "https://github.com/riahmad-swe/tournext-client/blob/main/src/components/dashboard/PostTourForm.jsx"
click node_n23 "https://github.com/riahmad-swe/tournext-client/blob/main/src/components/shared/TourCard.jsx"
click node_n24 "https://github.com/riahmad-swe/tournext-client/blob/main/src/components/home/Hero.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_n1,node_n2,node_n3,node_n4,node_n5 toneBlue
class node_n10,node_n11,node_n12,node_n13,node_n14,node_n15,node_n24 toneAmber
class node_n16,node_n17,node_n18,node_n19,node_n20,node_n21,node_n22 toneMint
class node_n6,node_n7,node_n8,node_n9,node_n23 toneRose
```
## Components
### App shell
SPA bootstrap, routing, and layout wrappers
- [Main](https://github.com/riahmad-swe/tournext-client/blob/main/src/main.jsx): bootstraps app · Entry point that mounts the React app and wires global providers and routing. · `src/main.jsx`
- [Router](https://github.com/riahmad-swe/tournext-client/blob/main/src/routes/router.js): route map · Central navigation map that selects public, auth, and dashboard routes. · `src/routes/router.js`
- [Root layout](https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/RootLayout.jsx): public shell · Top-level frame for the public site experience. · `src/layouts/RootLayout.jsx`
- [Auth layout](https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/AuthLayout.jsx): auth shell · Dedicated wrapper for login, signup, and password reset flows. · `src/layouts/AuthLayout.jsx`
- [Dashboard layout](https://github.com/riahmad-swe/tournext-client/blob/main/src/layouts/DashboardLayout.jsx): dashboard shell · Authenticated app frame with sidebar and internal navigation. · `src/layouts/DashboardLayout.jsx`
### Public experience
Marketing, browse, and content discovery flows
- [Home page](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/HomePage.jsx): public page · Landing page that assembles the marketing and discovery sections. · `src/pages/HomePage.jsx`
- [About page](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/AboutUsPage.jsx): public page · Static informational page about the product and service. · `src/pages/AboutUsPage.jsx`
- [Tours browse](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/tours/ViewToursPage.jsx): tour listing · Public tour browsing page for discovering available tours. · `src/pages/tours/ViewToursPage.jsx`
- [Tour details](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/tours/ViewTourDetailsPage.jsx): tour detail · Tour detail page that supports inspection and booking decisions. · `src/pages/tours/ViewTourDetailsPage.jsx`
- [Stories browse](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/stories/ViewStoriesPage.jsx): content feed · Public community stories page. · `src/pages/stories/ViewStoriesPage.jsx`
- [Guide profile](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/TourGuideProfilePage.jsx): guide profile · Public profile page for an individual tour guide. · `src/pages/TourGuideProfilePage.jsx`
- [Home sections](https://github.com/riahmad-swe/tournext-client/blob/main/src/components/home/Hero.jsx): marketing sections · Reusable homepage sections such as hero, overview, top tours, guides, stories, essentials, and app promotion. · `src/components/home/Hero.jsx`
### Dashboard workflows
Authenticated user, guide, and admin operations
- [Dashboard](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/Dashboard.jsx): hub page · Authenticated landing page that routes users into dashboard workflows. · `src/pages/dashboard/Dashboard.jsx`
- [Profile](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/Profile.jsx): account page · User profile management area. · `src/pages/dashboard/Profile.jsx`
- [Bookings](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/MyBookings.jsx): booking management · User booking management page. · `src/pages/dashboard/MyBookings.jsx`
- [Stories admin](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/ManageStories.jsx): content management · Story creation and moderation area in the dashboard. · `src/pages/dashboard/ManageStories.jsx`
- [Guide workflow](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/TourGuideApplication.jsx): application flow · Tour-guide application and candidate review workflow. · `src/pages/dashboard/TourGuideApplication.jsx`
- [User admin](https://github.com/riahmad-swe/tournext-client/blob/main/src/pages/dashboard/ManageUsers.jsx): admin management · User administration area for role-based management. · `src/pages/dashboard/ManageUsers.jsx`
- [Content forms](https://github.com/riahmad-swe/tournext-client/blob/main/src/components/dashboard/PostTourForm.jsx): ui forms · Dashboard forms for posting tours, posting stories, editing profiles, and applying as a guide. · `src/components/dashboard/PostTourForm.jsx`
### Shared foundation
Cross-cutting auth, services, and reusable UI
- [Auth context](https://github.com/riahmad-swe/tournext-client/blob/main/src/contexts/AuthContext.js): session state · Central authentication state and session boundary for the app. · `src/contexts/AuthContext.js`
- [Auth provider](https://github.com/riahmad-swe/tournext-client/blob/main/src/providers/AuthProvider.jsx): context provider · Wraps the app and exposes auth state to route trees and components. · `src/providers/AuthProvider.jsx`
- [API client](https://github.com/riahmad-swe/tournext-client/blob/main/src/services/apiClient.js): service layer · Shared client for backend communication and data access. · `src/services/apiClient.js`
- [Firebase config](https://github.com/riahmad-swe/tournext-client/blob/main/config/firebase.config.js): cloud config · Firebase runtime configuration used by the client app. · `config/firebase.config.js`
- [Shared cards](https://github.com/riahmad-swe/tournext-client/blob/main/src/components/shared/TourCard.jsx): ui components · Reusable display components for tours, stories, guides, and travel essentials. · `src/components/shared/TourCard.jsx`
## Connections
- Main → Auth provider: wraps · Main initializes the auth provider around the app.
- Main → Router: boots · Main hands off navigation to the router.
- Router → Root layout: public routes · Router sends public browsing flows into the root layout.
- Router → Auth layout: auth routes · Router sends sign-in related flows into the auth layout.
- Router → Dashboard layout: protected routes · Router sends authenticated flows into the dashboard layout.
- Root layout → Home page: hosts · Public layout renders the home experience.
- Root layout → About page: hosts · Public layout renders informational pages.
- Root layout → Tours browse: hosts · Public layout renders tour browsing.
- Root layout → Stories browse: hosts · Public layout renders community browsing.
- Root layout → Guide profile: hosts · Public layout renders guide discovery pages.
- Auth layout → Auth provider: reads auth · Auth screens depend on shared session state.
- Dashboard layout → Dashboard: hosts · Dashboard layout frames the authenticated hub.
- Dashboard → Profile: links · Dashboard routes users to profile management.
- Dashboard → Bookings: links · Dashboard routes users to booking management.
- Dashboard → Stories admin: links · Dashboard routes users to story management.
- Dashboard → Guide workflow: links · Dashboard routes users to guide application workflows.
- Dashboard → User admin: links · Dashboard routes admins to user management.
- Dashboard → Content forms: uses forms · Dashboard workflows rely on shared form components.
- Home page → Home sections: assembles · Home page composes reusable marketing sections.
- Home page → Shared cards: renders cards · Home experience surfaces shared presentation cards.
- Tours browse → Shared cards: renders cards · Tour listing uses shared tour cards.
- Tour details → Shared cards: shows related · Tour detail views reuse shared tour presentation.
- Stories browse → Shared cards: renders cards · Story browsing uses shared story cards.
- Guide profile → Shared cards: renders cards · Guide profile pages reuse shared guide cards.
- Content forms → API client: submits data · Dashboard forms call the API client for persistence.
- Shared cards → API client: fetches data · Shared UI is populated from server-backed data.
- Auth provider → Auth context: provides · Provider exposes the auth context to the app.
- Auth context → Firebase config: integrates · Authentication state is tied to Firebase infrastructure.
- API client → Firebase config: configured by · API layer relies on Firebase configuration.
- Guide workflow → API client: requests · Guide application flow persists and reads server data.
- Stories admin → API client: requests · Story management relies on the API layer.
- Bookings → API client: requests · Booking management relies on the API layer.