Design app screens & prototype in Figma

~60 min

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

~45 min

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

-- 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);

-- 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

~60 min

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

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

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)
}

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

~45 min

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)

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

~60 min

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