feat:AI HackDays Frontend – Project List and Project Cards

What does this MR do?

This merge request implements the AI HackDays Project List and Project Cards frontend. It fetches project data from the Strapi backend API and displays the projects in a responsive card-based grid layout.

What problem does it solve or what new capability does it add?

Previously, the AI HackDays page did not display project data dynamically from the backend. This feature adds the ability to fetch AI HackDays project data from the Strapi backend and display it on the frontend, allowing users to view team projects, organization names, and demo links.

Motivation / Use Case

This feature is useful for displaying all AI HackDays projects in one place. It helps organizers, mentors, and participants view project submissions easily. It also ensures the data is dynamically loaded from the backend instead of being hardcoded on the frontend.

Implementation Notes

Implementation Details:

• Created API service to fetch AI HackDays data from Strapi backend.
• Extracted projects data from API response (data.data[0].Projects).
• Implemented ProjectList component to fetch and display project data.
• Implemented ProjectCard component to display individual project details.
• Displayed projects in a responsive grid layout using Tailwind CSS.
• Added loading state and empty state handling.
• Used reusable components for better code structure.

Design Decisions:

• Used reusable ProjectCard component for modular design.
• Separated API logic into a services file for maintainability.
• Used React hooks (useEffect, useState) for data fetching and state management.

No breaking changes were introduced.

Screen Shots

Before:

After:

How to Test

Steps to test this feature locally:

1. Pull this branch.
2. Run the frontend project:
   npm install
   npm run dev
3. Open the AI HackDays page in the browser.
4. Verify that:
   • Project data is fetched from backend API.
   • Project cards are displayed.
   • Team Name, Organization Name, and Demo URL are shown.
   • Demo link opens correctly.
   • Loading state appears while data is fetching.
   • Empty state appears if no projects are available.

Checklist

• Feature is documented
• Code is clean and readable
• No breaking changes
• Components are reusable
• Feature tested locally
• Backend API integration working
• Feature works as intended

Related Issues or Discussions

#35 (closed)