Skip to content

feat: Implement Booking Confirmation UI #28

Description

@SujalTripathi

Description

The homepage has "Browse classes" and "Book a Session" CTAs but no
actual booking form exists. The /api/bookings route exists but has
no frontend to connect to it.

Current Behavior

  • No booking form or modal exists
  • "Book a Session" button has no functionality
  • /api/bookings POST endpoint is unused from the frontend

Expected Behavior

  • Clicking "Book a Session" opens a booking modal/form
  • Form fields: learner name, email, preferred date, preferred time,
    session type (1:1 or group), message to instructor
  • On submit: calls POST /api/bookings and shows success confirmation
  • Success state shows booking summary with instructor name and time

Tech Involved

  • React useState for modal and form state
  • fetch to call POST /api/bookings
  • Tailwind CSS modal/form components
  • Form validation

Acceptance Criteria

  • Booking modal/form component created
  • All required fields with validation
  • Connects to POST /api/bookings
  • Success confirmation message shown
  • Error state handled gracefully
  • Mobile responsive form

Contributing on behalf of NSoC'26 | @Mehren7 please assign me

Metadata

Metadata

Assignees

Labels

Level3advance levelNSoC'26NSoc'26 program trackingenhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions