feat:AiHackDays Summary
What does this MR do and why?
This MR implements the AI HackDays Project Summary Section by fetching dynamic data from the Strapi backend and displaying total teams, participants, and colleges in a clean card-based UI.
Why this change?
- Provides a quick overview of hackathon participation
- Improves user experience with clear summary metrics
- 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
After
- Summary cards display dynamic values (Teams, Participants, Colleges)
- Data fetched from Strapi API
- Proper loading state implemented
How to set up and validate locally
Clone the repository:
git clone <repo_url> cd <project_folder>
Install dependencies:
npm install
Run the application:
npm start
Open browser and navigate to:
http://localhost:3000/aihackdays
Verify:
- Summary cards show correct values from backend
- Loading state appears before data loads
- No console errors
- UI is responsive
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
Summary (One-liner for your sir)
Implemented AI HackDays summary section with dynamic data fetching from Strapi and integrated it into the UI using reusable components for better user experience and maintainability.
Edited by Pavani Pothuganti