🌸 Inspiration
In today's fast-paced world, managing personal finances can feel overwhelming, especially for women who are often juggling multiple responsibilities. We noticed that existing financial apps are either too complex, too masculine in design, or lack the personal touch that makes financial management feel approachable and empowering.
Clara was born from the vision of creating a financial companion that feels like chatting with a trusted friend—one who understands your goals, celebrates your wins, and gently guides you toward better financial habits. We wanted to design something that feels premium yet approachable, with a soft, feminine aesthetic that breaks away from traditional fintech's cold, corporate look.
💡 What it does
Clara is an AI-powered personal finance assistant that combines beautiful design with intelligent conversation. She helps you:
💬 Natural Conversation
- Chat with Clara using text or voice messages
- Get personalized financial advice in real-time
- Ask questions about budgeting, savings, and spending habits
- She remembers your context and provides tailored recommendations
💰 Smart Money Tracking
- Automatically detect expenses from conversations ("I spent $20 on groceries")
- Voice-to-text expense logging for hands-free tracking
- Categorized spending with intelligent categorization
- Monthly budgets with gentle nudges
🎯 Goal Setting & Achievement
- Set personalized savings goals
- Track progress with beautiful visualizations
- Receive encouraging reminders
- Celebrate milestones together
🔍 Smart Shopping Assistant
- Find best prices for products you need
- Compare prices across retailers
- Share product images for analysis
- Get recommendations for budget-friendly alternatives
📱 WhatsApp Integration
- Chat with Clara on WhatsApp when you're on the go
- Receive financial insights and reminders
- Log expenses via WhatsApp messages
- Seamless sync between app and WhatsApp
📚 AI-Powered Learning
- Personalized financial lessons generated by AI based on your needs
- Interactive YouTube videos embedded in each lesson for visual learning
- Module-based curriculum covering budgeting, investing, debt, and more
- Gamified progress tracking with XP points and achievements
- Lesson navigation to move through content at your own pace
- Confetti celebrations for completing lessons and milestones
👥 Savings Circles (Pro Feature)
- Create private saving groups with friends and family
- Set collective savings goals
- Track group contributions and progress
- Community-driven financial accountability
✨ Beautiful, Thoughtful Design
- Soft, feminine aesthetic with lavender, pink, and indigo palette
- Glassmorphism effects and smooth animations
- Floating illustrations that feel alive
- Markdown-rendered chat with clickable links, bold text, and formatted responses
- Premium feel with shadows, gradients, and rounded corners
- Enhanced daily tips modal with improved scrolling and visual hierarchy
🛠 How we built it
Frontend - React Native & Expo
- React Native for cross-platform mobile development (iOS & Android)
- Expo for rapid development and seamless updates
- Expo Router for file-based navigation
- React Native Reanimated for smooth, 60fps animations
- Expo Linear Gradient for beautiful gradient effects
- Expo Blur for glassmorphism UI elements
- React Native Markdown Display for rich text formatting in chat
State Management
- Zustand for lightweight, performant global state
- Local storage with AsyncStorage for offline-first experience
AI & Intelligence
- Google Gemini 2.0 for natural language understanding and generation
- Voice transcription (Gemini Audio API) for voice expense logging
- Image analysis (Gemini Vision API) for product price searches
- Custom prompt engineering for personalized financial coaching
Backend - Supabase
- PostgreSQL database for user profiles, expenses, goals, and chat history
- Row Level Security (RLS) for data protection
- Edge Functions for serverless API endpoints
- Real-time subscriptions for instant updates
- WhatsApp integration via Supabase Edge Functions
WhatsApp Integration
- Wasender API for WhatsApp message delivery
- Bidirectional chat sync between app and WhatsApp
- Expense logging via WhatsApp messages
- Automated reminders and insights
Authentication
- Phone number authentication with OTP verification
- WhatsApp-based OTP delivery
- Secure session management
Monetization & Subscriptions
- RevenueCat for seamless in-app purchase management
- Freemium model with strategic restrictions for free users:
- 1 AI lesson generation per week (unlimited for Pro)
- Savings Circles completely gated (Pro only)
- Community creation blocked (Pro only)
- Limited price tracking (Pro gets unlimited)
- Image upload restricted (Pro feature)
- 8 Clear Pro Benefits:
- Unlimited AI Lessons
- Savings Circles access
- Community Creation
- Unlimited Voice Calls (vs 10 min/day)
- Unlimited Price Tracking
- Image Recognition
- Advanced Progress Charts
- WhatsApp Alerts
- Beautiful paywalls with clear upgrade paths
- Upgrade prompts at feature touchpoints
Design Philosophy
We focused on creating a premium, soft, feminine aesthetic:
- Color Palette: Soft lavender (#F5F3FF), indigo (#6366F1), and pink (#F472B6)
- Typography: Bold headers (700 weight), medium body text (500 weight)
- Animations: Floating illustrations, smooth page transitions, micro-interactions
- Shadows & Depth: Colored shadows (indigo, lavender, pink) for depth
- Rounded Corners: 20-24px border radius for softness
- Glassmorphism: BlurView backgrounds for modern elegance
💳 Bill Reminders & Subscriptions
- Track recurring subscriptions
- Get reminders before bills are due
- Identify unused subscriptions
- Negotiate better rates
📈 Investment Guidance
- Learn about investing basics
- Get personalized investment recommendations
- Track portfolio performance
- Robo-advisor integration
🔔 Smart Notifications
- Spending pattern alerts ("You've spent more on eating out this month")
- Goal milestone celebrations
- Bill payment reminders
- Budget warnings with suggestions
🤖 Advanced AI Coaching
- Predictive spending insights
- Personalized savings recommendations
- Financial goal planning assistance
- Investment portfolio optimization
🚧 Challenges we ran into
1. Markdown Rendering in Chat
Problem: AI responses were showing raw markdown syntax (**bold**, # Header) instead of formatted text, making messages hard to read.
Solution: Integrated react-native-markdown-display with custom styling to match Clara's feminine aesthetic. Links are now clickable (indigo color), bold text stands out, headers are properly sized, and code blocks have soft gray backgrounds.
2. Voice Recognition Accuracy
Problem: Initial transcription quality was inconsistent, especially for financial terms.
Solution: Switched to Gemini's audio API, used high-quality audio settings (44.1kHz, AAC encoding), and implemented error handling with user feedback.
3. Expense Detection from Natural Language
Problem: Users don't want to manually categorize expenses—they just want to say "I spent $20 on groceries."
Solution: Built a custom parser with regex pattern matching for common expense phrases, coupled with Gemini AI for intelligent categorization. The system automatically detects amounts, currencies, and spending categories.
4. WhatsApp Integration Complexity
Problem: Syncing conversations between the app and WhatsApp while maintaining context and security.
Solution: Implemented a bidirectional sync system using Supabase Edge Functions, with proper session management and message deduplication.
5. Designing for Femininity Without Stereotypes
Problem: How to create a feminine aesthetic that feels premium and empowering, not childish or patronizing?
Solution: Chose a sophisticated palette (soft indigo, lavender, pink), used subtle animations (floating not bouncing), and maintained professional typography. The result feels elegant and modern, not cute or overly playful.
6. Performance with Animations
Problem: Multiple animated elements (floating blobs, page transitions, confetti) could cause frame drops.
Solution: Used React Native Reanimated's worklets for 60fps animations on the UI thread, implemented spring physics for smooth interactions, and optimized re-renders with React.memo.
7. YouTube Video Embedding Restrictions
Problem: Some educational videos had embedding disabled by content creators, causing "embed_not_allowed" errors.
Solution: Curated a database of embeddable, high-quality financial education videos from verified channels (Khan Academy, Two Cents, Ali Abdaal). Implemented keyword matching to select relevant videos automatically for each lesson topic.
8. Balancing Free vs Pro Features
Problem: How to create a sustainable monetization model without frustrating free users?
Solution: Implemented strategic restrictions (1 lesson/week, locked savings circles) with clear upgrade prompts at natural touchpoints. Free users get a complete experience to build trust before upgrading.
🏆 Accomplishments that we're proud of
🎨 Beautiful, Cohesive Design
We created a truly unique aesthetic that stands out in fintech. The soft, feminine design is consistent across every screen—onboarding, chat, profile setup, and authentication. Users immediately feel the premium, thoughtful experience.
💬 Natural Conversation Experience
Clara doesn't feel like a chatbot. The markdown rendering, personalized responses, and contextual memory make it feel like talking to a real financial advisor. Users can chat naturally without learning commands or navigating complex menus.
🎯 Automatic Expense Tracking
The ability to log expenses just by saying "I spent $20 on groceries" is magical. No forms, no categories to select—just natural conversation. This removes friction and encourages consistent tracking.
✨ Premium Micro-Interactions
Every interaction feels polished:
- Buttons scale smoothly on press
- Illustrations float gently
- Page transitions have parallax effects
- Confetti celebrates profile completion
- Voice button pulses while recording
📱 Cross-Platform Excellence
Built with React Native, Clara works beautifully on both iOS and Android with a single codebase. The design adapts perfectly to different screen sizes and platforms.
🔗 Markdown-Powered Responses
AI messages now render with bold text, headers, clickable links, code blocks, and lists. This makes Clara's financial advice clear, scannable, and actionable.
📚 Interactive Learning System
We built a complete AI-powered education platform with:
- YouTube video integration for visual learning
- Module-based curriculum with navigation
- Gamification with XP points and confetti celebrations
- Smart lesson generation that creates personalized content
💰 Strategic Monetization
Implemented a thoughtful freemium model that:
- Gates premium features naturally (savings circles, community creation)
- Provides clear value propositions in paywalls
- Limits free usage strategically (1 lesson/week) to encourage upgrades
- Never feels pushy or destructive to user experience
📚 What we learned
1. Design is More Than Pretty Colors
We learned that great design is about emotional connection. The soft animations, feminine palette, and thoughtful micro-interactions make users feel cared for rather than just using a tool.
2. AI Prompt Engineering is an Art
Crafting the right prompts for Gemini was crucial. We learned to:
- Provide clear context about the user's goals and values
- Set the tone of voice (warm, encouraging, professional)
- Limit response length for mobile readability
- Include knowledge base context for personalized advice
3. Voice Input Changes Behavior
Users who might ignore typing actually love voice input. It lowers the barrier for logging expenses and asking questions. We learned to optimize for quick, casual voice interactions.
4. Animation Performance Matters
We learned to use React Native Reanimated's worklets for UI thread animations, implement spring physics for natural motion, and avoid re-renders during animations. The result is buttery-smooth 60fps performance.
5. Markdown Makes Chat Feel Professional
Adding proper markdown rendering transformed the chat experience. Users can now see formatted responses with clickable links, making Clara's advice actionable and trustworthy.
6. Soft Doesn't Mean Weak
We learned that a feminine design can be both soft and powerful. The lavender, pink, and indigo palette feels premium and empowering, not childish. Subtle shadows, smooth animations, and thoughtful spacing create elegance.
🚀 What's next for Clara
📊 Data Visualization Dashboard
- Beautiful spending charts and graphs
- Budget vs. actual spending comparisons
- Savings progress visualizations
- Category breakdowns with insights
🤝 Social Features
- Share savings goals with friends
- Group challenges (save $100 together)
- Anonymous spending comparisons
- Community tips and advice
🏦 Bank Account Integration
- Connect bank accounts securely
- Automatic transaction import
- Smart categorization with AI
- Real-time balance updates
🌍 Multi-Currency Support
- Support for multiple currencies
- Automatic conversion
- Travel budget tracking
- Currency arbitrage alerts
🎓 Financial Education
- Interactive lessons on budgeting, saving, and investing
- Gamified challenges with rewards
- Personalized learning paths
- Video tutorials from experts
🌈 Customizable Themes
- Multiple color palettes (Lavender Dream, Rose Gold, Mint Fresh)
- Dark mode optimization
- Custom accent colors
- Personalized illustrations
🙏 Built with love for empowering financial wellness
Clara is more than an app—it's a companion for your financial journey. We believe that managing money should feel empowering, not overwhelming. With Clara, financial wellness is just a conversation away. 💜
Log in or sign up for Devpost to join the conversation.