The Bucket Calculator App is based on Dan Lok’s 5 Bucket Money Management Concept.
His concept was designed to teach the user the habit of managing money as a long term solution. This is done by breaking the salary into 5 different buckets; Expenses, Emergency, Investment, Learning and Fun. The suggestion is to commit 60% of our salary to the Expenses bucket and 10% in each of the others. However, these percentages can be adjusted to suit bigger and smaller salaries.
Whilst sharing ideas and starting to brainstorm, we tried to take into consideration the skills and strengths of each team member and work on a project where everyone can get involved. We decided to build a front-end app which meant the majority of the team could contribute.
Using Dan Lok’s concept we built a calculator where the user could find out how much money would go in each bucket based on their salary.
We decided to the it a bit further and create a "Buckets Breakdown" calculator where the user can have a better tracking of their expenses. Once the user fills the form a chart will appear and the user can compare how their salary is distributed in the 5 buckets compared to Dan Lok's concept.
- 5 Bucket Calculator
- To be able to use the site on different screen sizes (responsiveness).
- To see an easy to read breakdown of my spending (chart.JS)
- To use an accessible site that accounts for all users (colour-blindness, screen readers).
- I want to be able to customize the label names on the charts.
- I want to see a comparison of my spending / saving compared to the recommendations (5 Bucket Principle).
- I want to be able to save the charts to view later (download as PDF).
- I want to be able to use this site in a range of countries (currency converter API)
- I want to be able to access guides on saving and spending less.
The colour palette for this project is based on the purple colour scheme. The purple colour is considered to be a colour of creativity and imagination and complements beautifully the project idea.
Background colour #f2f2fc Ghost White
Hero background color #ffffff White
Text colour #332a7c Picotee Blue
Footer background #d3d3f1 and #a9a9d7 Light Periwinkle and Blue Bell
The fonts used are Open Sans and Playfair Display which really complement eachother and give the project professional look.
Creative Fabrica The images used are from Creative Fabrica and come with license for commercial use.
- The home page consist of image which visually represents the main idea behind this project. Presenting the information in a more visual way helps the user the understand the concept easier. This is then followed by section which goes into a bit more detail about the concept followed by a button which when clicked will take the user to the calculator page.
- The calculator page has 3 sections:
- The 5 Bucket Calculator
Users can enter their salary and click calculate to find out how much money has to go in each bucket based on Dan Lok's theory - The Buckets Breakdown
Users can enter all their regular payments to track how their money is spend. Once they click calculate they will be presented with a chart of their own buckets compared to Lok's theory.
- The Currency Convertor
- The 5 Bucket Calculator
- The Tips page consist of carefully selected and presented information for the user for better money management. On the left there is a collapsible list with 5 tips followed by image representing saving. On the right there is more information about credit card usage.
- The About page was created to provide more information to the user about the Five Bucket Method. It also has a button which takes the user to the calculator page.
- The Team page consist of information about the team who created the project and links to each member's LinkedIn and GitHub.
-
- Users have the option to export and download a pdf file of their data after using the calculator.
-
- Users have the option to create an account where they can easily save and adjust their details.
-
- Once the user has used the calculator their will have they option to automatically convert all figures to a different currency. As we did not have the time to add this functionality on the finished app, we decided to add a separate currency convertor bellow the calculators.
-
- Users have the option to link their banking app and every time they make a transaction it is automatically added to their Buckets Breakdown. This makes it easier for users to keep a track of all speedings without having to manually enter it.
- GitHub - GithHub is the hosting site used to store the source code for the Website and Git Pages is used for the deployment of the live site.
- Git was used as version control software to commit and push code to the GitHub repository where the source code is stored.
- Google Chrome Developer Tools was used as a testing tool during the development of the application.
- Google Fonts was used to import the fonts Open Sans and Playfair Display
- Font Awesome was used for icons.
- Balsamiq Wireframes was used to create the wireframes for the mobile version of the application.
- Photoshop was used to create the desktop mockups and resize and export the images for web.
- Coolors.co was used to display the colour palette
- Favicon.io was used to create the favicon for the website.
- Exchangerates APIwas used for the currency converter
- HTML - used to build the main structure of the website.
- CSS - custom written CSS was used as an addition to Materialize.
- Materialize Framework - used throughout the website for layout and styling.
- JavaScript - was used to create functionality for the calculator.
- Jquery
The website is deployed using GitHub pages. It automatically updates new commits as they are pushed to the repository.
- Login to my GitHub account
- Open the repository
- Click on Settings
- Scroll down and click on the Pages tab located on the left of the screen
- Under 'Source' select the main branch
- Wait for the page to refresh
- Scroll down to and locate the website link under the 'GitHub Pages' section
- Open the repository
- Click the Code button above the list of files
- Click on GitHub CLI and click on the 'copy' button to copy the URL link
- Open GitPod
- Type 'git clone' and paste the URL link
Find more here
- CSS Tricks was used for inspiration for the hover effect on the nav.
- CodeVille Currency Converter
- FavIcon
- The Hackathon Team - Big thank you for making this Hackathon happen. It was great experience.