Inspiration 💡
Budget Buddy was born out of a need to make personal finance simpler and more interactive for everyday users. Many people struggle with understanding currency exchange rates, budgeting, and cost comparisons across regions. We wanted to create a sleek, engaging platform that not only educates users about currency exchange but also helps them plan budgets and set financial goals.
What it does
💱 Currency Converter: Instantly convert between currencies with real-time exchange rate display. 📈 Exchange Rate Graph: Visual representation of exchange trends to help users decide the best time to convert. 🧮 Cost Comparison & Budget Planner: Tools to compare prices across cities/countries and plan monthly budgets. 🎯 Savings Goal Tracker: Helps users set and track their savings goals. 🧠 EconIQ Quiz & Local Spending Tips: Engages users in learning economic literacy and supports local businesses. 📊 Tax Estimator: Gives an idea of estimated taxes based on inputs.
How we built it
🔧 Frontend Structure (HTML) Structured the layout using semantic HTML elements. Created modular sections: navigation bar, currency converter, exchange graph, and footer. Used form elements like , , and for user interaction. 🎨 Styling and UI Design (CSS) Applied a dark neon theme using gradients and shadows for a modern, tech-inspired look. Used Flexbox and Grid for responsive layouts. Styled buttons and input fields with hover effects and smooth transitions to enhance UX. Designed the navigation bar with highlighted active tabs for better usability. 🧠 Interactive Logic (JavaScript) Added event listeners for user input (e.g., amount entered, currency selection). Implemented conversion logic using a static exchange rate or simulated dynamic value. Used Chart.js (or a similar library) to generate a real-time line chart of currency exchange trends. Dynamically updated the result box and chart based on user input. Challenges we ran into 🚧 Integrating Dynamic Graphs: It was tricky to render real-time currency data and plot it smoothly using JavaScript. 🚧 Responsive Design: Ensuring the website looked clean and functioned well on all screen sizes was a learning curve. 🚧 User Interaction: Managing multiple modules while maintaining intuitive UX required several design iterations. 🚧 API Limitations: Simulating or integrating real currency APIs involved handling rate limits and fallbacks. 🚧 I was unable to incorporate all currencies into the analysis and couldn't include cities from every country. As a result, my city-to-city comparisons are not yet fully accurate. Accomplishments that we're proud of *Created a fully interactive and visually appealing interface. *Implemented a smooth currency conversion and exchange rate visualization using pure JavaScript. *Achieved a cohesive, dark-themed UI with smooth gradients and neon effects. *Kept all interactions client-side, ensuring fast response and a lightweight feel. What we learned 📚 Hands-on experience in integrating JavaScript with DOM manipulation for dynamic components. 📚 Learned to use CSS gradients, transitions, and UI effects for a modern design. 📚 Gained insights into real-world application structure, especially managing data flow between components. 📚 Importance of accessibility and responsive design for broader usability. What's next for Budget Buddy 🛡️ User Accounts & Data Storage: Let users save their budgets and track progress over time. 💬 AI-Based Suggestions: Use AI to give personalized financial advice and saving strategies. 🌐 Multi-language Support: Reach a wider audience by localizing content. 📊 Advanced Data Analytics Introduce inflation tracking, purchasing power parity (PPP), and cost-of-living indices. Enable historical trend analysis with downloadable insights for users 📥 Export & Share Options Let users export reports as PDFs/CSVs or share insights with friends or financial advisors.
Log in or sign up for Devpost to join the conversation.