Integrate Events page with Events API and populate events data

[tjhiaj]

Frontend fetches events from:
GET /functions/v1/events/upcoming
GET /functions/v1/events/past
GET /functions/v1/events/{event_id}

API returns a list of events including:

• id
• title
• description
• start_time
• end_time
• location
• image_url
• signup_url

Events are ordered by start_time

Frontend Data Handling

• Events page fetches event data on page load
• No event data is hardcoded in the frontend

UI Rendering

• Events are displayed as event cards
• Each event card includes:
  • Title
  • Date & time
  • Location (or “Virtual”)
  • Event image (if available)
• Upcoming and past events are visually separated
• Layout supports any number of events
• Responsive behavior matches design specifications

Database Population

• Events table is populated with initial event data
• All required fields are present
• Date/time values are valid and timezone-aware
• Event ordering reflects intended chronology

Technical / Implementation

• Uses environment variables for API base URL
• No service role keys exposed in frontend

Definition of Done

• Events page displays live data from the database
• Upcoming and past events render correctly
• Page works on mobile and desktop
• No console errors
• Approved in code review