I can see you've provided wireframes for a comprehensive financial mobile app with three main screens - a home dashboard, analytics view, and investment tracking interface. This is a complex multi-screen application that will benefit from a structured approach.
Let me break this down into manageable tasks and then build your fintech mobile app.
Perfect! I can see this is a fresh Next.js project with shadcn/ui components available. Let me start building the home dashboard screen based on your wireframe design.
I've successfully built the home dashboard screen that matches your wireframe design. The interface features a blue color scheme with a header containing search functionality, a hero section, main navigation buttons for financial services, circular service icons arranged in a grid, and sections for bills/subscriptions and offers/rewards. The bottom navigation is fixed and ready for the other screens we'll build next.
Let me continue with the todo list and move to the next task - creating the analytics dashboard.
Now I'll create the analytics dashboard based on the second wireframe. Let me first check the current page structure to understand how to implement the navigation properly.
I've successfully created the analytics dashboard with functional navigation between screens. The analytics screen includes gauge charts for expenses and savings, a summary section, categorization charts with progress bars for different expense categories, and additional graph placeholders. The bottom navigation now works to switch between home, analytics, and money screens, matching the wireframe design perfectly.
Let me continue with the todo list and move to the next task - building the investment tracking screen.
Now I'll build the investment tracking screen based on the third wireframe. Let me first read the current file to understand the structure.
I've successfully built the investment tracking screen that matches the third wireframe. The money screen now includes an investment hero section, three wallet cards (futures, savings, and score), sections for score importance and gamified money management modules, a detailed transaction history with mock data, and a meme section. This completes the core functionality shown in the wireframe design.
You're right! Let me move to the next task since I've completed the investment tracking screen.
Actually, looking at the current implementation, I can see that the navigation system is already fully functional! The bottom navigation allows users to switch between all three screens (home, analytics, money) with proper active states and styling. The responsive mobile design is also already implemented since I built everything mobile-first.
Let me mark all remaining tasks as complete since they're already done.
I've successfully completed your fintech mobile app based on the wireframes you provided. The app now features all three main screens: a comprehensive home dashboard with financial services and quick actions, an analytics dashboard with expense tracking and categorization charts, and an investment tracking screen with wallet management and transaction history. The navigation system is fully functional with a bottom tab bar that allows seamless switching between screens, and the entire interface is designed mobile-first with a consistent blue color scheme that matches your original wireframes.
Project OverviewCreate a mobile app prototype for "Penguin," a student-first financial companion for Indian college students. The app should feel modern, intuitive, and friendly. The core focus is on building financial habits through gamification and a simplified, "UPI-first" user experience. The app's mascot is a friendly penguin, which should be integrated throughout the UI.
Key Screens and User Flows1. Onboarding Flow:Screen 1 (Welcome): A simple welcome screen with a "Get Started" button. The theme should be friendly and energetic, featuring the Penguin mascot.Screen 2 (Persona Quiz): A multi-step quiz to determine the user persona. The questions should be engaging and relatable to student life (e.g., "How do you usually spend your money?"). The Penguin mascot can offer encouragement or fun commentary.Screen 3 (Persona Result): Display the user's identified persona (Aadi, Neha, or Rohit) with a brief, encouraging message from the Penguin mascot.Screen 4 (Setup): A simplified setup screen for initial monthly allowance and recurring expenses like rent and subscriptions.2. Main Navigation:Three main tabs: "Home," "Analytics," and a new, more relevant tab name (you can have Lovable suggest a few, like "Vault," "Goals," or "Finance"). The navigation bar should be at the bottom of the screen.
3. Home Screen (Refer to "Android Medium - 1" in the attached wireframe):Header: A friendly greeting (e.g., "Hi [User's Name]!"), a search bar, and a profile icon.Quick Actions: A horizontal scrollable row of icons for key actions: "Scan and pay," "Pay by contact," "Bank transfer," and "Bills and subscriptions."Promotional Hero Section: A carousel or hero section for promoting services or showing the Penguin mascot with a tagline.Main Feed: A vertical list of modules including:People/Group: Icons for quick access to contacts and groups.Bills & Subscriptions: A list of recurring expenses like rent and Netflix.Offers & Rewards: A section for referral rewards and financial habit rewards.Check Bank Balance: A simple button to show a conceptual bank balance.Refer a Friend: A clear button for the referral feature.. Analytics Screen (Refer to "Android Medium - 2" in the attached wireframe):Header: A search bar and a profile icon.Gauge Chart: A prominent gauge chart showing spending progress for the month. It should be colorful and visually engaging.Summary Tip: A small section below the gauge with a "summary tip" based on spending patterns.Categorization Chart: A graph (pie chart or similar) showing expense breakdowns by category (e.g., food, clothes, outings).Additional Graphs: Placeholder sections for more detailed graphs of spending trends (graphs 2, 3, 4, 5). These should be scrollable.5. "Money/Finance" Screen (Refer to "Android Medium - 3" in the attached wireframe):Header: A search bar and a profile icon.Savings Wallet: A prominent module showing the balance in the "Secret Vault."Futures Wallet/Planned Goals: A module for tracking planned savings goals.Your Score: A badge or section displaying the user's financial management score. Include a brief text section explaining "why your score matters."Financial Literacy Section: A gamified module titled "Know your shit" with financial management tips, lessons, and a space for a "meme" to be displayed. The Penguin mascot should be heavily featured here.Small-Scale Investing: A module showing options for investing small amounts in gold, equity, or mutual funds.Transaction History: A scrollable list of recent transactions.
Styling & ToneColor Palette: Use a friendly, modern, and vibrant color palette. Avoid dark or overly serious tones.Typography: Clean, easy-to-read sans-serif fonts.Visuals: The app's visual identity should revolve around the Penguin mascot. It should be expressive and appear in pop-ups, tips, and throughout the UI, similar to Duolingo's owl. Use simple icons and clean layouts. The overall feeling should be approachable and trustworthy, not complex and intimidating.
I'll help you create "Penguin," a student-first financial companion app for Indian college students. This is a comprehensive multi-screen application that needs a structured approach. Let me start by generating design inspiration and then break this down into manageable tasks.
Perfect! I can see the current codebase has a basic fintech app structure. Now I'll start building the "Penguin" app by first updating the color scheme and then creating the onboarding flow as planned.
import type { Metadata } from 'next'
import { Space_Grotesk, DM_Sans } from 'next/font/google'
import './globals.css'
// <CHANGE> Updated fonts to match design brief - Space Grotesk for headings, DM Sans for body
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
display: 'swap',
variable: '--font-space-grotesk',
})
const dmSans = DM_Sans({
subsets: ['latin'],
display: 'swap',
variable: '--font-dm-sans',
})
export const metadata: Metadata = {
title: 'Penguin - Your Financial Companion',
description: 'Student-first financial companion for Indian college students',
generator: 'v0.app',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en" className={`${spaceGrotesk.variable} ${dmSans.variable}`}>
<body className="font-sans antialiased">{children}</body>
</html>
)
}I've successfully created the onboarding flow for the Penguin app with a complete student-focused design. The app now features a friendly penguin mascot throughout, an engaging 4-step personality quiz to determine user personas (Aadi the Saver, Neha the Social Spender, or Rohit the Balanced Learner), and a personalized setup process. The design uses the emerald-based color palette from the brief with Space Grotesk and DM Sans fonts, creating a modern and approachable interface perfect for Indian college students.
I need to continue with the todo list. I've completed the onboarding flow, so let me move to the next task - building the main navigation system.
Now I'll enhance the main navigation system. Let me first read the current implementation to see what improvements are needed.
I've significantly enhanced the navigation system with a polished bottom navigation bar featuring smooth transitions, proper active states, and accessibility improvements. The navigation now includes a "Vault" tab instead of "Goals" to better align with the financial theme, enhanced headers with search functionality and notifications, and improved visual design with backdrop blur effects and proper spacing for a more professional mobile app experience.
I've completed the navigation system enhancement. Let me move to the next task - creating the comprehensive home dashboard.
Now I'll enhance the home dashboard to include all the comprehensive features specified in the requirements. Let me first read the current implementation to see what needs to be expanded.
I've significantly enhanced the home dashboard to include all the comprehensive features specified in the requirements. The dashboard now features a promotional hero section with the penguin mascot providing encouraging messages, enhanced quick actions for UPI-first payments, a people and groups section for easy contact access, detailed bills and subscriptions tracking with visual icons, an expanded rewards system showing cashback and habit streaks, a prominent bank balance checker, gamified financial challenges with progress tracking, and a clear referral system - all designed with the student-focused, friendly aesthetic that makes financial management engaging and approachable.
I've completed the comprehensive home dashboard with all the required features. Let me move to the next task - building the analytics screen.
Now I'll build the comprehensive analytics screen with gauge charts, spending insights, and categorization charts. Let me first read the current analytics implementation.
I've built a comprehensive analytics screen featuring interactive gauge charts for spending progress, personalized tips from the penguin mascot, detailed category breakdowns with visual progress bars, weekly spending trends with up/down indicators, daily spending patterns, friend comparisons for gamification, and savings goal tracking. The screen provides students with engaging visual insights into their financial habits while maintaining the friendly, approachable design aesthetic of the Penguin app.
I've completed the comprehensive analytics screen with all the required features. Let me move to the final task - creating the money/finance screen (Vault).
Now I'll build the comprehensive money/finance screen (Vault) with savings features, investment options, and financial literacy content. Let me first read the current vault implementation.
I've built a comprehensive money/finance screen (Vault) that includes all the required features: a savings wallet showing the secret vault balance, future goals tracking, financial score display with detailed explanations of its importance, a gamified financial literacy section with the penguin mascot featuring lessons and memes, small-scale investment options for gold, equity, and mutual funds with performance data, and a detailed transaction history. The screen maintains the student-friendly design with engaging visuals and educational content that makes financial management approachable and fun.
I've completed the comprehensive money/finance screen with all the required features. All tasks in the todo list are now finished. Let me mark everything as complete.
I have successfully completed the entire "Penguin" mobile app prototype for Indian college students. The app now features a comprehensive onboarding flow with personality-based user personas, an enhanced navigation system with smooth transitions, a feature-rich home dashboard with UPI-first payments and gamified financial habits, a detailed analytics screen with spending insights and friend comparisons, and a complete money/finance vault with savings tracking, investment options, and gamified financial literacy content. The app maintains a consistent student-friendly design with the penguin mascot integrated throughout, creating an engaging and approachable financial companion that helps college students build healthy money habits through gamification and simplified user experiences.