The latest articles on DEV Community by RANJINI S (@ranjini_s_34be20f980912ec). https://dev.to/ranjini_s_34be20f980912ec 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%2F3149200%2F8ea4cd2d-4a3e-4435-a439-0e82f9365b39.jpg https://dev.to/ranjini_s_34be20f980912ec en RANJINI S Sun, 11 May 2025 11:04:11 +0000 https://dev.to/ranjini_s_34be20f980912ec/expense-tracker-1g00 https://dev.to/ranjini_s_34be20f980912ec/expense-tracker-1g00 <p><em>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</em></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>📊 Visual Insights with Chart.js<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><br> <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%2F0jhm6nsfeo2gqae5bcr7.jpg" 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%2F0jhm6nsfeo2gqae5bcr7.jpg" alt="Image description" width="800" height="405"></a><br> <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%2Fy0mrfbaie14pl95zljop.jpg" 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%2Fy0mrfbaie14pl95zljop.jpg" alt="Image description" width="800" height="370"></a></p> <p><strong>Live Website:</strong> <a href="https://staging.d3cjgvjkcc358z.amplifyapp.com/" rel="noopener noreferrer">Expense Tracker website</a></p> <p><strong>💻 Code Repository</strong><br> GitHub: <a href="https://github.com/Ranjini-ctrl/Expense-Tracker" rel="noopener noreferrer">https://github.com/Ranjini-ctrl/Expense-Tracker</a></p> <p><strong>📬 Connect with Me</strong></p> <p>💼<strong>Linkedin</strong>: <a href="//www.linkedin.com/in/ranjini-s-152883323">Ranjini S</a><br> 🔗 <strong>GitHub</strong>: <a href="https://github.com/Ranjini-ctrl" rel="noopener noreferrer">GitHub</a><br> 🌐 <strong>DEV Profile</strong>: <a href="https://dev.to/ranjini_s_34be20f980912ec">https://dev.to/ranjini_s_34be20f980912ec</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 Dhanishka M (<a class="mentioned-user" href="https://dev.to/dhanishka_m_d581809818266">@dhanishka_m_d581809818266</a>) for her constant support and contributions throughout development!</p> devchallenge awschallenge ai webdev