Team ZAJJ | Hack 4 Good 2025

Code:https://github.com/jonushzw/hack4good

Link to Deployment: https://hack4good-khaki.vercel.app/

Inspiration

The Muhammadiyah Welfare Home’s need for a streamlined minimart and voucher management system inspired us to create a solution that empowers residents while simplifying administrative processes. We wanted to build a system that not only addresses operational challenges but also fosters independence and inclusivity among the residents.

What it does

Our web application provides:

For Residents:
- A user-friendly dashboard to view voucher balances, transaction history, and available products.
- The ability to request items or preorder out-of-stock products.
- Secure login with authentication for personalised access.
For Admins:
- Robust tools to manage users, approve/reject product requests, and track transactions.
- Exportable reports for easy record-keeping.
- Inventory management with detailed audit logs.

This system optimizes operations while ensuring a secure and seamless experience for all users.

How we built it

Tech Stack

Front-End: React.js, TypeScript, Next.js
Back-End: Next.js, Clerk (Authentication), Supabase + PostgreSQL (Database)
Version Control: GitHub

Development Process

Requirement Gathering: Identified key functionalities for residents and admins.
Design:
- Created wireframes and mockups for intuitive navigation.
- Designed a database schema for managing users, vouchers, transactions, and inventory.
Development:
- Implemented front-end interfaces with React.js and TypeScript.
- Built a back-end system using Next.js and Supabase for secure data management.
- Integrated authentication using Clerk for secure user access.
Deployment:
- Deployed on Vercel for accessibility and real-time testing.
- Conducted rigorous testing to ensure security and functionality.

Challenges we ran into

Ensuring secure and scalable communication between the front-end and back-end.
Designing an intuitive yet simple interface for diverse user roles with varying tech-savviness.
Integrating robust authentication and authorization using Clerk.
Managing time effectively to build a complete, feature-rich prototype within the hackathon timeframe.

Accomplishments that we're proud of

Successfully deploying a functional prototype that directly addresses the problem statement.
Implementing a secure and user-friendly system for both residents and administrators.
Building a scalable architecture ready for future enhancements like auction features.

What we learned

How to effectively collaborate as a team in a time-sensitive environment.
Advanced integration of front-end and back-end technologies, especially with Next.js and Supabase.
The importance of user-centered design in addressing real-world challenges.
Leveraging different members' strengths to achieve the desired outcome.

What's next for Hack4Good Team ZAJJ

Feature Expansion: Add auction functionality for residents to bid on items using vouchers.
Mobile Compatibility: Create a mobile-optimised version of the system for better accessibility.
Analytics Dashboard: Implement advanced analytics for admins to monitor trends and make data-driven decisions.
Deployment Support: Work with Muhammadiyah Welfare Home to deploy and refine the system based on user feedback.

We aim to continuously improve the system, ensuring it delivers lasting impact for MWH and its residents.