Design a modern, minimal, and mobile-first web application UI for a student-focused expense tracker. The target audience is Indian college students who are managing a tight monthly budget (e.g., ₹5000). The interface must be extremely simple, intuitive, and smooth, with a professional, youthful look.
Core Flow:
Set Monthly Budget Screen – Allow users to input their monthly budget (e.g., ₹5000) with a clean, single-step input flow.
Add Expense Screen – A form where users can:
Enter amount (e.g., ₹20)
Select payment mode: Online / Cash / UPI / Card
Hit a “Pay Now” button (if payment mode is online/UPI), which triggers phone-installed payment apps (like Google Pay, PhonePe, Amazon Pay)
Post Payment Confirmation Screen – After payment, user confirms whether the payment was successful or not.
Dashboard/Home – Show:
Monthly budget remaining
List of recent expenses (with icons per category/payment mode)
Clean charts (optional) for daily/weekly spending
Design Notes:
Use pastel colors or soft gradients
Font should be rounded, friendly but modern
Prioritize tap-friendly elements, big buttons, and fast navigation
Use microinteractions and smooth transitions for delight
Avoid clutter — show only what’s necessary on each screen
Target is a lightweight, Gen-Z friendly, mobile-first UI. Think of apps like Notion, Splitwise, Google Pay for inspiration — but even simpler.
I've designed a modern, minimal, and mobile-first expense tracker application for Indian college students. The UI is clean, intuitive, and optimized for small screens with a professional yet youthful look.
Dashboard/Home Screen - Shows:
Add Expense Screen - Features:
The application follows a mobile-first approach with large touch targets, minimal clutter, and a focus on the core functionality that students need to track their expenses effectively.
You can test the application by navigating through the different screens, starting from setting a budget, viewing the dashboard, adding expenses, and confirming payments.
At the dashboard replace the weekly spendings with the attached screenshot and whole web application should be in the dark mode only and the second most important thing that needs to be focused and implemented is When I click on add expense and when I enter the amount and click on UPI or online payment mode then after when I click on the pay now button the UPI apps that means four pay Google pay or the Amazon pay which is installed in my mobile are not getting triggered please fix that that is a very most important thing. And make it fully working
The code returns the following error:
The file "/components/balance-chart" cannot be found (imported in "/app/dashboard/page"). Make sure the file or alias exists in the correct location.
Revise the code to address the error.
I was previewing: /dashboard