{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"vibe-coding-mobile-app-development","title":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents)","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development.json"},"slug":"ai-features-apis-and-payments","title":"AI Features, APIs & Payments","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/ai-features-apis-and-payments","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/ai-features-apis-and-payments.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → AI Features, APIs & Payments","purpose":"Add AI features safely through a backend proxy, charge with RevenueCat subscriptions, and engage users with push notifications — with prompts for each.","prerequisites":["Auth, Security & Secrets"],"afterThisChapter":["Testing Mobile Apps (Jest, Testing Library, Maestro & AI QA)"]},"agentLens":null,"topics":[{"id":"backend-proxy-for-llms","slug":"backend-proxy-for-llms","title":"Backend proxy for LLMs","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Never call an LLM provider with your key from the app."],"why":["They add the most risk (cost, compliance, spam), so putting them behind a backend with limits is essential."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Never call an LLM provider with your key from the app. Send the request to your edge function, which checks the user, applies limits and calls the model.","example":null,"mentalModel":"The app is the shop counter; the AI model, payment processor and notification service are suppliers you call from the back office, never from the shop window.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Backend proxy for LLMs and when do you use it in a mobile app?"],"practice":["Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode."],"interview":["Why should AI model calls from a mobile app go through your own backend?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://supabase.com/docs/guides/functions"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase","/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase","/blogs/10-payment-gateways","/blogs/lemon-squeezy-payment-with-next-js","/blogs/smallest-ai-agent","/blogs/15-micro-saas-ideas-actually-making-money-in-2026"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"streaming-and-ux","slug":"streaming-and-ux","title":"Streaming and UX","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Stream tokens for a responsive chat feel, show typing and error states, and let users cancel."],"why":["They add the most risk (cost, compliance, spam), so putting them behind a backend with limits is essential."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Stream tokens for a responsive chat feel, show typing and error states, and let users cancel. Cap input length and rate-limit per user.","example":null,"mentalModel":"The app is the shop counter; the AI model, payment processor and notification service are suppliers you call from the back office, never from the shop window.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Streaming and UX and when do you use it in a mobile app?"],"practice":["Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode."],"interview":["Why should AI model calls from a mobile app go through your own backend?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://ai-sdk.dev/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase","/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase","/blogs/10-payment-gateways","/blogs/lemon-squeezy-payment-with-next-js","/blogs/smallest-ai-agent","/blogs/15-micro-saas-ideas-actually-making-money-in-2026"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"cost-and-abuse-controls","slug":"cost-and-abuse-controls","title":"Cost and abuse controls","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Set per-user quotas, log token usage and pick the cheapest model that passes your evals."],"why":["They add the most risk (cost, compliance, spam), so putting them behind a backend with limits is essential."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Set per-user quotas, log token usage and pick the cheapest model that passes your evals. An unprotected AI endpoint can create a surprise bill.","example":null,"mentalModel":"The app is the shop counter; the AI model, payment processor and notification service are suppliers you call from the back office, never from the shop window.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Cost and abuse controls and when do you use it in a mobile app?"],"practice":["Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode."],"interview":["Why should AI model calls from a mobile app go through your own backend?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":[],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase","/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase","/blogs/10-payment-gateways","/blogs/lemon-squeezy-payment-with-next-js","/blogs/smallest-ai-agent","/blogs/15-micro-saas-ideas-actually-making-money-in-2026"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"in-app-purchases-with-revenuecat","slug":"in-app-purchases-with-revenuecat","title":"In-app purchases with RevenueCat","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["RevenueCat manages App Store and Google Play subscriptions, entitlements and receipts through one SDK."],"why":["They add the most risk (cost, compliance, spam), so putting them behind a backend with limits is essential."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"RevenueCat manages App Store and Google Play subscriptions, entitlements and receipts through one SDK. It needs a development build.","example":null,"mentalModel":"The app is the shop counter; the AI model, payment processor and notification service are suppliers you call from the back office, never from the shop window.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is In-app purchases with RevenueCat and when do you use it in a mobile app?"],"practice":["Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode."],"interview":["Why should AI model calls from a mobile app go through your own backend?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://www.revenuecat.com/docs"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase","/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase","/blogs/10-payment-gateways","/blogs/lemon-squeezy-payment-with-next-js","/blogs/smallest-ai-agent","/blogs/15-micro-saas-ideas-actually-making-money-in-2026"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"push-notifications","slug":"push-notifications","title":"Push notifications","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Use `expo-notifications` for permission, tokens and handling taps."],"why":["They add the most risk (cost, compliance, spam), so putting them behind a backend with limits is essential."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Use `expo-notifications` for permission, tokens and handling taps. Send from your server and use a development build for reliable testing on a real device.","example":null,"mentalModel":"The app is the shop counter; the AI model, payment processor and notification service are suppliers you call from the back office, never from the shop window.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Push notifications and when do you use it in a mobile app?"],"practice":["Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode."],"interview":["Why should AI model calls from a mobile app go through your own backend?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/versions/latest/sdk/notifications/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase","/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase","/blogs/10-payment-gateways","/blogs/lemon-squeezy-payment-with-next-js","/blogs/smallest-ai-agent","/blogs/15-micro-saas-ideas-actually-making-money-in-2026"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"analytics-and-crash-reporting","slug":"analytics-and-crash-reporting","title":"Analytics and crash reporting","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Track a few key events (sign-up, first action, purchase) and report crashes with Sentry so you learn from real use."],"why":["They add the most risk (cost, compliance, spam), so putting them behind a backend with limits is essential."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Track a few key events (sign-up, first action, purchase) and report crashes with Sentry so you learn from real use.","example":null,"mentalModel":"The app is the shop counter; the AI model, payment processor and notification service are suppliers you call from the back office, never from the shop window.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Analytics and crash reporting and when do you use it in a mobile app?"],"practice":["Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode."],"interview":["Why should AI model calls from a mobile app go through your own backend?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a 'summarise this note' button that calls an edge function with a per-user daily limit, and show a paywall for the Pro tier using RevenueCat's test mode.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.sentry.io/platforms/react-native/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase","/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase","/blogs/10-payment-gateways","/blogs/lemon-squeezy-payment-with-next-js","/blogs/smallest-ai-agent","/blogs/15-micro-saas-ideas-actually-making-money-in-2026"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:02:45.305Z"}