WalletAlert

Context

Built as a software engineering project around a common student pain point: small daily purchases add up fast, but most budgeting tools feel heavier than the workflow they are supposed to simplify.

Problem

Students need to set budgets, categorize expenses, and spot overspending early, but spreadsheets and generic finance apps create too much friction for quick daily use.

Solution

WalletAlert combines a React + Vite frontend, an Express API, MongoDB persistence, Recharts visualizations, and Auth0 authentication to deliver fast expense logging, budget monitoring, and clear trend visibility in one focused product.

Key decisions

• -Used optimistic UI updates so expense logging feels immediate instead of blocked by round-trips.
• -Scoped the product around weekly and category budgeting, which matches how students usually reason about spending better than long financial dashboards.
• -Added an in-memory fallback in development so the API remains usable even when MongoDB is not configured.
• -Documented local and Render deployment flows so the app could move from coursework to a shareable demo more easily.

Screenshots

Key features

• -Weekly and category-based budgets
• -Quick expense creation, categorization, and editing
• -Spending breakdowns and charts with Recharts
• -Proactive alerts before overspending
• -Auth0 authentication and protected routes
• -Accessible custom modals and keyboard shortcuts
• -Local setup plus Render-ready deployment flow

Results

• -Turned budgeting into a lightweight daily interaction instead of an end-of-month cleanup task.
• -Connected product UX, authentication, persistence, testing, and deployment concerns in one coherent full-stack build.
• -Created a more credible featured case study by pairing user-facing polish with documented architecture and UML artifacts.

Stack

Links