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.
Key Features
- Welcome Screen - Simple entry point with a clean gradient background and clear call-to-action buttons.
- Set Monthly Budget Screen - A single-step input flow with a clean card interface and prominent rupee symbol.
Dashboard/Home Screen - Shows:
- Monthly budget remaining with a visual progress bar
- Weekly spending chart with a clean area visualization
- List of recent expenses with category-specific icons
Add Expense Screen - Features:
- Simple amount input with rupee symbol
- Category selection with visual buttons
- Payment mode selection (UPI, Cash, Card, Online)
- Contextual "Pay Now" or "Save Expense" button
- Payment Confirmation Screen - Simple yes/no interface with large, tap-friendly buttons
Design Elements
- Colors: Soft blue gradients with white cards for contrast
- Typography: Clean, modern system fonts with rounded corners
- Components: Large, tap-friendly buttons and inputs
- Navigation: Intuitive flow with clear back buttons and prominent CTAs
- Visual Feedback: Progress bars and charts to visualize spending
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