Financial Planner WebAPI

A Visual Studio Project using React and ASP.NET Core with SQL database for storage. The functionality of this will be a financial tracker aimed at students to be able to monitor and track spending.

Figma to design

https://www.figma.com/file/gOmGLcGKWn86EE00v0cGey/Finance-Planner?type=design&node-id=0%3A1&mode=design&t=sJycTjPZtnJX8D5M-1

The secondary objective of this project is to learn and develop my front-end skills and frameworks. I have chosen to work with React.

Technologies used

• ASP.NET Core
• Microsoft SQL Server with Entity Framework
• React Framework
• Bcrypt Framework
• Newtonsoft
• React bootstrap
• date-fns

Features and Milestones

Features added

• Account creation
• Login functionality
• Create budget
• Add direct debits to budgets
• View all budgets
• Add purchases to budgets
• Calculate weekly budget
• Calculate weekly budget
• Create first budget upon account creation

Features to be added

• Initial desirable functionality implemented

Improvements to be made

• Implement pagination for API and UI
• Implement LINQ's for more efficent retrieval of data from database

Future updates

• Option to aid in calculating and how much you can save
• Connect to bank in future

Desktop UI Screenshots

Registraion page

Login option

Register option

Create Budget page

Budget details option

Direct debit option

Display Budgets

Display Budget - Current week

Display Budget - All Purchases

Edit Budget

Edit Purchase

Display Budget - Direct Debits

Edit Direct Debit

Page Design Mockups

Registraion page

Login option

Register option

Create Budget page

Budget details option

Direct debit option

Main Account page