GitHub - Link to the GitHub repo where the project's code is located
GitHub Pages - Public hosting of the project
For more technical information, please see the README.md on the GitHub Repository.
Svelte on its own does not handle any routing. To compensate, I have a small amount of state management.
The buttons for "enter expense" and "track expenses" will simply update the state of the page to show their respective information. It uses the {#IF} block in svelte to decide what module is currently shown.
At the top of the page is a header bar. This contains a home button, as well as debug info when it's enabled. The home button simply sets the page number to 0, returning to the main page.
When entering a receipt, if the receipt has no total then it is considered invalid. This causes the green submit button to be disabled.
Each item gets its own row, where you can give it a name, cost, quantity and category. The last item cannot be deleted.
Adding items to the receipt is as simple as clicking "add item."
When receipt data is added, it's added to an array as a JSON object. This object is formatted as follows (with example data):
{
"expenseType": "receipt",
"storeName": "Example Store",
"taxRate": 8.5,
"items": [
{ "name": "Item A", "cost": 3.5, "quantity": 2, "category": "Food" },
{ "name": "Item B", "cost": 6, "quantity": 1, "category": "Personal" }
],
"subtotal": 7.0,
"total": 7.595,
"timestamp": 1690000000000
}
When viewing past entries, the user can click on a given entry to reveal its receipt. This is quite literally formatted as a receipt. Only one expense can be expanded at a given time.
Below the receipt, there is an edit button. Clicking that button will bring you back to the logging page with the data already added. From here, you can remove items, add items, change the store name, tax rate, or even delete the expense entirely.
Some button components. These components are made to stand out when on any background in the palate.
These buttons were styled and placed in the app.css file as global elements, and I used IDs to give buttons any specific shaping I wanted.
Additionally, I gave buttons a noticeable glow effect on hover so that you'd know you're hovering over it.
Home Icon in the top bar doesn't show. Alt text shows instead.
I accidentally left in the debug info.
Submitting a receipt shows $0.00 as the cost, because the text relies on the total cost which is reset when the submit button is pressed.
When an item is submitted without a name, it adds to the total but does not show on the receipt. These items aren't discovered when editing an expense.
Really long store names can break the bounds of the receipt when looking at all expenses.
I have a number of future plans for this project.
Expand the project to track a number of different expense types.
Track money spent in a given timeframe
Track income, generate a "recommended disposable income"
Log subscriptions and show when they will charge again (monthly vs yearly)
Host this project from a home server, not exposed to the internet
Below is a PDF version of the board I used to design the UI elements. On it are a few features that I had in my goal and some basic progress tracking of the different phases.