Web Minimart

Minimart Home Page
Minimart Products Page

Inspiration

After analysing the beneficiaries, we discovered that Muhammadiyah Welfare Home already has an incentive system in place to reward positive habits and actions. Building on this foundation, we aim to digitalise the system to streamline the Minimart's operations while leveraging it to encourage other desirable outcomes.

By utilising the digital currency ecosystem of points, we aspire to teach residents financial literacy, empowering them to make informed and independent financial decisions.

What it does

In addition to the Minimart system, we have developed a financial ecosystem designed to help residents grasp two key concepts: savings and auctioning.

These mechanisms provide opportunities for residents to earn additional points while fostering financial independence in a safe and controlled environment, empowering them to make informed financial decisions.

How we built it

We began by utilising the Vite React template to kickstart our project. React and JavaScript were used to develop the code for the web pages and we created reusable components to streamline the development process.

To enhance the design and styling of our web pages, we installed Material UI node modules and integrated them into the project.

Additionally, we set up a Supabase database to serve as the backend for our web application and established a direct connection between the database and React using appropriate node modules.

Challenges we ran into

We started this project as complete beginners, facing a steep learning curve with limited time. Significant hours were spent learning the required software, leaving some desired features unimplemented.

We encountered numerous bugs during development. For instance, the website would log out upon refreshing due to missing cookie implementation, which we resolved by learning how to integrate cookies. Configuring the .env file also proved challenging; we initially used node modules, leading to errors and accidentally leaking our Supabase API key (since reset). After extensive troubleshooting, including using Stack Overflow, we successfully configured .env using Vite.

Deploying the web app via GitHub Pages was another hurdle. Early deployments only displayed the README file due to incorrect file directories. Through trial and error, we resolved this issue and completed the deployment.

These challenges taught us the value of resourcefulness and the importance of leveraging diverse sources like forums to build on the knowledge of others.

Accomplishments that we're proud of

This was our first experience participating in a hackathon and creating a fully functional web application, making it feel like a significant achievement to complete the project successfully.

We are especially proud of our idea. By understanding the needs of our beneficiary, we aimed to create something impactful, which is to incorporate financial literacy to empower the residents in a meaningful way.

What we learned

Through exploring various sources and forums, we gained valuable knowledge about the fundamentals of web development. The journey was far from easy, marked by numerous failures, but we persevered and grew through each challenge.

What's next for KELIX

We plan to implement additional features, such as a leaderboard, to tap into users’ natural competitive instincts and provide a way to track their progress.

Additionally, we aim to introduce more financial features, such as investments. Research indicates that demo trading can help build the confidence of first-time traders, making it a valuable addition to our platform.