A modern, responsive budgeting application that helps users visually track income, expenses, and savings. Designed with clean UI and performance in mind, this demo version focuses solely on the frontend experience, with no backend integration.
🌐 Live Demo: budget-app-frontend-coral.vercel.app
React – UI Library
TypeScript – Static typing
Tailwind CSS – Utility-first styling
shadcn/ui – Styled components
Framer Motion – UI animation
Chart.js / Recharts – Visual data representation
Vite – Fast frontend tooling
Make sure you have Node.js and Yarn installed.
git clone https://github.com/Turkiano/budget-app-frontend.git
cd budget-app-frontend
yarn install
yarn dev
Add new income or expense entries
Categorize your spending (e.g., Food, Rent, Entertainment)
Switch between monthly views
Track savings goals with visual progress
Mobile-friendly experience for on-the-go tracking
📊 Interactive Budget Dashboard – Visual breakdown of expenses vs income
🗂️ Category Filters – View budget distribution by category
📅 Monthly Overview – Navigate and compare budget data month-to-month
💡 Responsive Design – Optimized for desktop, tablet, and mobile
⚛️ Fast & Lightweight – Built with performance-first tooling
🎨 Modern UI – Clean and minimal interface with animated transitions
This is a frontend-only demo. Contributions are welcome for improving the UI/UX or extending the feature set.
Fork the project
Create your feature branch (git checkout -b feature/YourFeature)
Commit your changes (git commit -m 'Add your feature')
Push to the branch (git push origin feature/YourFeature)
Open a Pull Request
This project is licensed under the MIT License. Feel free to use it as a reference, contribute, or adapt for your own learning projects.