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 (1)

Collapse
ย 
atomlit profile image
Atomlit Labs โ€ข

How was you experience so far ? Is it too hard to get user in such competitive niche ?