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

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 → https://go.clerk.com/P2SVHr3 📱 iOS Demo → https://apps.apple.com/us/app/shopping-list-sync-share/id6739513017 🌐 Web Demo → https://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: https://github.com/sponsors/betomoedano - Become a Code with Beto channel member: https://www.youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join You can also support me by using my referral links: - Get an exclusive 40% discount on CodeCrafters: https://app.codecrafters.io/join?via=betomoedano - Get a 10% discount on Vexo Analytics with code "BETO10": https://vexo.co - Sign up for Robinhood and we'll both pick our own gift stock 🎁: https://join.robinhood.com/albertm-8254f5 - Get 500 MB of Dropbox storage: https://www.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: https://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 → https://github.com/betomoedano Linkedin → https://www.linkedin.com/in/betomoedano/ Discord → https://discord.com/invite/G2RnuUD8 Medium → https://medium.com/@betomoedano01 Figma → https://www.figma.com/@betomoedano ⭐️ My apps & projects: ► Code With Beto: https://codewithbeto.dev/ ► Eco Studios:https://www.ecostudios.dev/ ⭐️ Contact: [email protected] #reactnative #exporouter #mobiledevelopment