How riahmad-swe/tournext-client works
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: Dashboard.jsx Dashboard · RootLayout.jsx Root layout · apiClient.js API client · TourCard.jsx Shared cards
Components 24
App shell
SPA bootstrap, routing, and layout wrappers
- Main · Entry point that mounts the React app and wires global providers and routing.
src/main.jsx - Router · Central navigation map that selects public, auth, and dashboard routes.
src/routes/router.js - Root layout · Top-level frame for the public site experience.
src/layouts/RootLayout.jsx - Auth layout · Dedicated wrapper for login, signup, and password reset flows.
src/layouts/AuthLayout.jsx - Dashboard layout · Authenticated app frame with sidebar and internal navigation.
src/layouts/DashboardLayout.jsx
Public experience
Marketing, browse, and content discovery flows
- Home page · Landing page that assembles the marketing and discovery sections.
src/pages/HomePage.jsx - About page · Static informational page about the product and service.
src/pages/AboutUsPage.jsx - Tours browse · Public tour browsing page for discovering available tours.
src/pages/tours/ViewToursPage.jsx - Tour details · Tour detail page that supports inspection and booking decisions.
src/pages/tours/ViewTourDetailsPage.jsx - Stories browse · Public community stories page.
src/pages/stories/ViewStoriesPage.jsx - Guide profile · Public profile page for an individual tour guide.
src/pages/TourGuideProfilePage.jsx - Home 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 · Authenticated landing page that routes users into dashboard workflows.
src/pages/dashboard/Dashboard.jsx - Profile · User profile management area.
src/pages/dashboard/Profile.jsx - Bookings · User booking management page.
src/pages/dashboard/MyBookings.jsx - Stories admin · Story creation and moderation area in the dashboard.
src/pages/dashboard/ManageStories.jsx - Guide workflow · Tour-guide application and candidate review workflow.
src/pages/dashboard/TourGuideApplication.jsx - User admin · User administration area for role-based management.
src/pages/dashboard/ManageUsers.jsx - Content 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 · Central authentication state and session boundary for the app.
src/contexts/AuthContext.js - Auth provider · Wraps the app and exposes auth state to route trees and components.
src/providers/AuthProvider.jsx - API client · Shared client for backend communication and data access.
src/services/apiClient.js - Firebase config · Firebase runtime configuration used by the client app.
config/firebase.config.js - Shared cards · Reusable display components for tours, stories, guides, and travel essentials.
src/components/shared/TourCard.jsx
Connections 32
- 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.