Code with Beto
Code with Beto
  • Видео 77
  • Просмотров 1 132 120
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 → go.clerk.com/P2SVHr3
📱 iOS Demo → apps.apple.com/us/app/shopping-list-sync-share/id6739513017
🌐 Web Demo → quicksynclist.com/
💻 Code → 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 → codewithbeto.dev/learn
- React with TypeScript Course → codewithbeto.dev/learnReact
- Gi...
Просмотров: 12 064

Видео

Expo Mesh Gradient | New Mesh Gradient in React Native
Просмотров 1,1 тыс.21 день назад
Learn how to implement and use the new Expo Mesh Gradient module introduced in Expo SDK 52. 👨🏻‍💻 ☕️ 🌟 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: codewithbeto.dev/learn - React with TypeScript Course: codewithbeto.dev/learnReact - Git & GitHub Course: codewithbeto.dev/learnGit F...
React with TypeScript Course | Learn from Zero to Hero 2025
Просмотров 5 тыс.Месяц назад
Elevate your development skills by mastering React with TypeScript, from the fundamentals to advanced concepts. ⚛️ React with TypeScript Course → codewithbeto.dev/learnReact 👨🏻‍💻 ☕️ 🌟 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: codewithbeto.dev/learn - React with TypeScript Cour...
Track Analytics Like a Pro: Vexo Analytics for React Native Apps
Просмотров 979Месяц назад
Learn how to integrate analytics in your React Native app in minutes! Vexo website: vexo.co You can use code "BETO10" for 10% OFF using Vexo (if you decide to upgrade) Here's my previous video about Vexo: ruclips.net/video/6bQ3a0AtXWA/видео.html Check the app source code: github.com/livestorejs/examples React Native Course: codewithbeto.dev/learn React with TypeScript Course: codewithbeto.dev/l...
How to Setup a New MacBook Pro for Software Development | Step by Step
Просмотров 7 тыс.Месяц назад
In this tutorial, we setup a new MacBook Pro for software development. Here’s a link to download Arc, the browser I was telling you about! arc.net/gift/a9ab2520 React Native Course: codewithbeto.dev/learn React with TypeScript Course: codewithbeto.dev/learnReact 👨🏻‍💻 ☕️ 🌟 Support My Work 🌟 ☕️ 👨🏻‍💻 If you find this project helpful and want to support my work, the best way is by enrolling in one ...
Sending Over-the-Air (OTA) Updates with EAS Update | Step-by-Step Guide
Просмотров 3,5 тыс.Месяц назад
In this tutorial, we dive into EAS Update for over-the-air (OTA) updates in Expo. Key topics include runtime version, EAS CLI setup, EAS Build configuration, and channel management for updates. We'll also cover using the -h CLI flag for command help, along with tips for republishing and rolling back updates seamlessly. Source Code: codewithbeto.dev/projects/snake-game React Native Course: codew...
Expo Notifications with EAS | Complete Guide
Просмотров 16 тыс.3 месяца назад
This video demonstrates how to set up push notifications in an Expo project. It covers configuring Firebase for FCM v1 on Android, setting up iOS and Android credentials on EAS, building with EAS Build, and testing with Expo Notifications tool. Let’s dive in! Source Code: github.com/betomoedano/expo-notifications-app.git React Native Course: codewithbeto.dev/learn React with TypeScript course: ...
Building an Obscura Pro Camera App with React Native Vision Camera and Expo: A Step-by-Step Tutorial
Просмотров 7 тыс.4 месяца назад
Learn to create a professional camera app using Expo and Vision Camera. This tutorial covers permission handling, UI styling, photo capture, advanced camera controls, and smooth animations. Source Code: codewithbeto.dev/projects/obscura-clone React Native Course: codewithbeto.dev/learn React with TypeScript course: codewithbeto.dev/learnReact 👨🏻‍💻 ☕️ 🌟 Support My Work 🌟 ☕️ 👨🏻‍💻 If you find this...
Building a Notion Clone with React Native Expo & Prisma | Local-First Tutorial
Просмотров 13 тыс.5 месяцев назад
Building a Notion Clone with React Native Expo & Prisma | Local-First Tutorial
Tutorial React Native Form Sheet with React Navigation v7
Просмотров 4,2 тыс.6 месяцев назад
Tutorial React Native Form Sheet with React Navigation v7
React Navigation v7: Static Routes, Auth Flows, Animations & More!
Просмотров 3,7 тыс.6 месяцев назад
React Navigation v7: Static Routes, Auth Flows, Animations & More!
How to Create Beautiful Linear Gradients in Your Expo App
Просмотров 2,4 тыс.6 месяцев назад
How to Create Beautiful Linear Gradients in Your Expo App
Drag and Drop Tutorial | React, NextJS, Beautiful DnD, TypeScript 2024
Просмотров 2,6 тыс.6 месяцев назад
Drag and Drop Tutorial | React, NextJS, Beautiful DnD, TypeScript 2024
Master React Native Charts | Tutorial for Dynamic Data Visualization
Просмотров 9 тыс.6 месяцев назад
Master React Native Charts | Tutorial for Dynamic Data Visualization
Building a Snapchat Clone with Expo Camera | React Native Tutorial
Просмотров 13 тыс.6 месяцев назад
Building a Snapchat Clone with Expo Camera | React Native Tutorial
Master SF Symbols in React Native with Expo Symbols
Просмотров 1,4 тыс.6 месяцев назад
Master SF Symbols in React Native with Expo Symbols
Blur Bottom Sheet using React Navigation | React Native Expo Tutorial
Просмотров 4,8 тыс.6 месяцев назад
Blur Bottom Sheet using React Navigation | React Native Expo Tutorial
React Native Analytics with Vexo | Custom Dashboard Tutorial
Просмотров 8226 месяцев назад
React Native Analytics with Vexo | Custom Dashboard Tutorial
Building an Android APK with React Native CLI
Просмотров 6 тыс.8 месяцев назад
Building an Android APK with React Native CLI
React Native Environment Setup for Mac (Apple Silicon)
Просмотров 23 тыс.9 месяцев назад
React Native Environment Setup for Mac (Apple Silicon)
Building a Budget Buddy App with React Native Expo SQLite
Просмотров 32 тыс.10 месяцев назад
Building a Budget Buddy App with React Native Expo SQLite
Expo Router | Beginner's Crash Course
Просмотров 21 тыс.11 месяцев назад
Expo Router | Beginner's Crash Course
Building a Custom Git Implementation with Node.js
Просмотров 1,4 тыс.Год назад
Building a Custom Git Implementation with Node.js
Mastering Redux Toolkit Query | Tutorial for Beginners | React | TypeScript | ExpressJS
Просмотров 1,4 тыс.Год назад
Mastering Redux Toolkit Query | Tutorial for Beginners | React | TypeScript | ExpressJS
🎉 Exciting News: Starting a New Job and Upcoming Plans!
Просмотров 804Год назад
🎉 Exciting News: Starting a New Job and Upcoming Plans!
Building a Talk ChatGPT App with React Native Expo, NestJS, Google Text-to-Speech, OpenAI and TS
Просмотров 18 тыс.Год назад
Building a Talk ChatGPT App with React Native Expo, NestJS, Google Text-to-Speech, OpenAI and TS
Sign In with GitHub and Firebase Auth | React Native Expo 49 | TypeScript
Просмотров 4,7 тыс.Год назад
Sign In with GitHub and Firebase Auth | React Native Expo 49 | TypeScript
Building a Threads Clone with React Native, TypeScript & Expo!
Просмотров 38 тыс.Год назад
Building a Threads Clone with React Native, TypeScript & Expo!
How to Ship Apps Faster as a Software Engineer
Просмотров 765Год назад
How to Ship Apps Faster as a Software Engineer
React Native Slider | Tutorial for Beginners
Просмотров 6 тыс.Год назад
React Native Slider | Tutorial for Beginners

