Introduction

We’ve talked a lot and set up a lot of infrastructure without even mentioning the mobile application. This is intentional – and the opposite of most AI, vibe coding, and no-code builders on the market, which focus on the UI immediately and treat infrastructure as an afterthought.

It’s common to use those tools for a while before struggling to get from the UI you’ve created to an actual stable production application on the App Store.

Why Infrastructure First?

Mosayic is an architecture framework, biased towards infrastructure rather than visual development. There’s a good reason to pay attention to this approach: it’s the difference between creating a stable, production-ready mobile application and creating a toy app.

Tip

It takes time upfront to get infrastructure set up correctly. But trying to do these things after you’ve started writing code and developing features can quickly turn into a nightmare – especially when using an AI assistant.

This is why it’s not uncommon for people to come to Mosayic after experiencing the limitations of tools like Lovable or FlutterFlow – realizing that getting from the initial visual stage to a stable production build is harder than expected.

But now that Firebase, Supabase, your local development environment, and your codebases on GitHub are set up, we can turn to the UI layer.

The “Dumb Frontend” Philosophy

Think of the mobile application codebase as a dumb frontend.

No Secrets

As mentioned before, secrets do not belong anywhere near this codebase. The only credentials in the mobile code are the Supabase URL and public key – and these are meant to be public, they’re not secrets.

Danger

API keys and other secrets do not belong in the mobile codebase – not even in the .env file.

Minimal Complex Logic

Complex logic doesn’t belong in the mobile codebase unless it’s highly visual (like with animations or graphs). For example, if you’re using an AI workflow or agent as a feature of your app, that belongs in the Python API, not the frontend.

This helps with:

• Separation of concerns
• Preventing AI overwhelm from parsing huge swathes of context

This is why the mobile codebase is a completely separate repository, worked on independently of the API.

Supabase Handles Data

Much of your database interaction is handled by Supabase directly (via the PostgREST API). You can set up views or RPC functions in Supabase and call them from the mobile app frontend.

React Native + Expo

Mosayic prepares a mobile application frontend written in React Native using Expo. This stack was chosen deliberately:

• One of the most popular stacks in mobile development today
• Plays exceptionally well with AI coding agents (unlike Flutter, where AI proficiency is noticeably weaker)
• Cross-platform: one codebase for iOS and Android
• Native feel: React Native interfaces with underlying native code, so iOS apps feel like iOS apps and Android apps feel like Android apps

Tip

With Expo, you can run your development build directly on your device – even on iOS without a Mac, using Expo Go. This can feel like magic, especially when coming from the Flutter community.

Getting Started

Don't get carried away with features

It’s tempting to dive into feature development, but resist the urge until the essentials are working.

Before building your first feature, aim to have these working:

1. Login flow
2. Profile page
3. Push notifications
4. Successful deployment to TestFlight and Play Store testing track

Always use development and feature branches in Git so you can roll back changes and build out your application gradually.

This infrastructure-first, architecture-based approach is what Mosayic is all about – distinct from the fun but ultimately limiting world of visual builders, no-code, and vibe coding.