--- description: Capawesome offers enterprise-grade solutions and services designed for teams building cross-platform apps with Capacitor. title: Lovable prompt - Capawesome image: https://capawesome.io/docs/assets/images/social/assets/images/posts/convert-lovable-app-to-mobile-app/lovable-prompt.png --- [🔐 Introducing the **Capacitor Vault** plugin — store secrets behind biometrics or a device passcode. ](/blog/announcing-the-capacitor-vault-plugin/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories # Lovable prompt Create a beautiful mobile-first expense tracker app called "Spendly". SCREENS: 1. Home screen with: 2. Gradient purple header with app name "Spendly" and current month 3. Three summary cards: Total Balance (large), Income (green), Expenses (red) 4. Recent transactions list (last 5) 5. Bottom navigation bar with: Home, Transactions, Add, Stats, Settings 6. Transactions screen with: 7. Full list of all transactions, grouped by date 8. Search bar at the top 9. Filter by category chips (All, Food, Transport, Shopping, Entertainment, Health, Other) 10. Add/Edit Transaction screen (modal or page) with: 11. Toggle: Income / Expense 12. Amount input (large, prominent) 13. Description text field 14. Category selector with emoji icons (🍔 Food, 🚗 Transport, 🛍️ Shopping, 🎬 Entertainment, 💊 Health, 📦 Other) 15. Date picker 16. Save button (purple gradient) 17. Transaction detail view with: 18. Full transaction info 19. Edit button 20. Delete button (with confirmation dialog) 21. Stats screen with: 22. Pie or donut chart showing spending by category 23. Bar chart showing income vs expenses by week 24. Top spending categories list DESIGN: * Color scheme: deep purple (#6C3CE1) and white, with green (#22C55E) for income and red (#EF4444) for expenses * Cards with subtle shadows and rounded corners (16px radius) * Smooth transitions between screens * Empty states with friendly SVG illustrations * Floating "+" action button on home and transactions screens * Clean sans-serif typography (Inter or similar) * Mobile viewport optimized (375px wide) FUNCTIONALITY (full CRUD): * Create: add income or expense transactions * Read: view all transactions, grouped and filtered * Update: edit any existing transaction * Delete: delete with a confirmation dialog before removing * All data persisted in localStorage * Format all amounts as currency ($ with 2 decimals) * Sort transactions by date descending PRELOADED SAMPLE DATA: Load the app with realistic sample transactions for the current month so it looks great on first open: * 2024-01-01: Salary +$3,500 (Income) * 2024-01-02: Grocery store -$85.50 (Food) * 2024-01-03: Uber -$12.30 (Transport) * 2024-01-04: Netflix -$15.99 (Entertainment) * 2024-01-05: Pharmacy -$34.00 (Health) * 2024-01-06: Amazon order -$67.80 (Shopping) * 2024-01-07: Coffee shop -$8.50 (Food) * 2024-01-08: Freelance project +$850.00 (Income) * 2024-01-09: Gas station -$55.00 (Transport) * 2024-01-10: Restaurant dinner -$42.00 (Food) * 2024-01-11: Gym membership -$30.00 (Health) * 2024-01-12: Online course -$29.99 (Shopping) * 2024-01-13: Bus pass -$22.00 (Transport) * 2024-01-14: Supermarket -$91.20 (Food) * 2024-01-15: Spotify -$9.99 (Entertainment) Only load this sample data if localStorage is empty (first time the app opens), so real user data is never overwritten. Use only frontend. No backend, no auth, no external APIs. June 26, 2026 Back to top