manuel12 / django-expense-tracker

Expense Tracker is application that can help you track and list expenses, and also analyze charts and statistics about them.

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.

Desktop

Mobile

Usage

Adding Expenses

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.

Adding Monthly Budget

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.

Checking Charts & Statistics

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.

Credentials

username: testuser1
password: testpass1

Installation

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/

(NEW) React Front-end

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.

How to install the Front-end

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/.

How to make Front-end updates

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.

Installation - Cypress

For installing Cypress go to the e2e directory and run:

npm install

Tests

Type	Location
ui	e2e/cypress/integration/ui-tests
visual	e2e/cypress/integration/visual-tests
unit	expenses/tests

Running tests

Unit tests

For running the tests run:

python manage.py test

E2E tests

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

Uses

• Django.
• Postgres.
• Bootstrap.
• Chart.js.
• Cypress.

Features

• Expense list.
• Expense charts.
• Monthly budget bar.
• Statistics table.
• Authentication.
• Form validation.
• Pagination.
• UI tests.
• Visual tests.
• Unit tests.

django-expense-tracker's Issues

Application Page Not Served

Describe the bug
I tried visiting the application page and it wasn't served

To Reproduce
Steps to reproduce the behavior:

1. Go to The App Page
2. You would see this Application error
   An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
   heroku logs --tail

Expected behavior
The page should be served

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Brave
• Version [e.g. 22]

Fix "fetching * chart data failed"

When creating a new user without any expenses and visiting either Home or Charts & Statistics page we will get the following console errors:

The reason being that the front-end will make request to the back-end asking for expenses and charts data(which also use expenses data), since the user is new and has no expenses these functions return with errors.

Note: regardless of the fact the user has no expenses at this point also check since the error returned by these api calls is 401 unauthorized, so issue might be related to accessToken.

Fix visual tests so they all pass.

At the moment when running visual tests only 2 tests run and the rest are skipped. Investigate why and fix this:

Fix cannot create an expense using date provided by app issue.

When trying to create an expense with the provided date, say 8/14/2023, after filling out all the other required fields (amount, category, content and source) and clicking Save the app shows "Enter a valid date/time." error.

Re-create homepage.html in React.

Create a react page that has the same html structure as templates/homepage.html.

Fix "webpack compiled with 1 error" issue when starting react server.

Issues log:

"Starting the development server...
Failed to compile.

Module not found: Error: Can't resolve 'C:\Users\jrade\Desktop\Code\JS\Contributions#TEMP_REPOS\django-expense-tracker\front-end\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'C:\Users\jrade\Desktop\Code\JS\Contributions#TEMP_REPOS\django-expense-tracker\front-end'
ERROR in Module not found: Error: Can't resolve 'C:\Users\jrade\Desktop\Code\JS\Contributions#TEMP_REPOS\django-expense-tracker\front-end\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'C:\Users\jrade\Desktop\Code\JS\Contributions#TEMP_REPOS\django-expense-tracker\front-end'

webpack compiled with 1 error"

Happens after installing front-end folder packages and running npm run start.

Feedback for this app.

I'm looking to improve this expense tracker app, whether in design, UI, UX, functionality or performance.
Please let me know if anything can be changed or improved :)

Install react-chart.js, if exists.

This will be needed in order to render the charts on the current template front-end.

All that needs to be added here the is the chart.js package to package.json.

Re-create base.html page in React.

Create a page that has the same html structure of templates/base.html.

Make it sure it has a children section where base.html had a {% block content %} {% endblock content %} section.

Re-create chart.html in react

Create a react page that has the same html structure as templates/chart.html.

Fix cypress installation requiring to run ```npm install --legacy-peer-deps```

When installing cypress by running npm install there are some dependency errors shown:

In order to being able to currently install cypress is necessary to run npm install --legacy-peer-deps. Fix this so it's enough with running npm install for installing cypress.

Update to a React front-end.

Is your feature request related to a problem? Please describe.
The current template-based and bootstrap powered front-end could be switch to React to increase modularization and reuse of code.

Describe the solution you'd like
Do without the django templates and have a full react front-end.

Additional context
Will serve backend data using API functions rather than the standard django views.

Install react-bootstrap package.

This will be needed as it is a dependency in the current template front-end.

All that needs to be added here the is the react-bootstrap package to package.json.