The latest articles on DEV Community by Dhanishka M (@dhanishka_m_d581809818266). https://dev.to/dhanishka_m_d581809818266 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3147199%2F2089720f-8df3-466b-b94d-e37762feef13.jpg https://dev.to/dhanishka_m_d581809818266 en Dhanishka M Sun, 11 May 2025 14:37:24 +0000 https://dev.to/dhanishka_m_d581809818266/expense-tracker-2pol https://dev.to/dhanishka_m_d581809818266/expense-tracker-2pol <p>This is a submission for the <a href="https://dev.to/challenges/aws-amazon-q-v2025-04-30">Amazon Q Developer "Quack The Code" Challenge</a>: Crushing the Command Line</p> <p>🛠️ <strong>What I Built</strong><br> 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:</p> <p>✨ <strong>Key Interactive Features</strong></p> <p>🔐 <strong>User Profile Management</strong></p> <p>Set your monthly income and instantly track your balance and savings as you log expenses.</p> <p>📝 <strong>Smart Expense Input</strong><br> Easily add expenses with detailed info like amount, category, date, and a short description. Everything updates live!</p> <p>📊 <strong>Visual Insights with Chart.js</strong><br> Watch your spending come to life with dynamic pie charts (category breakdown) and line charts (daily/weekly trends).</p> <p>🔁 <strong>Real-Time Sync Across Tabs</strong><br> Add an expense in one tab — see it reflected instantly in others! Powered by the BroadcastChannel API.</p> <p>🌓<strong>Responsive UI + Dark Mode</strong><br> Enjoy a sleek, intuitive interface that adapts to all devices — and switch between light/dark themes with one click.</p> <p>🌐 <strong>Demo</strong></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvmg0u5ahfc3773l1aqu7.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvmg0u5ahfc3773l1aqu7.png" alt="Image description" width="800" height="336"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5m6u81c0hb7vwwjbn8w.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5m6u81c0hb7vwwjbn8w.png" alt="Image description" width="800" height="396"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxazhwulm2tkb1kar2y3r.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxazhwulm2tkb1kar2y3r.png" alt="Image description" width="786" height="600"></a></p> <p><strong>Live Website:</strong> <a href="https://tracker.d2t4k5ch1s2slh.amplifyapp.com/" rel="noopener noreferrer">Expense Tracker</a></p> <p>💻 <strong>Code Repository<br> GitHub:</strong><a href="https://github.com/Dhanishka03/Awsdev-ExpenseTracker" rel="noopener noreferrer">https://github.com/Dhanishka03/Awsdev-ExpenseTracker</a></p> <p>📬<strong>Connect with Me</strong></p> <p>💼<strong>Linkedin:</strong><a href="https://www.linkedin.com/in/dhanishka-m/" rel="noopener noreferrer">Dhanishka.M</a><br> 🔗 <strong>GitHub:</strong><a href="https://github.com/Dhanishka03" rel="noopener noreferrer">Dhanishka_github</a><br> 🌐<strong>DEV Profile:</strong><a href="https://dev.to/dhanishka_m_d581809818266">Dhanishka_dev</a></p> <p>🤖<strong>How I Used Amazon Q Developer</strong></p> <p>🧠 <strong>Real-Time Guidance</strong><br> Amazon Q Developer walked me through implementing real-time sync across tabs using the BroadcastChannel API — making multi-tab tracking effortless.</p> <p>📊 <strong>Smart Visual Enhancements</strong><br> It suggested using Chart.js for category breakdowns and trend charts, helping me bring my data to life with clean, dynamic visuals.</p> <p>🔧 <strong>Effortless Debugging</strong><br> From fixing minor glitches to optimizing how data updates on the front end, it made sure everything worked smoothly and efficiently.</p> <p>🎨<strong>UX Upgrades</strong><br> Q Developer recommended UI improvements like dark mode and advanced filters for a better, more personalized experience.</p> <p>🤝 <strong>Team Collaboration</strong><br> Huge shoutout to my teammate <a href="https://dev.to/ranjini_s_34be20f980912ec">Ranjini S </a>for her constant support and contributions throughout development!</p> devops aws awschallenge devchallenge