How ashwinth2004/w2w-fitness-rehab works
Purpose and runtime
W2W Fitness & Rehab is a Vite/React single-page clinic website combining public marketing, appointment booking, enquiries, and a single-admin CRM/dashboard. The browser app is hosted on Vercel; Firebase provides Auth and Firestore; Vercel serverless functions use Resend for email. Primary bootstraps are src/main.jsx, src/App.jsx, and index.html.
Public-site routing and presentation
src/App.jsx owns application routing between public pages, booking, and admin routes. Public content is organized as page-level views such as src/pages/Home.jsx, src/pages/Appointment.jsx, and src/pages/Contact.jsx, with shared navigation, SEO, and site chrome in src/components/Navbar.jsx, src/components/Footer.jsx, and src/components/Seo.jsx. Static crawl/PWA assets live under public/, including public/sitemap.xml and public/sw.js.
Booking and availability flow
Booking UI is split between reusable form/modal/slot components: src/components/BookingForm.jsx, src/components/BookingModal.jsx, and src/components/SlotPicker.jsx. Booking state is coordinated through src/context/BookingContext.jsx. The frontend Firestore layer in src/lib/firestore.js reads slot availability and persists bookings; availability records are intentionally public-write while appointment personal data is admin-protected by firestore.rules. Booking confirmation/email delivery crosses a backend boundary through src/lib/email.js to api/send-enquiry.js.
Enquiries and notification backend
Public enquiries originate in src/components/EnquiryForm.jsx, persist to Firestore, then invoke api/send-enquiry.js. This Vercel function is the Resend integration boundary and requires server-side email credentials. Scheduled reminder processing is separate in api/send-reminders.js; vercel.json configures its daily cron execution. Reminders use Firebase Admin credentials rather than browser Firebase access.
Authentication and admin boundary
Firebase client initialization is centralized in src/firebase.js. src/context/AuthContext.jsx establishes signed-in admin state, while src/components/ProtectedRoute.jsx gates dashboard access. Admin shell/navigation is defined by src/pages/admin/AdminLayout.jsx; entry and authentication are handled by src/pages/admin/Login.jsx. Firestore rules in firestore.rules enforce authenticated access to clinic data, with indexes declared in firestore.indexes.json.
Clinic operations and CRM
The dashboard composes operational modules: src/pages/admin/Dashboard.jsx for overview, src/pages/admin/Appointments.jsx for appointment lifecycle, and src/pages/admin/Clients.jsx / src/pages/admin/ClientDetail.jsx for patient records, notes, and progress. Additional care workflows are distinct modules in src/pages/admin/Treatment.jsx, src/pages/admin/Rehab.jsx, and src/pages/admin/Fitness.jsx. These pages consume the shared Firestore data layer rather than directly coupling UI to Firebase queries.
Reporting, content, and recovery
Client and monthly branded reports are generated client-side through src/lib/pdf.js and exposed via src/pages/admin/Reports.jsx; progress visualizations are rendered in dashboard/client views using Recharts. Admin-managed blog/review content is handled by src/pages/admin/Content.jsx and displayed through src/pages/Blog.jsx / src/pages/BlogPost.jsx. Operational Firestore backup/restore is an independent Node script subsystem: scripts/backup.mjs, scripts/restore.mjs, and scripts/lib/admin.mjs.
Main entry points: firestore.js Firestore data layer · AdminLayout.jsx Admin shell & login · App.jsx App routing · Home.jsx Public pages
Components 20
Public site
- Public pages · Marketing, contact, and appointment views.
src/pages/Home.jsx - Site chrome & SEO
src/components/Navbar.jsx - Crawl & PWA assets · Includes sitemap and service worker.
Booking & enquiries
- Booking UI · Form, modal, and slot picker.
src/components/BookingForm.jsx - Booking state
src/context/BookingContext.jsx - Enquiry form
src/components/EnquiryForm.jsx
Admin CRM
- Admin auth gate · Establishes admin state and protects dashboard routes.
src/context/AuthContext.jsx - Admin shell & login · Dashboard navigation and sign-in entry.
src/pages/admin/AdminLayout.jsx - CRM care modules · Appointments, clients, treatment, rehab, and fitness workflows.
src/pages/admin/Appointments.jsx - Reports & progress · Client/monthly PDFs and Recharts visualizations.
src/pages/admin/Reports.jsx - Content management · Admin blog/reviews displayed on public blog pages.
src/pages/admin/Content.jsx
Backend operations
- Enquiry email function · Resend integration for enquiries and booking confirmations.
api/send-enquiry.js - Daily reminder worker · Uses Firebase Admin credentials for reminders.
api/send-reminders.js - Firestore backup & restore · Independent administrative recovery tooling.
scripts/backup.mjs
Other components
- Vite React bootstrap
src/main.jsx - App routing · Routes public, booking, and admin experiences.
src/App.jsx - Firestore data layer · Shared booking and CRM persistence boundary.
src/lib/firestore.js - Firebase client
src/firebase.js - Cloud Firestore · Stores availability, bookings, enquiries, and clinic records.
- Firestore access rules · Public slot writes; clinic data requires authentication.
firestore.rules
Connections 24
- Vite React bootstrap → App routing: mounts
- App routing → Public pages: routes to
- App routing → Booking UI: routes to
- App routing → Admin auth gate: guards admin routes
- Public pages → Site chrome & SEO: uses
- Public pages → Crawl & PWA assets: served with
- Booking UI → Booking state: coordinates through
- Booking state → Firestore data layer: reads slots and saves bookings
- Enquiry form → Firestore data layer: persists enquiry
- Booking UI → Enquiry email function: sends confirmation
- Enquiry form → Enquiry email function: sends notification
- Firestore data layer → Firebase client: uses
- Firebase client → Cloud Firestore: connects to
- Firestore access rules → Cloud Firestore: authorizes access
- Admin auth gate → Firebase client: authenticates with
- Admin auth gate → Admin shell & login: admits
- Admin shell & login → CRM care modules: hosts
- Admin shell & login → Reports & progress: hosts
- Admin shell & login → Content management: hosts
- CRM care modules → Firestore data layer: uses shared data layer
- Reports & progress → Firestore data layer: reads clinic data
- Content management → Firestore data layer: manages content in
- Daily reminder worker → Cloud Firestore: reads appointments
- Firestore backup & restore → Cloud Firestore: exports and restores