BudgetEdu

Home Page of BudgetEdu
Comparison Table comparing between budgeting and non-budgeting expenses and savings
Quiz Functionality with population results viewing
4 Common Budgeting Strategies with explanation, scenerio and example

Inspiration

BudgetEdu was inspired by the need for accessible and engaging financial education. Many people find budgeting overwhelming or boring, so we set out to create a platform that makes learning about personal finance simple, interactive, and fun.

What it does

BudgetEdu teaches users the fundamentals of budgeting through interactive visual guides, quizzes, and practical strategies. It helps users understand the advantages and disadvantages of budgeting, compare different approaches, and apply proven techniques to manage their money.

How we built it

Frontend: Built with React and Vite for fast development and a smooth user experience. Tailwind CSS was used for responsive and modern styling.
Backend: A lightweight Express server handles API requests and stores user submissions in MongoDB.
Interactivity: Features like card flips, quizzes, and comparison tables make learning engaging.
Deployment: Experimented with platforms like Render and Vercel to find the best way to host both frontend and backend together.

Challenges we ran into

Integrating the backend and frontend in a single deployable project required careful configuration, especially for static file serving and API routing.
Deploying on platforms like Vercel, which are optimized for frontend or serverless functions, presented challenges for running a persistent backend.
Ensuring a seamless user experience across devices and managing React state efficiently.

Accomplishments that we're proud of

Created a fully interactive budgeting education platform from scratch.
Successfully integrated a full-stack solution with a modern UI and real-time backend.
Made financial literacy approachable for users of all backgrounds.