moneyMind

Inspiration

Sponsors - the sponsor talks at the beginning of the hackathon were instrumental in setting up moneyMind's vision. We found CAPGEMINI's challenge to create the best financial hack to be extremely relevant considering the cost of living crisis - with lower real incomes impacting almost every individual in the current UK economy the people definitely need a solution. But prior to their talk, we also listened to and absorbed the BJSS and BCS talks. Their passion for technology’s potential to be a tool to improve wellbeing and create a positive social impact really resonated with the whole team. So, anchoring ourselves with the sponsors, we decided to do what has never been done before - combining finances with wellness.

What it does

moneyMind is quite a novel concept, in the sense that you wouldn't normally imagine that managing your finances (which can be quite a stressful job) could be combined with improving your wellbeing. In fact, you'd think that opening up your finances might actually be detrimental to your wellbeing. But moneyMind does just that.

When first opening the website, the user is presented with a welcome message and a button inviting them to ‘Setup budget’. The user is then taken to a new page where they are able to input any amount into their budget, and a table splits the money into the categories: rent, utilities, food, transport, leisure, misc and total. Users have the choice of adjusting the amount of money allocated to each category by sliding the toggles on the side of the screen up and down. Another interesting feature is that a set amount is deducted from the ‘total’ that goes towards savings (not featured in the table).

After submitting their budget distribution, the user is taken to their first wellbeing ‘challenge’ where they are forced to recite some positive affirmations that are proven to boost mood and self-image before being allowed to progress to the next part of their financial journey.

Following the wellbeing challenge, they are then prompted to add in as many purchases as they’d like, allocating each purchase to the set category. Then, another challenge, ‘box breathing’ interjects their financial budgeting, complete with an animation that makes it easy to follow the stress relieving exercise.

Finally, the user is invited to view their financial report, beautifully laid out with two pie charts, contrasting the budgeted categories and the user’s actual spending distribution. The bar charts below show the exact monetary value of spending on individual categories, going into negative values whenever they go over budget.

How we built it

We built moneyMind using Replit and React. Replit was a really good choice because it allowed us to communicate and work together really easily, and React was useful because it provided relevant JavaScript frameworks.

Challenges we ran into

Staying awake - Even though we knew a hackathon often means staying up a bit later than usual, one of the main challenges we faced was staying awake to finish work and simultaneously remaining productive. We combatted this by unplugging from laptops from time to time and resting our eyes (we wouldn’t be qualified to make this website if we didn’t look after our own wellbeing!).

Syntax errors - a pesky semicolon took up two hours of our time.

Web development - for some reason, we didn’t use a state management library, so we had to make our own which was difficult and time consuming (and frankly quite unnecessary) so that was definitely something we learnt from.

Accomplishments that we're proud of

MVP completion - We’re really proud of how we took a sensible approach in terms of our ambitions for the project given the limited time frame we had to complete everything. Our unmoveable goal was to complete the Minimum Viable Project (MVP) so that the barebones of the project were definitely there. Of course, we definitely had more ambitious goals too, such as fancy animations and more of a role play gaming style but that is all for the future of our website!

Organisation - Also, our organisation skills were definitely quite impressive. Allocating ourselves roles such as project manager, technology manager and creative director amidst all the programming and designing meant that we stayed on track and checked off each goal one by one. Discord was also really helpful to communicate aspects of design and content that needed to be translated into code.

What we learned

One thing we learnt was that next time we’re definitely going to use a state management library instead of making our own. Also, maybe next time we could be more adventurous by creating an app and being more ambitious with implementing design into coding. But we definitely learnt how it feels to stay up working late on something you’re passionate about and really want to complete, which was definitely an irreplaceable experience.

What's next for moneyMind?

World domination.

Built With

• javascript
• react
• replit