MWH Minimart and Voucher System

Minimart system for residents to purchase items
User Dashboard
Cart system for users to see items selected
Inventory management system for admins to view and re-stock items
Voucher task request page for admins to view, approve and reject task completions
User management system for admins to manage both user and admin accounts
Sign-in page for users and admins

Inspiration

The Muhammadiyah Welfare Home (MWH) serves as a beacon of hope for boys in need of care and support, fostering a nurturing environment for their personal growth. We were inspired by their mission and wanted to create a solution that not only empowers the residents but also helps streamline administrative tasks for the staff. Our goal was to design a system that could improve the residents' daily lives while fostering independence and a sense of achievement.

What it does

The MWH Minimart and Voucher System is a web-based platform that allows residents to:

Request products from a virtual minimart.
Earn and manage vouchers by completing tasks.
Track their transaction history and view available inventory.

For administrators, the system provides tools to:

Manage residents' accounts and approve or reject requests.
Track and update inventory levels.
Generate detailed reports on requests, inventory.

How we built it

The system was developed using the following technologies:

Frontend: React.js
Backend: Node.js with Express.js
Database: PostgreSQL
Authentication: JSON Web Tokens (JWT) with bcrypt
Containerisation: Docker

Development Process:

Requirement Gathering: Gathered information from the recorded session and slide deck
Design: Created architectural diagrams for the overall project structure and drew mockups for the user interface.
Implementation: Developed the system concurrently with multiple team members

Challenges we ran into

Balancing Usability and Functionality: Designing a system that is well-suited to our target users (residents and admins).
Time Constraints: Developing a full-stack web application within a limited timeframe was a challenging yet interesting experience.

Accomplishments that we're proud of

User-Centric Design: Creating a system that is easy to use for residents while meeting the operational needs of admins.

What we learned

Full-Stack Development: Gaining hands-on experience in integrating a frontend React application with a backend Node.js API and PostgreSQL database.
Problem-Solving and Time Management: Creating a product that helps an organisation and a group of users within the limited time provided required us to plan our time properly and think of creative solutions to problems.

What's next for MWH Minimart and Voucher System

Mobile App: Provide mobile access for residents and admins.
Integration with Education: Tie the system to educational goals where residents can earn vouchers through progress in school subjects or life skills.