-
-
PPMK Village - Homepage
PPMK Village
Inspiration ✨
The theme of the hackathon, “Connectivity Within Student Communities,” inspired us to rethink how students in PPMK interact with each other.
We imagined a digital kampung (village) where every club is a house, every restaurant is a stall, and students can walk around, join events, and stay connected.
Our goal was to make student life fun, engaging, and transparent — beyond a static website.
What We Learned 📚
- How to design a student-centered experience that balances usability and playfulness.
- Implementing event tracking and auto-fill forms to save students’ time.
- Integrating a calendar view for better event management.
- The importance of clear UI design for first-time users.
How We Built It 🛠
- We started by brainstorming the village concept and mapping out user flows (clubs → events → achievements).
- Prototyped the layout and key pages with Chatandbuild scaffolding.
- Used React + TailwindCSS for the frontend with shadcn/ui components.
- Backend and database setup were generated through Chatandbuild (Node.js + SQLite).
- Added interactive elements like hover effects on team members and slider highlights on homepage.
- Deployed the project using Chatandbuild hosting.
Challenges We Faced 🚧
- Time constraint: deciding what features were essential for the MVP (forum, real-time chat, etc. were cut for scope).
- Balancing fun vs function: making sure the “village” theme didn’t get in the way of accessibility.
- Data consistency: ensuring event registration, status updates, and notifications worked smoothly across pages.
- Team coordination: merging design ideas into one consistent interface.
Log in or sign up for Devpost to join the conversation.