Check out the project live here!
A full stack budgeting application that manages users and their transactions.
- React (for the frontend framework)
- Typescript (for the Javascript syntax)
- CSS (for the styling)
- Python (for the server side language)
- Django (for the server side framework)
- SQLite (for the database)
- Adding a transaction
- Deleting a transaction
- Showing your balance
- Pie Charts that show
- Income vs Expenses
- Expense Category Comparison
- A budget of what you want to spend on each category
- Hot swap sections to customise the user interface
- User support with login, logout and register functionality
- Storing users tokens locally to remove the need to login every time
- Can sign in using your Google Account
I will continue to expand the functionality in the future.
(To get it running entirely locally you will need to change the baseUrl in frontend/src/Constants.ts to 127.0.0.1:8000 otherwise the frontend will connect to the remote API)
- Clone the project to your machine
[git clone https://github.com/joshuarichards001/budgeting-web-app.git] - Navigate into the directory
[cd budgeting-web-app] - Navigate into the backend directory
[cd backend] - Install virtualenv if you haven't already
[pip install virtualenv] - Create the virtual environment
[virtualenv env] - Activate the virtual environment
[source env/bin/activate] - Install the dependencies
[pip install -r requirements.txt] - Navigate into the frontend directory
[cd ../frontend] - Install the dependencies
[npm install]
Then to run this application you will need to perform the following in two separate terminals:
- In the first terminal go into backend
[cd backend]and run[python3 manage.py runserver] - In the second terminal go into frontend
[cd frontend]and run[npm start]
Here is the login page that a new user is greeted with.
Here is the dashboard that is the core page of the application
A showcase of the "Hot swap sections" functionality
