Note: This repo is for the Front End Portion of Budget Planner (i.e. the React portion). For the Back End portion (i.e. the PostgreSQL and Express portion), kindly refer to https://github.com/damienteo/WDI-Capstone-Backend-Budget-Planner

WDI-Capstone-Project-Budget-Planner

Written with JavaScript and HTML, this project was done as my Capstone project under General Assembly Singapore's Web Development Immersive.

In summary, the application is meant as a solution to help users spend only within a budget. The budget is proposed via their own savings goals and monthly income. A responsive chart will also help them visualise the impact of their spending, and any changes in their goals.

Altogether, the application utilises Node.js, Express, React.js, and PostgreSQL. The front-end of the app is styled with Material UI, while Chart.js is used for presenting the charts.

This project was also bootstrapped with Create React App.

About

Budget Planner is about visualising your financial future.
Problems:
Many times, we know that we need to save. We know how to calculate how much we need to save. However, these plans do not work when we are unable to visualise our future financial status. It is also troublesome for us to keep recalculating an ideal budget when we need to change one or more variables.
Solution:
Budget Planner will show you how your over-spending, or under-spending, affects your budget for the rest of the year. By doing so, you will be that much more careful about your spending. Ideally, when the user is also able to see which areas in which he had been over-spending, he will also be able to control his spending accordingly.

Deliverables

• A full-stack and complete application with a front-end and a back-end
• An interactive front-end (React)
• Usage of a a database (PostgreSQL)
• Application is deployed online here

Technical Specifications

• Project is written mainly in JavaScript
• Node.js is used as the server environment
• React.js is used as the front-end allowing the components of the page to 'react' according to the actions of the user
• PostgreSQL is used for database management
• Express is used for the Back-End portion to work as an API to provide info to the Front-End
• This application is styled with Material UI
• Chart.js is used for any charts shown in this application

Pending

• Re-factoring code
• Expanding functionality of the back-end
• Exploring other ways for the user to add expenses