feat:AI HackDays – Project List and Project Cards UI Implementatio
✨ Feature Request – AI HackDays Project List & Cards UI
What feature would you like to see added to viswam.ai?
AI HackDays page – Project List and Project Cards UI that displays all hackathon projects dynamically from the backend.
Describe the feature in detail
This feature will display a list of AI HackDays projects in a card-based layout. Each project card should show important project details fetched from the backend API.
Each Project Card should include:
- Project Title
- Team Name
- College Name
- Demo Link
The projects should be displayed in a responsive grid layout. The data should be fetched dynamically from the backend (Strapi API), and the UI should handle loading states, empty states, and error states.
This feature will mainly help users, organizers, and mentors to view all submitted hackathon projects in one place.
Why is this feature important or useful?
This feature is important because:
- It provides a centralized view of all hackathon projects
- Helps organizers review projects easily
- Helps participants view other teams’ projects
- Improves visibility of student work
- Makes the AI HackDays page interactive and dynamic instead of static
Any suggestions for how it could work or look?
Suggested UI:
- Grid layout (3 or 4 cards per row)
- Each card should have:
- Project Title at top
- Team & College details
- Demo and Repo buttons at bottom
- Hover effect on cards
- Responsive design for mobile and desktop
Possible Components:
- ProjectList component
- ProjectCard component
Add diagrams, examples, or references if possible
Page Structure:
AIHackDaysPage
├── ProjectSummarySection
└── ProjectList
└── ProjectCard
TestCases:
I have written test cases for the Project List and Project Card components before development.
Attaching the test cases document for reference and development guidance.