Комментарии

  • @codewithbeto
    @codewithbeto 13 часов назад

    codewithbeto.dev/learn

  • @vedatsozen
    @vedatsozen День назад

    You collect all tab stack draw in navigation.js i liked that. İ need to watch this video several times to learn well this structure. So we can make a mobile app like twitter that people become user with for example gmail with google auth and share their texts or images.

  • @themsv7
    @themsv7 2 дня назад

    Is that possible without using Firebase?

  • @zenitsu4139
    @zenitsu4139 3 дня назад

    can we do it without creating fcm? like direclty calling the expo push service api

    • @zenitsu4139
      @zenitsu4139 2 дня назад

      as for android we need to setup fcm, but for apple we also need to build such?

    • @zenitsu4139
      @zenitsu4139 2 дня назад

      finnally got it working, thx a lot!!

  • @chinwizuekwe4129
    @chinwizuekwe4129 3 дня назад

    My push notification have been working perfectly in development build but it doesn't work when I build an apk. Please what can be the cause. Also if I build for release on google playstore will the push notification work? Thanks

  • @ahmedelsa3dy603
    @ahmedelsa3dy603 4 дня назад

    it's not a splash !!! ;(

  • @MuteebAhmad-f9o
    @MuteebAhmad-f9o 4 дня назад

    getting this error "Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0." how can i come over this im using EXPO sdk 51 to make the build for my application

  • @king-virat-kohli
    @king-virat-kohli 5 дней назад

    Awesomee🎉🎉

  • @princesiachin279
    @princesiachin279 5 дней назад

    Now how can I push all the notification to all the installed app without inserting the token one by one in Push Notifications Tool?

  • @JoaoVitorAguiar-vn6mn
    @JoaoVitorAguiar-vn6mn 6 дней назад

    Ei Daniel, como ta as bala ai no sumaré?

  • @umairshamoon4288
    @umairshamoon4288 6 дней назад

    Hey Beto! I want to ask a question form you if i Want to implement the push notifications like linkedin when someone shared my post , liked my post or perform any other action related to me then how can i do that?

  • @ricardotech
    @ricardotech 7 дней назад

    nice

  • @sietze4716
    @sietze4716 7 дней назад

    For anyone who is following along but does not want to set up a paid cloudflare subscription. You can host it locally but need to define an ip to listen on. eg. "dev": "wrangler dev --ip 0.0.0.0".

  • @aghileslounis
    @aghileslounis 7 дней назад

    The only thing I can't find in the Tinybase docs or in this video is adding authentication to Tinybase Cloudflare sync because for now, the clerk auth you're using is basically useless, since there is no server-side checks to access data and sync it, we can easily pull any data from any userId without verification. Please correct me if I'm wrong.

  • @jimmyinnocent9884
    @jimmyinnocent9884 7 дней назад

    I have been looking for fixes on push notifications where it works perfectly on expo go dev mode, but not on standalone APK, does this tutorial work on APK? would appreciate your answers guys, thank you

  • @PlatinumNetworkRP
    @PlatinumNetworkRP 8 дней назад

    How can run the app after downloading the project as a ZIP what do i need to setup to run it

    • @codewithbeto
      @codewithbeto 8 дней назад

      Click on the GitHub button, you’ll find instructions

    • @PlatinumNetworkRP
      @PlatinumNetworkRP 8 дней назад

      @@codewithbetook thankyou , also I can’t use the app from App Store says it’s reached 100 users so I can’t create account on IOS but can on Web

    • @PlatinumNetworkRP
      @PlatinumNetworkRP 8 дней назад

      @ running into an issue with @types/react when running npx expo start

  • @hendoitechnologies
    @hendoitechnologies 8 дней назад

    Sir, we followed this video and successfully installed the latest version of React Native CLI on our Windows 10 OS HP laptop with an i5 processor and sufficient RAM. We also installed Node.js version 18 and the latest version of Android Studio (Ladybug). Everything worked properly initially, but when we started installing packages like react-native-safe-area-context, react-native-reanimated, and other npm packages, we continuously faced compatibility issues. Despite trying multiple times, we are unable to resolve the build errors. Could you please help us fix this issue?

  • @LucasHenrique-lv8mc
    @LucasHenrique-lv8mc 9 дней назад

    Nice video! As suggestion could replace context on selectedColor and selectedEmoji and use router params in emoji-picker and color-picker modal. Each modal send params using route.replace and we can get this params on createScreen with useLocalSearchParams Hook. It's easier and avoid contexts complexity.

  • @davidentzat5671
    @davidentzat5671 9 дней назад

    Very good tutorial! Please, I would love to see more videos about TinyBase, thanks

  • @mohammadabbas1623
    @mohammadabbas1623 9 дней назад

    This looks interesting

  • @Adamskyization
    @Adamskyization 9 дней назад

    Thank you Feels like a lot of boiler plate over here just to make notifications work.

  • @simone.giordano
    @simone.giordano 9 дней назад

    so the sync engine isn't available yet for prisma?

  • @irfaanvallapilm3847
    @irfaanvallapilm3847 9 дней назад

    The value you provide in this channel is too much for free! Cheers to you man! May God Bless people like you ! <3

  • @hiilaloruc
    @hiilaloruc 9 дней назад

    That's very good feature. I loved and gonna use that!

  • @bzmrgonz
    @bzmrgonz 10 дней назад

    Love it buddy! Great job. Fun fact, there is no modern day gift registration app out there. So I would love to hear your thoughts on how you would turn this into a gift registry app.

  • @lesjoni8347
    @lesjoni8347 10 дней назад

    Wait, is there a way to add a custom button in notification or even show an image? Also, I didn't see in video about local notifications 😕

  • @megamind452
    @megamind452 10 дней назад

    Is anyone else having issues with build after installing expo-updates with new architecture?

  • @codesus99
    @codesus99 10 дней назад

    Great video , heres some of other cool tools i use for development Terminal : Warp Db tool : Beekeper studio Npm , Php : Laravel herd API : Hoppscotch ( formerly Postwoman ) SSH : Termius

  • @abdelhameedhamdy
    @abdelhameedhamdy 10 дней назад

    Awesome, I have to admit that dealing with TinyBase is complicated and a bit weird.

  • @orebimbo-salami4107
    @orebimbo-salami4107 10 дней назад

    I wonder if tinybase could be used alongside tanstack query

  • @GuerdonIsaldina
    @GuerdonIsaldina 10 дней назад

    Thanks for the forecast! Could you help me with something unrelated: My OKX wallet holds some USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?

  • @hoangng16
    @hoangng16 10 дней назад

    Perhaps, we need a more detailed introduction regarding local first app, what it is and why to build it

  • @webmobile21
    @webmobile21 10 дней назад

    Please make a tuto for .env file, how should we secure our api keys, thanks for everything, you are the best

  • @ClashwithSans
    @ClashwithSans 11 дней назад

    Thanks Beto learned something new

  • @sepudevt7045
    @sepudevt7045 11 дней назад

    Awesome content, Beto do you have some video with release process with expo apps? Greetings

    • @codewithbeto
      @codewithbeto 11 дней назад

      Hmm 🤔 I don’t have any. I’ll add it to the list

    • @sepudevt7045
      @sepudevt7045 11 дней назад

      @ sounds amazing, would be extremely helpful to us

  • @anshnanda
    @anshnanda 11 дней назад

    The app doesn’t open in Airplane mode. How is it local-first?

    • @codewithbeto
      @codewithbeto 11 дней назад

      Are referring to the app downloaded from the AppStore?

  • @tachroutine
    @tachroutine 11 дней назад

    Will this work on Android

  • @cesswhite
    @cesswhite 11 дней назад

    Nice implementation 🙏

  • @metalcodebr
    @metalcodebr 11 дней назад

    Thanks!! awesome projetct!

  • @treksis
    @treksis 11 дней назад

  • @MrAvelino2010
    @MrAvelino2010 11 дней назад

    Congratulations Beto. As part of the expo Team. I would like to suggest you to create a plugin to generate PWA of expo Apps ❤