Build a Local-First Real-Time Shopping List App with Expo, TinyBase, Clerk & Cloudflare

Learn how to build a fully featured local-first shopping list app that works on web, Android, and iOS using Expo. You'll learn real-time synchronization across devices with TinyBase and Cloudflare Durable Objects, plus user authentication with Clerk.

You’ll see how to implement offline support, real-time collaboration, and an invite system with deep linking and QR codes. This is great for developers wanting to build universal apps with seamless sync and authentication.

What's inside

• Overview of the tech stack: Expo, TinyBase, Clerk, Cloudflare
• Setting up user authentication with Clerk and custom email flow
• Creating and managing shopping lists with emoji and color customization
• Real-time sync and collaboration across devices and platforms
• Implementing offline support and conflict resolution with TinyBase
• Inviting users via deep links and QR codes using Expo Router
• Demo of UI features: swipe-to-delete, toggling items, and light/dark mode
• Handling app state changes and syncing data after offline edits

Overview of the tech stack: Expo, TinyBase, Clerk, Cloudflare

The app is built with Expo for React Native, enabling a universal app on web, Android, and iOS. TinyBase is used as a reactive local-first data store, providing offline support and reactive queries for fast development.

Cloudflare Durable Objects power the sync server, enabling real-time collaboration and synchronization across multiple devices and users sharing the same shopping list. This setup ensures the app is local-first, not local-only, syncing data seamlessly when online.

Clerk handles authentication, providing first-class React Native support and easy integration for email-based sign-in flows. This combination unlocks a robust, real-time, multi-user shopping list experience.

Setting up user authentication with Clerk and custom email flow

Authentication uses Clerk with a custom email flow to speed up App Store review. Users sign up with email and password, then verify their email via a code sent by Clerk.

I show signing up, verifying the email code, and logging in on multiple devices. Clerk allows customizing emails with branding and icons. This setup supports individual and shared shopping lists by associating data with authenticated users.

Clerk’s React Native support makes integration straightforward, and I invite feedback for future videos on adding Google or other providers.

Creating and managing shopping lists with emoji and color customization

Users can create new shopping lists with a name, emoji, and color. The UI lets you pick an emoji like an apple or banana and select a color to personalize each list.

Inside a list, you add products with names and quantities. The app supports swipe-to-delete gestures for removing items. Changes to emoji or color update in real time across devices.

This customization enhances the user experience and demonstrates reactive UI updates tied to TinyBase’s local store.

Real-time sync and collaboration across devices and platforms

The app syncs data in real time using Cloudflare Durable Objects as the sync server. Changes made on one device instantly appear on others logged into the same account or shared list.

I demonstrate adding and editing items on an iPhone and seeing updates immediately on another iPhone and the web. User initials appear next to items to show who created them.

This real-time collaboration works across platforms and devices, making the shopping list truly universal and multi-user.

Implementing offline support and conflict resolution with TinyBase

TinyBase handles offline support by storing changes locally when the device is offline. The app shows an offline indicator and lets users keep editing.

When connectivity returns, TinyBase syncs changes with the server and merges updates without conflicts. I show adding items offline, then reconnecting and seeing data sync seamlessly.

Conflict resolution is automatic and handled by TinyBase’s complex algorithms, so developers don’t need to manage merge logic manually.

Inviting users via deep links and QR codes using Expo Router

The app includes an invite system that supports deep linking and QR codes. Users can share a QR code representing a shopping list invite.

Scanning the QR code opens the app via Expo Router deep linking, navigating directly to the join list screen with the list ID pre-filled. Users can then join shared lists easily.

This feature enables smooth onboarding for collaborators and demonstrates integrating Expo Router with deep linking and camera access.

Demo of UI features: swipe-to-delete, toggling items, and light/dark mode

The UI supports swipe gestures to delete items, toggling items as done or undone, and switching between light and dark modes.

I show toggling the theme and how UI updates reflect instantly on all devices. Swipeable components provide intuitive item deletion.

These UI details improve usability and showcase how reactive state management with TinyBase drives the interface.

Handling app state changes and syncing data after offline edits

The app monitors network status and shows when the user is offline. Edits made offline are saved locally and synced once back online.

I demonstrate turning off Wi-Fi, making changes, then reconnecting and watching the data sync automatically. This ensures data consistency and a smooth user experience.

TinyBase handles syncing and conflict resolution in the background, simplifying app logic.

Resources

CourseReact Native course

Learn fundamentals and shipping-ready concepts for React Native apps.

YouTubeBuild a Local-First Real-Time Shopping List App

Watch the full video demo and code walkthrough.