Launch a Mobile App

Design app screens & prototype in Figma

Create the core screens for your mobile app and build an interactive prototype to validate the user flow before writing any code.

1. Create a new Figma project and set the frame size to iPhone 15 (393x852) or Android (360x800)
2. Design the 5 essential screens: onboarding/splash, signup/login, main dashboard, core feature screen, and settings/profile
3. Use Auto Layout on all frames so your designs adapt to different content lengths
4. Create a component library for buttons, inputs, cards, and navigation bars to keep things consistent
5. Connect screens with Figma's Prototype mode - add transitions for the main user flow (onboarding → signup → dashboard → feature)

Set up Supabase for database, auth & storage

Create your Supabase project with user authentication, database tables, and file storage for your mobile app.

1. Go to supabase.com and create a new project - note your project URL and anon key
2. Set up authentication: enable Email/Password and optionally Google and Apple OAuth providers under Authentication → Providers
3. Create your database tables using the SQL Editor - start with a profiles table linked to auth.users
4. Enable Row Level Security (RLS) on every table and write policies for user-scoped data access
5. Set up a Storage bucket for user uploads (profile photos, documents, etc.) with appropriate size limits

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

-- Create a profiles table linked to auth
create table public.profiles (
  id uuid references auth.users on delete cascade primary key,
  full_name text,
  avatar_url text,
  subscription_status text default 'free',
  created_at timestamptz default now()
);

-- Enable RLS
alter table public.profiles enable row level security;

-- Users can read/update their own profile
create policy "Users can view own profile"
  on public.profiles for select
  using (auth.uid() = id);

create policy "Users can update own profile"
  on public.profiles for update
  using (auth.uid() = id);

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

-- Trigger to auto-create a profile on user signup
create or replace function public.handle_new_user()
returns trigger as $$
begin
  insert into public.profiles (id, full_name, avatar_url)
  values (
    new.id,
    new.raw_user_meta_data->>'full_name',
    new.raw_user_meta_data->>'avatar_url'
  );
  return new;
end;
$$ language plpgsql security definer;

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute function public.handle_new_user();

Build API endpoints on Vercel

Create serverless API endpoints on Vercel that your mobile app will call for business logic, webhooks, and any operations that shouldn't run on the client.

1. Create a new Next.js project or a standalone Vercel serverless functions project
2. Install the Supabase server client: npm install @supabase/supabase-js
3. Create API routes for your core features - at minimum: user profile CRUD, and any server-side business logic
4. Add environment variables to your Vercel project: Supabase URL, service role key, and Stripe keys
5. Deploy to Vercel and test endpoints with a tool like Postman or curl

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

npx create-next-app@latest my-app-api --typescript --app
cd my-app-api
npm install @supabase/supabase-js stripe

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

import { createClient } from '@supabase/supabase-js'
import { NextResponse } from 'next/server'

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function GET(req: Request) {
  const authHeader = req.headers.get('Authorization')
  if (!authHeader) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const token = authHeader.replace('Bearer ', '')
  const { data: { user } } = await supabase.auth.getUser(token)

  if (!user) {
    return NextResponse.json({ error: 'Invalid token' }, { status: 401 })
  }

  const { data: profile } = await supabase
    .from('profiles')
    .select('*')
    .eq('id', user.id)
    .single()

  return NextResponse.json(profile)
}

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

Integrate Stripe for in-app purchases

Set up Stripe to handle one-time purchases or subscriptions, with webhook handlers that update your Supabase database.

1. Create products and prices in the Stripe Dashboard (e.g. Monthly Pro plan, Annual Pro plan, or one-time purchases)
2. Build a checkout API route that creates a Stripe Checkout Session or Payment Intent
3. Build a webhook handler at /api/webhooks/stripe to listen for checkout.session.completed and customer.subscription.updated events
4. Update the user's subscription_status in your Supabase profiles table when payments succeed
5. Test the full flow using Stripe's test card numbers (4242 4242 4242 4242)

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

import Stripe from 'stripe'
import { createClient } from '@supabase/supabase-js'
import { NextResponse } from 'next/server'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function POST(req: Request) {
  const body = await req.text()
  const sig = req.headers.get('stripe-signature')!

  let event: Stripe.Event
  try {
    event = stripe.webhooks.constructEvent(
      body, sig, process.env.STRIPE_WEBHOOK_SECRET!
    )
  } catch (err) {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object as Stripe.Checkout.Session
    const userId = session.metadata?.userId
    if (userId) {
      await supabase
        .from('profiles')
        .update({ subscription_status: 'pro' })
        .eq('id', userId)
    }
  }

  return NextResponse.json({ received: true })
}

Plan launch with Notion & build landing page

Create a comprehensive launch plan in Notion and build a landing page on Vercel to drive downloads and collect early interest.

1. Create a Notion workspace with pages for: Feature Roadmap (table), Launch Checklist (to-do list), Marketing Plan (doc), and Bug Tracker (table)
2. Fill in your launch checklist: app store listing copy, screenshots, privacy policy, terms of service, press kit
3. Build a simple landing page using your Vercel project - include app description, feature highlights, screenshots from Figma, and an email signup form
4. Set up pre-launch email collection using a simple form that writes to your Supabase database
5. Plan your launch day: social media posts, Product Hunt submission timing, email to your waitlist