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)