DEV Community

Cover image for Expense Tracker๐Ÿ’ธ
RANJINI S
RANJINI S

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

Live Website: Expense Tracker website

๐Ÿ’ป Code Repository
GitHub: https://github.com/Ranjini-ctrl/Expense-Tracker

๐Ÿ“ฌ Connect with Me

๐Ÿ’ผLinkedin: Ranjini S
๐Ÿ”— GitHub: GitHub
๐ŸŒ DEV Profile: https://dev.to/ranjini_s_34be20f980912ec

๐Ÿค– 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 Dhanishka M (@dhanishka_m_d581809818266) for her constant support and contributions throughout development!

Top comments (0)