H4G 2025 Team YFZ

A gamified minimarket system with questing elements

Comment

Inspiration

We were inspired by the opportunity to contribute to a meaningful cause that directly benefits a welfare home. The project gave us the chance to use our technical expertise to improve the lives of individuals in need. It reminded us of the power of technology to bridge gaps and create systems that simplify daily operations for both users and administrators.

What it does

Our web-based Minimart and Voucher System is designed to serve the welfare home audience, particularly the boys at Muhammadiyah Welfare Home. At its core, the system offers a gamified experience for earning and spending vouchers, making it more engaging and motivating for the residents.

How we built it

  1. Frontend

We used Next.js to build a dynamic and responsive interface, paired with TailwindCSS for rapid UI styling. Redux manages the global state across different pages and components, ensuring a predictable and maintainable architecture.

  1. Backend

Our backend is powered by Flask, providing a lightweight yet robust environment for API handling and business logic. We chose PostgreSQL for data storage, leveraging its reliability, scalability, and strong community support.

  1. Integration

The frontend communicates with the backend through RESTful APIs, allowing for clean and consistent data exchange. This approach ensures seamless connectivity between the two layers, facilitating a smooth user experience for both residents and administrators.

Challenges we ran into

  1. Time Constraints

Balancing a tight timeline with the need to implement numerous features from the problem statement was challenging. Prioritizing essential functionality while delivering a polished experience demanded clear planning and consistent communication.

  1. Dual Perspectives

Designing for both users (residents) and admins (MWH staff) required iterative refinements. It was crucial to keep the interface intuitive for residents while ensuring that admins had all the necessary tools at their disposal.

  1. State Management

Integrating Redux for application-wide state tracking introduced complexity. We needed to maintain a clear structure, ensure data consistency across components, and handle edge cases to prevent state synchronization issues.

  1. Backend Integration

Ensuring efficient API communication between the Next.js frontend and Flask backend introduced challenges in debugging and performance optimization. We had to carefully manage request/response handling to provide a smooth experience for end-users.

What we learned

  1. Communication

Collaborating as a team underscored the importance of clear communication to keep everyone aligned on ideas and approaches.

  1. Technical Skills

We expanded our proficiency in frontend and backend development, successfully integrating modern tools like Next.js, Redux, Flask, and PostgreSQL. Balancing design, performance, and functionality taught us how to optimize user experience without compromising on efficiency.

  1. Design Thinking

We improved our ability to empathize with both end-users (residents) and admins, creating a more intuitive and goal-oriented platform. Iterative feedback loops ensured our final product effectively addressed real-world constraints and requirements.

What's next for H4G 2025 Team YFZ

  1. Auction System

We plan to implement a bidding feature where residents can bid using their voucher points, introducing a fun, competitive element to the Minimart.

  1. XP & Customization

An experience points (XP) system will reward user engagement, enabling residents to level up and unlock new customization options for their profiles.

  1. Achievements & Leaderboard

We aim to implement achievement badges and a leaderboard, letting residents showcase their accomplishments and fostering a sense of community and healthy competition.

Built With

Share this project:

Updates