-
-
Cover
Team
Hack Tuah Script on That Thang
Frontend Deployment
https://mwh-minimart-system.vercel.app
BackendDeployment
https://mwh-minimart-system-backend.onrender.com
admin login username: kuekgabriel@gmail.com password: KuekKuek
normal user login username: rafaelkuek@yamail.com password: poop!
Okay, so we dove into this hackathon, completely inspired by what Muhammadiyah Welfare Home is all about, giving these boys a real chance to thrive. The idea of building a digital minimart and voucher system for them, something that could make their lives a bit easier and teach them some responsibility, that really got us going. We wanted to create this platform where they could earn vouchers by doing chores or achieving goals, then use those vouchers to get things they needed from the minimart. It felt like we were building more than just an app; it felt like we were building a little ecosystem of empowerment.
The whole experience was a massive learning curve. We practically lived and breathed code for seven days straight. We learned so much about rapid prototyping, how to quickly turn an idea into something tangible that actually works. Database design became our new best friend, figuring out how to structure all the information about users, products, vouchers, and tasks in a way that made sense and was efficient. Then there was the whole UI/UX side of things. We realized pretty quickly that if this system was going to be used by the residents and the MWH staff, it had to be super intuitive and user friendly. We spent hours designing wireframes and mockups, trying to make the interface as clean and simple as possible. We even got to play around with API integrations, exploring how to add things like SMS notifications and social media login, which was pretty cool. And of course, security was a huge deal. We had to make sure the whole system was secure and that user data was protected, so we learned a ton about different authentication methods and encryption.
Building the project was a whirlwind. We decided to go with a React frontend because it is great for building dynamic user interfaces, and a Express backend with a Firestore database because it is a solid and reliable combination. We started by planning everything out, brainstorming, creating user stories, sketching out the database schema, and designing the basic look and feel of the app. Then we split up the work. Some of us focused on building the frontend, creating all the different screens and components for the residents and admins. Others worked on the backend, building the API endpoints that handled all the logic and data manipulation. And then we had to connect everything to the database, making sure that all the data was being stored and retrieved correctly. We tested as we went, trying to catch bugs early on, and we were constantly getting feedback from each other and making adjustments.
Honestly, the biggest challenge was the time crunch. Seven days to build a system with this many features was insane. We are talking user authentication with password resets, a personalized dashboard for each resident showing their voucher balance, transaction history, and available products. Then there is the minimart itself, where they can browse products, search and filter by category, add things to a cart, and see their order status. Plus, a whole task system where they can view available tasks, submit proof of completion, and track their progress. And that is just the resident side. The admin side needed a dashboard with key metrics, user management tools, voucher management, product request approvals, inventory tracking, and reporting features. It was a lot. We had to be ruthless about prioritizing features, working practically around the clock, and quickly troubleshooting any problems that came up. We definitely did not get as much sleep as we should have. There were moments where we had database connection issues, or the API was not behaving, or the frontend was doing something weird, and we just had to figure it out on the fly. And because of the time limit, we could not test everything as thoroughly as we wanted to.
Despite all of that, we were really proud of what we managed to create in such a short time. We built a working prototype that addressed the core needs of MWH. We learned an incredible amount about web development, teamwork, and how important it is to design with the user in mind. This hackathon was an experience we will not forget, and we are really hoping that our project can be developed further and make a real, positive impact on the lives of the residents at Muhammadiyah Welfare Home. It felt good to build something that could potentially do some good in the world.
Log in or sign up for Devpost to join the conversation.