towhidur-rahmaan/car-doctor-client

1. Application type and deployment

- This is a React single-page application built with Vite and styled with Tailwind CSS.

- It is deployed on Firebase Hosting (firebase.json, .firebase, .firebaserc), with the live app linked in the README.

2. Top-level product shape

- The app is a car service/customer portal with two major user experiences:

- a public marketing + booking flow

- a protected authenticated area for bookings, profiles, reviews, and admin management

- The UI and navigation are organized to support both customer-facing pages and an admin dashboard.

3. Core shell and routing

- src/main.jsx boots the app, and src/Routes.jsx is the main route map.

- src/Layout/Main.jsx and src/Layout/DashboardLayout.jsx define the two main shells:

- the public site layout

- the dashboard layout

- src/ErrorPage.jsx provides the fallback boundary for invalid routes.

4. Authentication and access control

- src/provider/AuthProvider.jsx centralizes authentication state and likely exposes the user/session context to the app.

- src/Routes.jsx/PrivateRoute.jsx protects logged-in-only pages.

- src/Routes.jsx/AdminRoute.jsx adds an admin-only boundary for dashboard management screens.

- src/hooks/useAdmin.jsx is a role check hook used to distinguish admin users from regular users.

5. Firebase integration boundary

- src/firebase/firebase.config.js holds Firebase client configuration.

- The repo structure strongly suggests Firebase is the main backend dependency for auth and likely data persistence.

- The presence of Firebase Hosting config also means the SPA is served as static assets from Firebase rather than a custom server.

6. Public site content

- The public experience is split into reusable feature sections under src/pages/Home/...:

- banner/hero

- why choose us

- services

- customer reviews

- team

- contact/products area

- src/pages/AboutUs/AboutUs.jsx provides a standalone informational page.

- src/pages/ServiceDetails/ServiceDetails.jsx represents a detail view for an individual service.

7. Booking and customer workflows

- src/pages/BookService/BookService.jsx is the primary booking entry point.

- src/pages/Bookings/Bookings.jsx and src/pages/Bookings/BookingRow.jsx represent the customer’s booking list and row-level actions.

- src/pages/AddReview/AddReview.jsx is a customer action page for submitting feedback.

- src/pages/Profile/Profile.jsx is the authenticated user account area.

8. Admin dashboard workflows

- src/pages/Dashboard/AdminHome.jsx is the dashboard landing page for admins.

- src/pages/Dashboard/AddService.jsx, ManageServices.jsx, ManageBookings.jsx, and ManageReviews.jsx are the main operational screens.

- These pages form the admin control plane for maintaining services, handling bookings, and moderating reviews.

9. Shared UI and cross-cutting components

- src/pages/Shared/NavBar/NavBar.jsx and src/pages/Shared/Footer/Footer.jsx provide global site chrome.

- Root-level UI helpers such as FloatingCTA.jsx, GlobalEffects.jsx, IntroLoader.jsx, and SectionReveal.jsx suggest reusable animation/UX wrappers used across multiple pages.

- These components are cross-cutting presentation layers, not business logic.

10. Static content and asset flow

- public/products.json and public/services.json are static data sources consumed by the frontend at runtime.

- The src/assets/ tree contains images/icons for banners, products, services, login screens, customer sections, and team pages.

- This indicates a mostly client-driven content model, where some visible content is loaded from static JSON and bundled assets rather than from a separate CMS.

11. Route and feature boundaries

- The repository is organized by feature/page rather than by low-level components.

- Public marketing pages, authenticated user pages, and admin pages are separated into different folders, which maps cleanly to distinct diagram layers:

- anonymous/public

- authenticated customer

- authenticated admin

12. Build and runtime tooling

- vite.config.js, tailwind.config.js, postcss.config.js, and eslint.config.js define the frontend build, styling, and linting toolchain.

- There is no evidence of a custom backend service in this repo; the architecture appears to be a frontend SPA + Firebase-backed identity/deployment setup with static content and client-side routing.