docs/Presentation.md

1. The Client (Browser) "The user opens the app in their browser. The React frontend is a SPA — it's fully built and served as static files, so everything runs client-side."

2. HTTPS REST + WebSocket "The browser communicates with our backend over two channels — regular HTTPS for API calls (login, booking, data fetching), and a persistent WebSocket connection for real-time signaling during live sessions. Both go to the same backend server on port 8080."

3. REST API / Backend "This is the core of the system — a Spring Boot backend that handles all business logic: auth, session booking, user management, payments. Every request is validated here before anything happens."

4. Cache Layer "Before the backend hits the database, it checks the cache. If the data is already there, it returns it immediately — no DB query needed. Only on a cache miss does it go to PostgreSQL. This keeps response times fast for frequently read data like sheikh listings."

5. PostgreSQL Database "Our persistent storage. Hosted on Neon (cloud PostgreSQL). All users, sessions, payments, availability, and recitation records live here."

6. External Services (the 4 arrows)

"AI Service via ngrok — when a student submits a recitation, the backend forwards the audio here and gets back an accuracy score"
"Stripe — when a payment is initiated, backend calls Stripe's API to create a PaymentIntent, then verifies the result"
"Google OAuth2 — for social login, we validate the ID token with Google before creating or logging in the user"
"Gmail SMTP — used to send OTP emails for verification and password reset"