DEV Community

Cover image for Expense Tracker
Dhanishka M
Dhanishka M

Posted on

Expense Tracker

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing theΒ CommandΒ Line

πŸ› οΈ What I Built
I developed a Real-Time Expense Tracker Dashboard β€” a fully client-side, responsive web application that helps users track and analyze personal expenses. Key features include:

✨ Key Interactive Features

πŸ” User Profile Management

Set your monthly income and instantly track your balance and savings as you log expenses.

πŸ“ Smart Expense Input
Easily add expenses with detailed info like amount, category, date, and a short description. Everything updates live!

πŸ“Š Visual Insights with Chart.js
Watch your spending come to life with dynamic pie charts (category breakdown) and line charts (daily/weekly trends).

πŸ” Real-Time Sync Across Tabs
Add an expense in one tab β€” see it reflected instantly in others! Powered by the BroadcastChannel API.

πŸŒ“Responsive UI + Dark Mode
Enjoy a sleek, intuitive interface that adapts to all devices β€” and switch between light/dark themes with one click.

🌐 Demo

Image description

Image description

Image description

Live Website: Expense Tracker

πŸ’» Code Repository
GitHub:
https://github.com/Dhanishka03/Awsdev-ExpenseTracker

πŸ“¬Connect with Me

πŸ’ΌLinkedin:Dhanishka.M
πŸ”— GitHub:Dhanishka_github
🌐DEV Profile:Dhanishka_dev

πŸ€–How I Used Amazon Q Developer

🧠 Real-Time Guidance
Amazon Q Developer walked me through implementing real-time sync across tabs using the BroadcastChannel API β€” making multi-tab tracking effortless.

πŸ“Š Smart Visual Enhancements
It suggested using Chart.js for category breakdowns and trend charts, helping me bring my data to life with clean, dynamic visuals.

πŸ”§ Effortless Debugging
From fixing minor glitches to optimizing how data updates on the front end, it made sure everything worked smoothly and efficiently.

🎨UX Upgrades
Q Developer recommended UI improvements like dark mode and advanced filters for a better, more personalized experience.

🀝 Team Collaboration
Huge shoutout to my teammate Ranjini S for her constant support and contributions throughout development!

Top comments (0)