Series links:

• Part 1/5 – Introduction
• Part 2/5 – Database Planning
• Part 3/5 – AWS Setup
• Part 4/5 – Backend APIs
• Part 5/5 – Frontend (you are here)

What

A small, fast web app that helps you add transactions with bills and later search/export them.

Why

• Quick to use on phone or laptop.
• No heavy frameworks needed; it’s plain HTML/CSS/JS so you can host it anywhere.

How

Get the code

• Frontend source: https://github.com/sagarnayak/expense-tracking-public

1. Pages you’ll see

   • Login
   • Add Entry: date, amount, Credit/Debit, category, description, and file uploads (camera or file picker)
   • Listing: search by text or date range, open documents, export CSV

2. Configure once

   • Open your config and set the API endpoints to your domains:
     • Upload: https://upload.your-domain.com
     • Filter: https://filter.your-domain.com
     • Category autocomplete: https://getcats.your-domain.com
     • Description autocomplete: https://getdesc.your-domain.com
     • Export CSV: https://exportcsv.your-domain.com
   • Set a username and a password hash for login (bcrypt hash). This is just to protect the UI; the backend still validates requests.

3. Using it

   • Login with your username and password.
   • Add a transaction. Attach bill photos or PDFs. You’ll see an upload progress bar.
   • Go to the listing page. Filter by dates or keywords (like “groceries” or “uber”).

• Click Export to download a CSV for your selected range.

4. Hosting options
   • Any static host works: S3/CloudFront, Netlify, Vercel, or a simple nginx/apache.
   • It’s just a folder of files. Upload it as-is.

Thoughts / Caveats

• Mobile tip: use the camera option to capture bills on the go.
• If a popup is blocked when opening a document, allow popups for your site.
• Keep your browser time correct; some servers check a small time window for request signatures.
• You can theme or rebrand the styles later without touching the logic.