Overview
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