1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
# TOTAL EXPENSE
## Introduction
This is my final project for Harvard University's online course CS50x.
I created Total Expense in December 2021 and this repo only serves as a "historical archive".
All code as well as the content of the Readme below are in their original state, only this introduction and the License was added.
#### Video Demo: (https://youtu.be/gh2tL8mPyMc)
pw54fegood1
#### Description:
Total Expense is a web-based financial assistant.
##### Purpose:
The original idea was to create an app that allows users to set their individual budget, register each new expense and review past expenses.
Later on another feature was added: a simple web scraper to search for cheap sales offers online.
Overall the goal of the app is to provide a useful tool to anybody who wants to
- monitor their spending habits
- cut down on unnecessary or excessive expenses
- keep track of their available budget
- avoid sliding into debt
- shift the amount of money spent on a certain area towards another one
- consider buying cheaper second-hand products for the sake of saving money and sustainability
##### Components:
A user has to register a new account and/or log in first in order to use the app.
Once registered, users are allowed to change their passwords again in the "Account" section.
After signing in, the user can set their budget. All expenses registered thereafter will be deducted from the budget.
However, setting a budget is optional, expenses can be submitted regardless.
In that case, the budget balance will simply show the total amount of money spent.
To register a new expense, the user has to use a form where they can name the specific expense.
Naming the expense is optional, but the user is required to give the amount of money spent,
the date of the expense as well to choose an overall category for it.
Once an expense is submitted, the user can review it and all previous (and following) expenses in the Spending History section.
A table displays the name of the expense ("Unspecified" if left blank by the user), category, amount and date.
The user can also use a search field combined with radio buttons to filter for something specific,
like a certain date, or to display all entries from one category, etc.
Finally, a pie chart on the main page will display the total amount of expenses in each category,
useful for comparisons between e.g. how much is spent on hobbies vs. investment.
Last but not least, the web scraping feature called "Bargain Finder" allows the user to search for any item
and receive a list of the cheapest offers for that item on Ebay.com.
These offers are sorted by cheapest first, each offering the exact name of the offer on Ebay,
the current price and a link that takes the user directly to the respective page.
##### The Code:
The app relies on Python, SQL and JavaScript to run, while the view-component was styled with HTML & CSS, utilizing Jinja templates.
Essential components of the code are Flask as web framework and Beautiful Soup for the web scraping/crawling.
Two JavaScript files handle matters of visualizing data for the user.
First, piechart.js takes care of the implementation of the pie chart, as well as dynamically
changing the background of the budget display, depending on the user going into debt or not.
Second, filter.js implements the filter-search option for the table in history.html.
application.py contains all the main code for users registering, logging in & logging out,
passing data between the database (spending.db) and the webpage.
spending.db contains two tables, one for the users storing their username, hashed password and cash/budget.
The second table stores all expenses for each individual user.
Table data meant for display is integerated into the HTML mostly by Jinja loops.
helpers.py contains helper functions, e.g. for rendering an apology message in case of errors
and for handling the log-in requirement for most pages.
It also contains the function for web scraping which gets called in application.py's "/bargain" route.
##### Sources:
Apart from the knowledge gained from CS50's lectures, shorts, labs and problem sets - especially pset9 "finance" - the following sources were used:
- Flask documentation: (https://flask.palletsprojects.com/en/2.0.x/)
- Beautiful Soup documentation: (https://www.crummy.com/software/BeautifulSoup/bs4/doc/)
- Chart.js documentation: (https://www.chartjs.org/docs/latest/)
- W3 Schools Tutorials, especially on JavaScript: (https://www.w3schools.com/js/default.asp)
- Corey Schafer's "Python Tutorial: Web Scraping with BeautifulSoup and Requests": (https://www.youtube.com/watch?v=ng2o98k983k)
- Tech with Tim's "Beautiful Soup 4 Tutorial" Playlist: (https://www.youtube.com/watch?v=gRLHr664tXA&list=PLzMcBGfZo4-lSq2IDrA6vpZEV92AmQfJK)
- Stack Overflow for reading up on smaller issues encountered here and there during coding
|
