A Web Application to Improve Financial Literacy
The primary objective of this project was to develop a web application to improve the financial literacy of its users. Financial literacy is a significant societal issue in the UK and around the world.
This was achieved through features including a budgeting tool, finance tool, stock search and a financial academy.
Wireframes & Style Tile
Wireframes and a style tile were created in Figma to provide representations of the web pages and inform font and colour choice. The brand name 'Moneywise' was reflected to encompass the financial and educational aspects of the application.
Features
Moneywise is a fully fledged solution for managing budgeting, finance, investing and improving financial literacy. The core features of the application include:
- Dashboard - Get a quick overview of financial health.
- Budgeting Tool - Input income and outgoings to calculate remaining income and provide insights on spending.
- Finance Tool - Get an overview of financial net worth and see a complete view of all assets.
- Stock search API - Search stock exchange rate data for 30+ Countries and 25,000+ Stocks.
- Financial Academy - Improve financial literacy and earn points and badges by taking lessons.
- Chartjs - Interactive and responsive charts throughout the application are powered by Chartjs.
Dark Mode
The application offers full support for dark mode with JavaScript's local storage being used to remember the user's preferences.
The Material Design guidelines were followed to ensure dark mode is accessible and useful, using grey to show elevation and adding colour accents.
Additionally, the application featured a collapsable sidebar to expand the main content area and allow for distraction free browsing.
