Expense Tracker Web App Project

Project Concept

A personal expense-management web app that supports account registration, login, and recording named financial transactions with an amount and date per user — each user can only see, edit, and delete their own transactions, with no cross-account leakage. The total balance is calculated as the arithmetic sum of all amounts: positive values count as income, negative values as expenses.

What the Interface Shows

The gallery shows the dashboard in both English and Arabic (same data, a fully mirrored RTL/LTR layout), with a color-coded balance/income/ expense summary (green for income, red for expenses), an add-transaction form, and a history list with delete controls. The login and registration screens share a consistent split layout — a financial illustration alongside an elevated form card.

My Role and Decisions

When I found a real JWT secret leaked in the repository’s Git history, I chose to rewrite the entire history rather than adding a deletion commit — a deletion alone would still leave the secret visible in old commits. The first rewrite attempt failed because the secret got written into the new Git object database during a checkout step before removal, so I switched to exporting the tree outside Git, sanitizing it there, and only then adding it. When triaging dependency vulnerabilities, I found an advisory in Sharp (a Next.js dependency) with no safe update available — instead of waiting or ignoring it, I checked whether the app actually processes any user-supplied images, found that its only next/image usage is two static images, and accepted the exception with that evidence instead of forcing a risky upgrade. I also pinned the Node.js runtime to 24.x specifically to stay within Next.js 16’s officially supported range on Heroku.

Technical Aspects

A unified Next.js App Router application (frontend and API routes together), MongoDB via Mongoose with two models (User and Transaction, linked by a reference and an index on userId), JWT authentication using HS256 through jose, and password hashing with bcrypt. The GitHub Actions pipeline runs an isolated MongoDB service for tests and gates the Heroku deployment on passing a quality gate (dependency audit, lint, tests, build). A separate Docker image bundles the app with a local MongoDB instance in one image, starting from an empty database.

Project Value in the Portfolio

This project demonstrates a real response cycle to a security problem (discovering a leaked secret, a failed first remediation attempt, and correcting the method), not just a “we did X” narrative. It also shows an evidence-based decision (accepting a vulnerability only after confirming there was no real exploitation path) rather than a default assumption.