Building a Mobile-First PWA with Next.js and Supabase

MatchPost lets tennis players record matches, generate shareable story cards, and climb group leaderboards. With 62% of traffic on mobile, a native-feeling Progressive Web App was the right call over a separate app build. Here is what shaped the architecture.

Why a PWA over native

A PWA gave us a single codebase, instant updates, and a frictionless “add to home screen” flow — no app store review cycle. For a fast-moving product validating its audience, that iteration speed is worth far more than native APIs we did not need yet.

Supabase as the real-time backbone

Supabase gave us PostgreSQL, auth, and real-time subscriptions out of the box. Leaderboards and group activity update live via Postgres changes, while row-level security keeps each player's data scoped correctly without a bespoke backend.

The iOS Safari reality check

iOS is where most PWA dreams meet friction. A few things that mattered:

• Correct apple-mobile-web-app-capable and status-bar meta tags so the installed app feels standalone.
• Designing around Safari's storage limits instead of assuming generous quotas.
• Testing the actual installed experience on a device — not just the browser tab — because they behave differently.

Mobile-first, genuinely

Mobile-first is not just a breakpoint order. Touch targets, thumb-reach layouts, and keeping the critical path lightweight all came first, with the desktop layout treated as the enhancement.

The takeaway

For a mobile-dominant product that needs to move fast, a Next.js + Supabase PWA hits a sweet spot: one codebase, real-time data, and an install experience close enough to native that most users never notice the difference.