Expense Tracker (Part 5/5): Frontend

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 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 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. 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”). ...

August 11, 2025 · 2 min · 275 words · Sagar Nayak

Expense Tracker (Part 4/5): Backend APIs

Series links: Part 1/5 - Introduction Part 2/5 - Database Planning Part 3/5 - AWS Setup Part 4/5 - Backend APIs (you are here) Part 5/5 - Frontend What A tiny set of APIs to save entries with files, search them, get suggestions, and export CSV. Why Clear, stable contracts make the frontend simple. You can implement these endpoints in any backend framework. How Use your own domain names. The example hostnames below are placeholders. ...

July 19, 2025 · 2 min · 313 words · Sagar Nayak

Expense Tracker (Part 3/5): AWS Setup

Series links: Part 1/5 - Introduction Part 2/5 - Database Planning Part 3/5 - AWS Setup (you are here) Part 4/5 - Backend APIs Part 5/5 - Frontend What A light AWS setup to hold two things: your files (bills) and your data (transactions). Why S3 is reliable and affordable for documents/photos. RDS PostgreSQL gives you a managed database without running servers. How S3 bucket for web hosting (public read) Create a bucket for the static site (e.g., my-expenses-web). Make it public-read so the HTML/CSS/JS can be fetched by browsers. Optionally use CloudFront in front; with OAC you can keep the bucket private and still serve publicly via the CDN. Alternative hosts: Netlify, Vercel, or any simple web server. S3 bucket for documents (private) Create a separate bucket for bills/receipts (e.g., my-expenses-docs). Block public access. Do not expose this bucket directly. Files are only opened via the backend (temporary links or redirects). Optional: lifecycle rule to move older files to cheaper storage. PostgreSQL on RDS (or use your own Postgres) A small instance is enough to start. Create a database and run the two tables from Part 2. IAM users/roles Backend role/user (documents bucket): allow only s3:PutObject, s3:GetObject, s3:DeleteObject, and s3:ListBucket on the docs bucket (preferably scoped to a prefix). Deployment user (web bucket): allow s3:PutObject and s3:ListBucket on the web bucket to upload new site files. If using CloudFront, also allow cloudfront:CreateInvalidation for your distribution. Keep permissions limited to specific ARNs. Networking & HTTPS Expose your backend over HTTPS (any domain or IP works). If you use a domain, add DNS (Route 53 or any registrar) and a certificate (ACM or your TLS setup). ...

June 6, 2025 · 2 min · 341 words · Sagar Nayak

Expense Tracker (Part 2/5): Database Planning

Series links: Part 1/5 - Introduction Part 2/5 - Database Planning (you are here) Part 3/5 - AWS Setup Part 4/5 - Backend APIs Part 5/5 - Frontend What A minimal PostgreSQL structure with just two tables: one for the transaction entry and one for the attached documents (bills/receipts). Why Keep it simple so you can start quickly. Easy to query, filter by date/text, and export. How Tables at a glance accounting_entry: one row per transaction (expense or income). entry_date: when it happened. amount: the value; CR/DR tells direction. cr_dr: ‘CR’ for money in, ‘DR’ for money out. category: a simple label you choose (e.g., Groceries, Fuel). description: short note to help search later. human_code: short human-friendly code you can cite (shown on the listing). id: internal unique id. accounting_document: zero or more documents for each entry (your bills/receipts). accounting_entry_id: links the document to its entry. file_path: where the file is stored (S3 key or path). doc_code: short code for the document (helps reference a specific file). id: internal unique id. ...

May 23, 2025 · 2 min · 362 words · Sagar Nayak

Expense Tracker (Part 1/5): Introduction

Series links: Part 1/5 - Introduction (you are here) Part 2/5 - Database Planning Part 3/5 - AWS Setup Part 4/5 - Backend APIs Part 5/5 - Frontend What A small, practical expense tracker you can run yourself. You pick a date, enter amount (Credit/Debit), add a category and description, attach bill photos or files, and submit. Later you can search by text/date and export a CSV for your accountant. Why Keep all receipts and notes in one place with the transactions. Search quickly when you need proof or totals. Download a clean CSV and share it with your CA. How The system has three pieces: Database (PostgreSQL) to store entries and attached documents. Backend (Java) with simple APIs to save, list/filter, autocomplete, and export. Frontend (static HTML + JS) with three screens: Login, Add Entry, Listing/Export. Typical flow (with screenshots): Step 1: Login ...

April 9, 2025 · 2 min · 333 words · Sagar Nayak