DEV Community

Cover image for Expense Tracker💸
RANJINI S
RANJINI S

Posted on

Expense Tracker💸

#devchallenge #awschallenge #ai #webdev

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)