Expense Tracker is application that can help you track and list expenses, and also analyze charts and statistics about them.
The project uses authentication and CRUD operations to create, read, update and delete expenses assigned to a user.
The project also performs operations on expenses in order deliver monthly and daily expense averages; current vs last month expense percentages; biggest and smallest expenses by category; and more.
You can add an expense by clicking the "Add Expense" button, filling and submitting the expense form.
Once you've added the expense it will be displayed on the total expenses element, the homepage's line chart and will also be listed below on the expenses table.
Note:
Line chart will only appear if you have 2 or more expenses added.
You can add a monthly budget by clicking the Add Monthly Budget button, filling and submitting the form.
Once you've added it the budget UI will be displayed, including the budget progress bar, the monthly budget next to the expenses of the current month and the edit and delete buttons.
Finally you can access charts and statistics about your expenses by navigating to the Charts & Statistics section.
Here you can find expense charts with amounts grouped by month and week, as well as total and monthly expenses grouped by categories.
You can find your current monthly expenses (with controls for editing or deleting budget here too), as well as last month expenses and statistics like monthly expense average, daily expense average, current vs last month expense percetange difference and more.
username: testuser1
password: testpass1
For installing the Django application clone the repository and cd inside the directory
cd django-expense-tracker
And run:
pipenv install
This will install the virtual environments and all dependencies.
Now start the virtual environment shell:
pipenv shell
Run migrations:
python manage.py makemigrations
python manage.py migrate
Create superuser:
python manage.py createsuperuser
Now you can start server...
python manage.py runserver
...and visit http://localhost:8000/
The application now includes an embedded react front-end by default, in place of the old template-based front-end. The template files and older django views, urls and other files are still included in the repository, but this is temporary. In the future those files will be removed from the repo to leave only the new react-based front-end.
Note:
Because the current front-end is directly embedded in django (which means django settings are looking for the templates directory in the front-end's build/ directory, and also that django looks for static files in such build/ directory), this means you only need to start one server to run both the backend and the front-end of
the application. The draw back of this is that, unlike when you work on the server specific to your react application (generally http://localhost:3000/), where you can see changes done to the application being displayed on the screen as soon as you save any changed file, now it is a bit more complicated.
First of all you have to install the front-end packages. In case you want to start the react server in order to see changes to the front-end faster just need to cd to the front-end/ directory and run:
npm install --legacy-peer-deps
Once that's installed, you can run:
npm run start
in order to start the react server on http://localhost:3000/.
So basically whenever you want to see your changes to the front-end displayed on the browser(without starting the react server and using only the django server), you have to save your changed files, cd to the front-end/ directory and run:
npm run build
on the front-end directory in order to update the build/ directory with your latest changes.
After that you need to cd to the root of the repository (where manage.py and this README file are located), and run:
python manage.py collectstatic
Then when asked by the prompt type 'yes' to overwrite existing staticfiles.
After that run:
python manage.py runserver
and you should see the changes you added previously now displayed on the page.
For installing Cypress go to the e2e directory and run:
npm install
| Type | Location |
|---|---|
| ui | e2e/cypress/integration/ui-tests |
| visual | e2e/cypress/integration/visual-tests |
| unit | expenses/tests |
For running the tests run:
python manage.py test
For running the tests run:
npm run test
For running the tests on headless mode run:
npm run test:headless
For opening cypress client run:
npm run test:open
- Django.
- Postgres.
- Bootstrap.
- Chart.js.
- Cypress.
- Expense list.
- Expense charts.
- Monthly budget bar.
- Statistics table.
- Authentication.
- Form validation.
- Pagination.
- UI tests.
- Visual tests.
- Unit tests.