Hybrid Coders

Hack for Good: MWH Minimart and Voucher System

Inspiration

Our inspiration for this project stemmed from a shared desire to make a tangible difference in the lives of the residents at Muhammadiyah Welfare Home (MWH). Recognizing the importance of fostering independence and providing a supportive environment for these boys, we aimed to create a solution that would empower them while streamlining the operations of the minimart system. The potential to contribute to a cause that promotes growth and self-sufficiency was a driving force behind our efforts.

What We Learned

Throughout the hackathon, we gained valuable insights into the complexities of building systems that cater to both administrative needs and user engagement. We deepened our understanding of user experience design, particularly in creating intuitive interfaces that are accessible and easy to navigate for all users. Additionally, we learned how critical robust backend systems are in ensuring smooth, secure, and efficient operations.

How We Built This

We built the MWH Minimart and Voucher System using React with TypeScript for the application, which allowed us to develop a scalable and maintainable front-end. Tailwind CSS and Shadcn were used for styling, providing us with a utility-first approach to design and making it easier to create a cohesive and responsive user interface. We utilised Google Firebase as our backend, tapping on features such as Firestore, Storage, and Authentication to support a myriad of backend features. We also hosted the application on Vercel, which offered a seamless deployment process and ensured high performance with minimal configuration. This combination of tools and technologies enabled us to deliver a modern, efficient, and visually appealing system.

Challenges We Faced

Our team encountered several challenges during the development process. One of the primary hurdles was dealing with bugs that arose as we integrated different components of the system. Debugging and ensuring the system's stability required a significant amount of time and collaborative effort. Additionally, generating ideas for additional features to enhance the system's user-friendliness and interactivity was challenging. We aimed to strike a balance between innovative functionalities and maintaining simplicity and usability for the residents and staff.

Despite these challenges, our team remained committed to delivering a solution that aligns with MWH's mission, making a positive impact on the lives of its residents.

To Take Note

After every action made by the user, give the website 1-3s to make its calls to the backend (i.e. do not spam the buttons / reload the page within these time period)! Most actions will trigger a toast, so a good gauge would be to let the toasts disappear first on their own before reloading the page.