Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

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

Code with Beto via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to develop a comprehensive local-first, real-time shopping list application using modern cross-platform technologies in this extensive tutorial. Master the integration of Expo for cross-platform mobile development, TinyBase for local-first data management, Clerk for authentication, and Cloudflare Durable Objects for real-time synchronization. Explore advanced concepts including offline-first architecture, real-time data syncing across devices, and cross-platform functionality that works seamlessly on iOS, Android, and web platforms. Build authentication flows with sign-in, sign-up, and password reset functionality using Clerk's authentication system. Create reusable UI components including custom buttons, text inputs, and scroll views while implementing proper navigation patterns with Expo Router. Develop sophisticated data management solutions using TinyBase for local storage and synchronization, including creating persisters, synchronizers, and custom hooks for data operations. Implement advanced features such as QR code scanning for list sharing, swipe-to-delete functionality, emoji and color pickers for list customization, and comprehensive CRUD operations for shopping lists and items. Deploy and configure a synchronization server using Cloudflare Durable Objects to enable real-time collaboration between users. Master the complete development workflow from project setup and dependency management through deployment and testing, while learning best practices for local-first application architecture that prioritizes offline functionality and seamless synchronization when connectivity is available.

Syllabus

00:00 Intro
02:34 Demo
15:29 Prerequisites
16:05 Creating the project
18:31 Installing deps
22:49 Implementing auth with Clerk
24:58 Creating .env file
25:35 Auth flow with Expo Router
30:33 Adding Clerk provider
32:51 Adding Clerk token cache
37:39 Redirect unauthenticated users to sign up screen
39:28 Implementing sign in screen
43:02 Creating a reusable button component
54:27 Creating a reusable text input component
59:42 Adding header large title
01:01:06 Creating a reusable scroll view
01:02:46 Using new components in sign in screen
01:06:37 Using new components in sign up screen
01:12:08 Adding sign up logic
01:21:46 Adding reset password logic
01:28:59 Adding sign in logic
01:33:31 Adding home screen header buttons
01:37:27 Creating list route segment
01:40:11 Customizing list screens presentation
01:43:12 Implementing New List screen
02:00:33 Implementing Create List screen
02:11:12 Implementing Emoji/Color picker screen
02:32:43 Adding TinyBase provider
02:34:12 Creating TinyBase persister
02:39:47 Creating hook to create and start the persister
02:44:44 Creating ShoppingListStore component
02:52:42 Creating hook to create and start the synchronizer
02:58:31 Continue implementing ShoppingListStore component
03:02:46 Creating hook to get user id and nickname
03:04:31 Finishing and overview of ShoppingListStore component
03:06:09 Creating ShoppingListsStore component list of lists
03:13:58 Creating hook to save shopping lists
03:17:48 Adding ShoppingListsStore to home layout
03:18:21 Start working on the sync server
03:20:13 Installing toml files VSCode extension
03:21:40 Installing TinyBase in the server
03:21:53 Implementing sync server
03:26:08 Deploying the sync server to Cloudflare
03:28:04 Inspecting deployment in Cloudflare dashboard
03:29:58 Creating shopping lists
03:31:59 Creating list details screen
03:36:48 Displaying shopping list in home screen
03:41:55 Testing synchronization in local and deployed server
03:45:01 Creating list item component
03:52:07 Implementing swipe to delete
03:59:40 Improving UI for list details screen
04:04:39 Creating list product item component
04:07: 56 Creating product navigation segment
04:08:12 Creating new product screen
04:12:27 Creating share and edit list screens
04:13:05 Implementing edit list screen
04:17:29 Implementing scan QR code screen
04:24:53 Implementing share list screen
04:29:06 Implementing list product details screen
04:32:03 Adding sign out button
04:32:49 Adding delete account button
04:34:50 Recap and testing app features
04:36:48 Outro

Taught by

Code with Beto

Reviews

Start your review of Build a Local-First Real-Time Shopping List App with Expo, TinyBase, Clerk and Cloudflare

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.