Budget Tracker App

A complete web application that helps users record income and expenses, set budget goals, and view spending patterns in clear charts. This was my first full-stack build and an important step toward understanding how a real production app fits together end-to-end.

What I Learned

Full-Stack Workflow: Connected a responsive front-end to a Firebase backend, handling data flow and state management across the entire application.

Database & Auth: Implemented secure user authentication and real-time storage with Firestore, gaining experience in managing user sessions and protecting data.

Data Visualization: Integrated Chart.js to turn raw financial records into intuitive graphs that update live as users add or edit transactions.

UI/UX Design: Focused on a clean, modern interface that makes personal finance approachable, with simple forms and clear feedback on every action.

Tech Stack

• HTML / CSS / JavaScript
• Firebase Authentication & Firestore Database
• Chart.js for data visualization

The Creative Process

I started by mapping the user journey—from creating an account to logging expenses—then designed a clean dashboard that highlights key numbers at a glance. Iterative testing guided the layout and color choices, ensuring the app feels both professional and easy to use.