Uploaded December 2024 | Updated September 2026, 3 weeks ago
Learn how to build a local-first, real-time shopping list app using Expo, TinyBase, Clerk, and Cloudflare Durable Objects. Explore offline capabilities, real-time syncing, and cross-platform functionality.
🔐 Clerk → go.clerk.com/P2SVHr3
📱 iOS Demo → apps.apple.com/us/app/shopping-list-sync-share/id6739513017
🌐 Web Demo → quicksynclist.com
💻 Code → https://codewithbeto.dev/projects/shopping-list-app
🛠️ Powered by Expo, TinyBase, Clerk, & Cloudflare.
👨🏻💻 ☕️ 🌟 Support My Work 🌟 ☕️ 👨🏻💻
If you find this project helpful and want to support my work, the best way is by enrolling in one of my courses:
- React Native Course → https://codewithbeto.dev/learn
- React with TypeScript Course → https://codewithbeto.dev/learnReact
- Git & GitHub Course → https://codewithbeto.dev/learnGit
For other ways to support my work, please consider:
- GitHub Sponsors: github.com/sponsors/betomoedano
- Become a Code with Beto channel member: youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join
You can also support me by using my referral links:
- Get an exclusive 40% discount on CodeCrafters: app.codecrafters.io/join?via=betomoedano
- Get a 10% discount on Vexo Analytics with code "BETO10": vexo.co
- Sign up for Robinhood and we'll both pick our own gift stock 🎁: join.robinhood.com/albertm-8254f5
- Get 500 MB of Dropbox storage: dropbox.com/referrals/AAC52bYrrPqp8FZ7K5gxa-I74wecLpiQuB4?src=global9
Your support helps me continue creating amazing projects!
⌚️ Timestamps ⌚️
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
👯 Join the Discord: discord.gg/dbYfWFw862
⭐️ If you want to learn more about me, check this links:
Code With Beto → https://codewithbeto.dev
🦋 → https://bsky.app/profile/codewithbeto.dev
X → https://x.com/betomoedano
Github → github.com/betomoedano
Linkedin → linkedin.com/in/betomoedano
Discord → discord.com/invite/G2RnuUD8
Medium → medium.com/@betomoedano01
Figma → figma.com/@betomoedano
⭐️ My apps & projects:
► Code With Beto: https://codewithbeto.dev/
► Eco Studios:https://www.ecostudios.dev/
⭐️ Contact: betomoedano@outlook.com
#reactnative #exporouter #mobiledevelopment
Learn how to build a local-first, real-time shopping list app using Expo, TinyBase, Clerk, and Cloudflare Durable Objects. Explore offline capabilities, real-time syncing, and cross-platform functionality.
🔐 Clerk → go.clerk.com/P2SVHr3
📱 iOS Demo → apps.apple.com/us/app/shopping-list-sync-share/id6739513017
🌐 Web Demo → quicksynclist.com
💻 Code → https://codewithbeto.dev/projects/shopping-list-app
🛠️ Powered by Expo, TinyBase, Clerk, & Cloudflare.
👨🏻💻 ☕️ 🌟 Support My Work 🌟 ☕️ 👨🏻💻
If you find this project helpful and want to support my work, the best way is by enrolling in one of my courses:
- React Native Course → https://codewithbeto.dev/learn
- React with TypeScript Course → https://codewithbeto.dev/learnReact
- Git & GitHub Course → https://codewithbeto.dev/learnGit
For other ways to support my work, please consider:
- GitHub Sponsors: github.com/sponsors/betomoedano
- Become a Code with Beto channel member: youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join
You can also support me by using my referral links:
- Get an exclusive 40% discount on CodeCrafters: app.codecrafters.io/join?via=betomoedano
- Get a 10% discount on Vexo Analytics with code "BETO10": vexo.co
- Sign up for Robinhood and we'll both pick our own gift stock 🎁: join.robinhood.com/albertm-8254f5
- Get 500 MB of Dropbox storage: dropbox.com/referrals/AAC52bYrrPqp8FZ7K5gxa-I74wecLpiQuB4?src=global9
Your support helps me continue creating amazing projects!
⌚️ Timestamps ⌚️
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
👯 Join the Discord: discord.gg/dbYfWFw862
⭐️ If you want to learn more about me, check this links:
Code With Beto → https://codewithbeto.dev
🦋 → https://bsky.app/profile/codewithbeto.dev
X → https://x.com/betomoedano
Github → github.com/betomoedano
Linkedin → linkedin.com/in/betomoedano
Discord → discord.com/invite/G2RnuUD8
Medium → medium.com/@betomoedano01
Figma → figma.com/@betomoedano
⭐️ My apps & projects:
► Code With Beto: https://codewithbeto.dev/
► Eco Studios:https://www.ecostudios.dev/
⭐️ Contact: betomoedano@outlook.com
#reactnative #exporouter #mobiledevelopment
