How rabonaapp-wq/rabona-football-community works
Rabona is a football community and services web app: users enter through authentication, then navigate a social feed, academy discovery/details, bookings, profiles, notifications, and a shop. The visible runtime is a React client backed by Firebase; pages own their Firestore interactions, while shared authentication, image compression, and notification state support those experiences. README content is only the generic AI Studio starter, so product capabilities are inferred from the indexed page modules; unsampled page internals and several page-to-service links are not asserted.
Main entry points: App.tsx Page router · HomeFeed.tsx Social feed · AuthContext.tsx Authentication · AcademiesPage.tsx Academy discovery
Components 23
App runtime
- Page router
src/App.tsx - Navigation
src/components/Navigation.tsx - Firebase clients
src/lib/firebase.ts - Firestore
- Shared visual assets
src/components/Icons.tsx
Identity
- Authentication
src/context/AuthContext.tsx - Login
src/pages/LoginPage.tsx - Registration
src/pages/SignupPage.tsx - Account settings
src/pages/SettingsPage.tsx
Community
- Social feed
src/pages/HomeFeed.tsx - Create post
src/pages/NewPostPage.tsx - User profile
src/pages/ProfilePage.tsx - Notifications
src/pages/NotificationsPage.tsx - Notification state
src/utils/notifications.ts - Image compression
src/utils/imageCompressor.ts
Football services
- Academy discovery
src/pages/AcademiesPage.tsx - Academy detail
src/pages/AcademyDetailPage.tsx - Bookings
src/pages/BookingsPage.tsx - Admin dashboard
src/pages/AdminDashboard.tsx
Commerce
- Store
src/pages/StorePage.tsx - Demo checkout
src/pages/DemoCheckoutPage.tsx - Payment API
src/lib/paymentApi.ts
Other components
- App user
Connections 30
- App user → Page router: opens
- Page router → Authentication: checks session
src/App.tsx - Page router → Navigation: renders navigation
src/App.tsx - Page router → Social feed: routes to
src/App.tsx - Page router → Academy discovery: routes to
src/App.tsx - Page router → Academy detail: routes to
src/App.tsx - Page router → Bookings: routes to
src/App.tsx - Page router → User profile: routes to
src/App.tsx - Page router → Create post: routes to
src/App.tsx - Page router → Admin dashboard: routes to
src/App.tsx - Page router → Login: routes to
src/App.tsx - Page router → Registration: routes to
src/App.tsx - Page router → Account settings: routes to
src/App.tsx - Page router → Notifications: routes to
src/App.tsx - Page router → Store: routes to
src/App.tsx - Page router → Demo checkout: routes to
src/App.tsx - Authentication → Firebase clients: uses clients
src/context/AuthContext.tsx - Authentication → Firestore: reads profiles
src/context/AuthContext.tsx - Academy discovery → Firestore: lists academies
src/pages/AcademiesPage.tsx - Social feed → Firestore: reads and writes
src/pages/HomeFeed.tsx - Social feed → Image compression: compresses images
src/pages/HomeFeed.tsx - Create post → Image compression: compresses images
src/pages/NewPostPage.tsx - User profile → Image compression: compresses images
src/pages/ProfilePage.tsx - Navigation → Notification state: counts unread
src/components/Navigation.tsx - Notifications → Notification state: uses state
src/pages/NotificationsPage.tsx - Notification state → Store: reads order data
src/utils/notifications.ts - Academy detail → Payment API: requests payment
src/pages/AcademyDetailPage.tsx - Academy detail → Demo checkout: may navigate
src/pages/AcademyDetailPage.tsx - Social feed → Shared visual assets: renders icons
src/pages/HomeFeed.tsx - Academy discovery → Shared visual assets: renders icons
src/pages/AcademiesPage.tsx