learncrossplatform.dev
CROSS-PLATFORM APP DEVELOPMENT — A BOOK

Three real apps. Not to-do lists.

PWA, Capacitor, React Native, and Flutter — taught through a field-survey tool, a room-booking system, and a receipt-OCR expense tracker. Real race conditions, real offline sync, real parsers: the kind of complexity an AI assistant can't one-shot from a prompt. The transaction on the right is real, from Chapter 4.

Read Chapter 1 →Get the starter code →
services/bookingService.jsChapter 4 · Room Booking
// two users tap "Book" on the same slot at once —
// exactly one must win, the other must see it's taken

const bookingId = await runTransaction(db,
  async (transaction) => {
  const lockSnap = await transaction.get(lockRef);

  if (lockSnap.exists() && lockSnap.data().bookingId) {
    // slot already booked — stop, nothing is written
    throw new Error('SLOT_TAKEN');
  }

  transaction.set(newBookingRef, { status: 'confirmed' });
  transaction.set(lockRef, { bookingId: newBookingRef.id });
});

Why not a To-Do or Weather app?

Because an AI coding assistant one-shots those in a single prompt — they don't build the skills that actually matter: dynamic form engines, race conditions when two clients write at once, custom parsers for messy real-world input. Every project in this book is deliberately chosen to resist that.

WHAT YOU'LL BUILD

Three real, project-based apps

PWA → Capacitor · Ch. 2–3

Field Survey App

modeled after ODK Collect

A dynamic form engine, IndexedDB offline storage, and append-only sync — not a static form, a real data-collection tool.

React Native · Ch. 4

Room Booking

modeled after Robin / YAROOMS / LibCal

Firestore transactions that actually prevent double-booking under concurrent writes, plus a waitlist and realtime updates.

Flutter · Ch. 5

Expense OCR

modeled after Smart Receipts / Money Lover

ML Kit OCR wired to a real receipt parser — the kind of edge-case-riddled logic an AI assistant can't one-shot from a prompt.

THE BOOK

11 core chapters + 2 extensions

From choosing a stack (Native vs. Hybrid vs. Cross-platform vs. PWA) through architecture, backend integration, AI features, and shipping to the app stores — structured around the three projects above, in the order you'd actually build them: PWA → Capacitor → React Native → Flutter.

See the full table of contents →
WHO IT'S FOR
  • Web/backend developers moving into mobile
  • CS students who want project-based learning, not toy tutorials
  • Anyone deciding between Flutter, React Native, Capacitor, or PWA for a real product
COMING LATER

Video courses

A video course following the book is planned — join the waitlist above and you'll hear about it first, whether it ships on this site or on Udemy.

See course status →

Start with the free chapter

No login, no payment — just Chapter 1, in full.

Read Chapter 1 →