Crafting experience...
10/27/2024
Built At
Jump Start Hackathon
Hosted By
I am a graduate from Imperial College London, I studied Electronic and Information Engineering. And unlike everyone here, I am submitting as a solo contestant. I am very persistent, motivated and passionate about coding and sustainability. I also love solving problems, which brings me on to my idea.
I noticed that as a student and in the working world, I find it hard to understand how to manage my finances and find opportunities to save in this very expensive world. So, I created Money Tree which is a platform which serves to help visualise the distribution of income across different categories: Groceries, Household expenses (things you buy for your home décor for example), Transport, Utilities and Leisure.
The application asks for your budget across all categories and helps them to see where you save more, where you spend more. It connects with a bank account and reads the transactions and uses AI to categorise it. The income and outcome contribute to the size of the branch. Each time the branches changes, a new tree size is calculated. There is a tree, which has branches which are the categories. Every time you save, the branch grows. If you spend more, and keep spending more, the branch dies.
There are a lot of budgeting platforms out there, which show information in a graph based format, but not all people, especially from deprived areas understand graphs. This is where my solution stands out because I provide a unique way for people to see their finances.
To make it fun, the users can connect with other people, like their friends and family, to compare the size of their tree in a fun competition. People with a large tree, can also share tips to other people with smaller tree sizes - this is a feature that I want to implement next but couldn't cause of time constraints and being a solo participant. To further motivate people to use the app and save, is once an individual reaches a certain tree size, a tree will be planted. This also helps to clean the environment.
Backend: node JS with express - localhost.
The frontend connects with the REST API in the backend to query transactions (for now to deploy it, Its all mocked in the frontend however because there's needed for extra configurations which I didn't have time for). The transactions are stored in the backend as a list for now since its small, but I will include an SQL database locally hosted later on.
The frontend is deployed on Netlify and coded in react. Creating the tree was the hardest part, but I used canvas to draw shapes and configure them so that they will look like a tree.
The branches in this code are created by drawing lines at specific angles and lengths from a central point on a canvas. Starting with predefined branch categories like "Home Expenses" and "Utilities," the code calculates an angle and length for each branch based on the category’s growth value, stored in the branchGrowth state. For each branch: Angle Calculation: Each branch is spaced out around the trunk at unique angles for visual separation. Length Calculation: The branch length increases based on the branchGrowth value, giving the appearance of growth. Recursive Branching: For realistic branching, smaller branches are drawn recursively from the ends of main branches, decreasing in thickness and length with each step.
Labels are also drawn at branch tips, and small, randomized leaves are added to the ends of shorter branches for a natural effect.
As an extension, I would like to integrate it with AI, to let the user know about their spending habits and tips for saving. For now, I have what it will look like on the UI with some mock suggestions.
If your team completed something highly complex or technical - this is the place to let it shine. This section is a great way to show how your solution is superior when there are multiple similar solutions. Don't avoid the detail; instead, deep-dive into how it works. You can't guarantee that the judges will ever delve into your code to find these answers for themselves, so it's better to make it unavoidable.
I was a solo contributor, I think I managed my time well for the limited time I had. I had to work really fast and basically grind, it was fun. I also worked on this after 7pm yesterday.
## Challenges The hardest thing was the tree since its very hard to predict where things will go and land. It was also a challenge cause I was solo, so I had to debug my own problems. But at times I didn't know what the MVP was so I had to spend some time planning and I learned its not always about how complex the code is, its about how unique the idea is and how it can help people, which is what I am passionate about as I mentioned earlier.
What are you proud of?
The entire project and the fact that I still stayed and submitted. And creating that tree and having a really good UI in the time that I had.
I would partner up with companies and them offer a premium plan to gain insights to the offers such as discounts and offers that the partner companies give.
I would definitely integrate AI, connect with an actual bank (I mocked the transaction data). I would also try and make the tree look realistic and add the option where people can give advice to others.