Skip to content

feat(AIHackdays): Complete AI HackDays feature with summary statistics and project gallery

Pavani Pothuganti requested to merge AI-HackDays into develop

What does this MR do and why?

This MR implements the complete AI HackDays feature with dynamic data fetching from the Strapi backend. It includes a project showcase page with summary statistics (total teams, participants, colleges), a project gallery with responsive cards, and a detailed project modal view.

Key Features Implemented:

  • Summary Statistics Section: Displays total teams, participants, and unique colleges in clean card-based UI
  • Project Gallery: Responsive grid layout showcasing all hackday projects
  • Project Cards: Dark-themed cards with team name, college, members, and demo links
  • Project Modal: Detailed view with full team member list and external project links
  • API Integration: Fetches data from Strapi endpoint /ai-hack-days-projects
  • Error Handling: Loading states, error messages, and retry functionality

Why this change?

  • Provides a quick overview of hackathon participation metrics
  • Improves user experience with clear summary metrics and project showcase
  • Replaces static values with dynamic backend data
  • Keeps UI modular using reusable components
  • Follows clean frontend practices with proper state management

References

  • Related feature: AI HackDays Page
  • Backend: Strapi API integration (ai-hack-days-projects)
  • Based on mentor guidance for dynamic data rendering

Screenshots or screen recordings

Before

  • Summary cards showing static values (0)
  • No backend integration
  • No project gallery
  • image.png

After

  • Summary cards display dynamic values (Teams, Participants, Colleges)
  • Data fetched from Strapi API
  • Complete project gallery with responsive design
  • Proper loading state implemented
  • Dark mode support throughout
  • image.png

How to set up and validate locally

  1. Clone the repository:

    git clone <repo_url>
cd <project_folder>

  2. Install dependencies:

    npm install

  3. Run the application:

    npm start

  4. Open browser and navigate to:

    http://localhost:3000/aihackdays

  5. Verify:

    • Summary cards show correct values from backend
    • Project gallery displays all projects
    • Loading state appears before data loads
    • Modal opens when clicking "View Full Details"
    • No console errors
    • UI is responsive on different screen sizes

MR acceptance checklist

  • Code follows clean and modular structure
  • API integration implemented correctly
  • No hardcoded values
  • No breaking changes
  • UI working as expected
  • Test cases added
  • Responsive design implemented
  • Dark mode support working
  • Error handling implemented

Merge request reports