Skip to content

Feat :

Pavani Pothuganti requested to merge feature/fetch-events-from-api into dev1

What does this MR do and why?

This MR implements the Events Page backend integration using Strapi and makes the Events section fully dynamic. Instead of hardcoded event data, the frontend now fetches events from Strapi, ensuring easy content management, scalability, and real-time updates without code changes.

It introduces a structured event content type, improves frontend API integration, and ensures proper rendering of event listings and event detail pages using slug based routing.

🚀 Key Features

  • Created Strapi collection type: event
  • Added support for:
    • Event title, description, short description
    • Event date and optional end date
    • Venue and location details
    • Online/offline event handling (isOnline)
    • Event type classification (Workshop, Hackathon, Webinar, etc.)
    • Banner image and optional event gallery
    • Registration link and registration status control
    • Optional max participants and tags
  • Implemented reusable eventSchedule component (optional timeline structure)
  • Enabled Draft & Publish for event content management
  • Integrated Strapi APIs with frontend:
    • Fetch all events (Events Listing Page)
    • Fetch single event using slug (Event Details Page)
  • Implemented dynamic routing for event pages using slug
  • Handled conditional UI rendering:
    • Online vs Offline events
    • Registration open/closed state
    • Optional schedule display
  • Ensured proper media handling for images from Strapi

❓ Why this change?

  • Eliminates hardcoded event data from frontend
  • Allows non-developers to manage events via Strapi
  • Improves scalability for future events and campaigns
  • Enables dynamic updates without redeployment
  • Provides structured and reusable event data model
  • Supports better SEO and routing using slug
  • Makes event management system production-ready

📸 Screenshots

🔹 Events Listing Page (Before)

  • Static/hardcoded event cards
  • No backend data source
  • Manual updates required in code

🔹 Events Listing Page (After)

  • Events fetched dynamically from Strapi API
  • Cards rendered based on backend data
  • Real-time updates reflected on UI

🔹 Event Details Page

  • Dynamic routing using slug
  • Displays full event information:
    • Title, description, date
    • Venue/location
    • Banner image
    • Registration link
    • Schedule (if available)

🔹 Strapi Admin Panel

  • Event creation form in Strapi
  • Fields properly structured (event type, schedule, media, etc.)
  • Draft & Publish workflow enabled

🧪 Checklist

  • ✔ Strapi event collection type created successfully
  • ✔ Event schedule component implemented
  • ✔ API integration completed (GET requests working)
  • ✔ Frontend listing page dynamic
  • ✔ Event details page working with slug routing
  • ✔ Media (images) loading correctly
  • ✔ Conditional UI rendering implemented
  • ✔ Build and lint checks passing
  • ✔ No hardcoded event data remaining

🔗 Related Issue

Strapi Backend Integration for Events Page
#84 (closed)

Merge request reports