Deliveroo Food Ordering Clone with React Native (Expo Router, Zustand, Reanimated, Google API)

Поділитися
Вставка
  • Опубліковано 10 лют 2025

КОМЕНТАРІ • 146

  • @NiallKiddle-d9g
    @NiallKiddle-d9g 10 місяців тому +1

    Deserves so many more views! Please stick with this because the level of work that has gone into your videos, production quality and way of explaining is top level. I've been able to build an app from scratch for my business and it's saved me thousands because of it.

    • @galaxies_dev
      @galaxies_dev  10 місяців тому

      Wow thank you so much! And yes I will keep doing these 💪

  • @gmusic8812
    @gmusic8812 Рік тому +6

    This is awesome man, I'm currently on a project right now with Medusa Backend and Expo. This is just what I need!

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Awesome, let me know when you encounter any problems!

    • @gmartins-dev
      @gmartins-dev Рік тому

      What is the emulator config you are using please?@@galaxies_dev

  • @arun553
    @arun553 Рік тому

    Thanks!

  • @furkanuzun8845
    @furkanuzun8845 10 місяців тому

    Thanks 🙏

  • @Clytax
    @Clytax Рік тому +1

    What a great video! Its so hard to learn with only docs, these videos show you you do it HANDS On. Please continue doing these amazing vids

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Thanks, and I will do more of these bigger builds! Regarding Auth and Expo Router, I actually have a course on Galaxies as well: galaxies.dev/course/react-native-tanstack

  • @CirusDev
    @CirusDev Рік тому +2

    Thanks a lot Simon. Very cool staff. Keep going

  • @mishen-thakshana
    @mishen-thakshana Рік тому +1

    Thankyou so much Simon. I have learned lot of things because of you. Your teaching style is fun.

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Happy to hear that - would be awesome if you could share it with others 🙌

  • @arun553
    @arun553 Рік тому +1

    Thank you so much, I can't wait to watch this!

  • @SaketK11
    @SaketK11 Рік тому +1

    Thanx for this video man although i am stuck at google api thing but rest part is just awesome... definitely will be integrate it with my custome back-end

  • @raymondmichael4987
    @raymondmichael4987 Рік тому

    Cool project case & with TS,
    I never subscribed that fast;
    You got 1+ loyal subscriber from Tanzania 🇹🇿 😊

  • @arindamroy9783
    @arindamroy9783 Рік тому +3

    Hey great video thank you so much for all your efforts . Wish you all the best and hope you get more success

  • @Tobi__sb
    @Tobi__sb Місяць тому +2

    i'm watching the overview of the app, and i'm like, how the hell this guy did all of this in 5 hours

  • @lingadurai5805
    @lingadurai5805 6 місяців тому

    Thank you so much sir... love from india 🇮🇳

  • @josequintin2467
    @josequintin2467 Рік тому +1

    Great job, Grimm!

  • @wisdomelue
    @wisdomelue Рік тому +2

    really great, well done!

  • @kambaalayashwanth123
    @kambaalayashwanth123 11 місяців тому

    HI wondering if Preact signals can replace Zustand ? can you experiment a new project with Signals as a state manager
    Thank you

  • @SidraJabeen-b5l
    @SidraJabeen-b5l Рік тому +1

    @simon Grimm I don't know why my project is creating a dist folder for the file and giving me the error again and again like this --> Unable to resolve "../Components/CustomHeader" from "app\dist\_layout.js".It starts fine when I run the command npx expo but when I make changes and refresh it , it starts showing me the errors, I'm stuck here

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      IDK either, but it definitely should create or use a dist folder while developing!

    • @magatjonathan1383
      @magatjonathan1383 11 місяців тому

      I encountered similar problem and by just restarting everything and make it to build up again and that must solve it.

  • @justjase10
    @justjase10 Рік тому +3

    Can you do a text to speech ionic and react app that turns pdfs and epub file types to speech where users can listen to books and choose their preferred voice...

  • @CoderTraveler
    @CoderTraveler Рік тому +2

    *Good work Simon...*

  • @rustacean10
    @rustacean10 Рік тому +1

    whats the differece between tabs@49 template and expo router's initial "navigation typescript" (file based routing) template?

    • @galaxies_dev
      @galaxies_dev  Рік тому

      I think they just have 5 active templates at this point. Try starting an app without specifying it and you get to select!

  • @ilg3cko
    @ilg3cko 10 місяців тому

    You are amazing, I just started learning React Native and watching you play with vscode is breathtaking, one question, I love the color of vscode, what theme is it?

    • @galaxies_dev
      @galaxies_dev  10 місяців тому

      Thank you - it's Shades of Purple

  • @bernhoffb
    @bernhoffb Рік тому

    Ty for project!
    New to react native, so asking to help ( googled before, dont saw any working answer):
    i dont see header component in the start of video(nearly 13:00), shoding on my android virtual device, but i see header from same code in web version, in my browser.
    I understant, that this is local problem, but maybe you have simple answer to it? Ty again

  • @ZlatkoIliev-s4j
    @ZlatkoIliev-s4j Рік тому +1

    Hey Simon, really awesome tutorials! I love your channel! May I suggest the next video app clone? How about some finance app, like for example Revolut, Monzo, Monese or some other banking app, would be awesome if we have the features for creating a disposable card, see the transactions list. And my second idea is a public transport app, where you can buy tickets for train, bus, bike or whatever public transport is available, and then expo generates a QR code for your ticket so you can scan i on the machine on the bus, train... etc.

    • @galaxies_dev
      @galaxies_dev  Рік тому +2

      A Fintech app is actually exactly what I have planned for the next clone - thanks for your input!

  • @Mouni_MahendraNath
    @Mouni_MahendraNath Рік тому +1

    Nice thanks for sharing the knowledge, like and subscribed

  • @Zero-vn8yy
    @Zero-vn8yy Рік тому +1

    Loved it

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Give it a share to spread the gospel ✌️

  • @enzobosch9770
    @enzobosch9770 11 місяців тому +1

    excellent video simon, thank you very much.... One question, what extension do you use to give you the preview of the color in the variables, as in minute 23:15 (Colors.lightGrey)

    • @galaxies_dev
      @galaxies_dev  11 місяців тому

      I have 3, not sure which is used: Colorize, vscode-color-picker and react-native-stylesheet-color-palette

  • @movietime5333
    @movietime5333 Рік тому +1

    Unable to resolve "../Utilities/Platform" from "node_modules
    eact-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js" - Wie kriege ich das hin Simon ? :)

  • @wadf29
    @wadf29 Рік тому +2

    FYI. For the filter modal, the option presentation: "modal" is not supported for android devices.

    • @DZM47
      @DZM47 Рік тому

      yes same is the case with me. Does anyone know about it?

    • @דודואדרי-ש3כ
      @דודואדרי-ש3כ Рік тому

      I saw a workaround for android (not as it looks on iphone - i think it's an os issue) add in the options "animation:'slide_from_bottom'" and it will pop up from the bottom like a modal (well almost) 🙂

    • @DastinAnam
      @DastinAnam 16 днів тому

      thanks

    • @DastinAnam
      @DastinAnam 16 днів тому

      @@דודואדרי-ש3כ thanks

  • @cb73
    @cb73 Рік тому +7

    Missed opportunity to say “without further deliveroo” 😂

  • @ousssika5359
    @ousssika5359 Рік тому

    i don't have i way to generate a key , does your key still working ,

  • @israrahmad7035
    @israrahmad7035 Рік тому

    Error: Unable to resolve module @/Components/CustomHeader from E:\deliverooClone\app\_layout.tsx: @/Components/CustomHeader could not be found within the project or in these directories:
    node_modules
    2 | import {Stack } from 'expo-router';
    3 |
    > 4 | import CustomHeader from '@/Components/CustomHeader';

  • @דודואדרי-ש3כ
    @דודואדרי-ש3כ Рік тому

    great tutorial, i enjoyed it

  • @Matheus_1582
    @Matheus_1582 Рік тому +1

    Ola Simon, boa Noite...
    Você poreria recriar o Projeto do astro usando somente o CapacitorJs...
    Aquele que você fez no vídeo anterior...

  • @ousssika5359
    @ousssika5359 Рік тому +1

    thanks for everything ,

  • @fransenson
    @fransenson Рік тому +2

    When setting the animationStyles for the clear all button, instead of opacity, could you have used display: none? or is the display property not animatable? Because as it is now the done button is offset to the right slightly when the clear all button is not displayed, as with 0 opacity the border still "blocks" its own space in the dom

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Good idea, would have to try this out!

    • @jamilawada389
      @jamilawada389 Рік тому

      even why not border: none or something like that lol

    • @bugraotken
      @bugraotken Рік тому

      style={[styles.btnContainer, { gap: selected.length > 0 ? 12 : 0 }]} fixed the problem. And don't forget to delete gap key from styles.btnContainer

  • @jovanjevtic1620
    @jovanjevtic1620 6 місяців тому

    Isn't it a security issue to put your google api keys into .env file because it can be easely accessed from app binary. I think the best way to do it is to fetch it from a custom endpoint on the first opening and put it inside a scure storage. update: oh sorry, you just made it clear...

  • @mfaizhussain7
    @mfaizhussain7 6 місяців тому

    have any one run this on android
    the custom header not working does it work for you?

  • @ferrad1
    @ferrad1 Рік тому +1

    A Great Man !

  • @asvicnal8483
    @asvicnal8483 Рік тому +1

    This is great tutorial, can you do tutorial for Deep Linking integration next?

  • @jithinjacob8174
    @jithinjacob8174 Рік тому

    In the google places autocomplete/map modal you selected the location Berlin…it’s updated the state…searchInput. But the selected position is not updated in the Home screen. It’s still showing London. How to update the location in Home screen too?

    • @galaxies_dev
      @galaxies_dev  Рік тому

      You could use our Zustand state to keep track of the currently selected postion

    • @jithinjacob8174
      @jithinjacob8174 Рік тому

      @@galaxies_dev what you think of using useContext hook?

  • @armandulrichfadest4922
    @armandulrichfadest4922 Місяць тому

    thank you

  • @DomGarzaSR
    @DomGarzaSR Рік тому

    I'm using aws amplify, and I dont know if I should create my own location database using expo location and allow my users to add the place name or use google places.....I just don't want to eventually get to a place where their api dramatically changes in pricing like reddit

    • @galaxies_dev
      @galaxies_dev  Рік тому

      That's always the problem with external APIs. Maybe write a wrapper function in your backend which returns the AWS data - then you could swap it out in the future if it gets too costly!

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 7 місяців тому +1

    thank you so much

    • @galaxies_dev
      @galaxies_dev  7 місяців тому

      If you enjoyed it, maybe you can share the channel with your RN colleagues ✌️

  • @dev_jun
    @dev_jun Рік тому

    is that google map apis free or we need to add credit card for free tier

  • @mo.x9013
    @mo.x9013 8 місяців тому

    is the course still working and relevant

  • @m__link6499
    @m__link6499 Рік тому

    One of my goal goal was to learn how to pass information from a parent component to the child component, but unfortunatly you skip this part and put some static data (your vid: 2:37)... I'm stuck with this part. I use this script for instance in the Link tag : href={{ pathname: "DetailProduct",
    params: { image: item.mainImage}, and in the detailProduct I receive this params with useSearchParams from expo-router, but unfortunatly, I can display the image...Do you have an idea please? thanks for all...

    • @galaxies_dev
      @galaxies_dev  Рік тому

      As these params are basically part of the URL I wouldn't send any big data (like base64) in it! What is the image value you receive on the details page? If you can't display it, probably it was not passed correctly to the page!

    • @m__link6499
      @m__link6499 Рік тому

      @@galaxies_dev how can I see the image value that I receive please? All I know is the size that I provide for the image work very well 🤔

  • @jd-haque
    @jd-haque 3 місяці тому

    Has anyone able to get "click to scroll" working from the category plz?

  • @raihan7422
    @raihan7422 Рік тому

    Am i need card or pay for using maps api?

  • @yaser8354
    @yaser8354 Рік тому

    Awesome bro 🔥💪

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Thank you mate - what clone next??

    • @yaser8354
      @yaser8354 Рік тому

      @@galaxies_devsome ideas I would like to see: Spotify clone, Instagram clone with reels and messaging, Udemy, Discord or any video streaming app. Thank you mate!! ⭐

  • @hoangdinhthe1120
    @hoangdinhthe1120 Рік тому

    i have a question. can i use firebase to connect the project?

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Sure, why not?

    • @hoangdinhthe1120
      @hoangdinhthe1120 Рік тому

      @@galaxies_dev I'm stuck by google map platform's payment request and I don't have a credit card, what can I do?

  • @Cricfan209
    @Cricfan209 9 місяців тому

    Do we need to enable payment for places api

  • @TheSkeero
    @TheSkeero Рік тому

    Hey man... i have a question ... are you planning any tutorial about React Native Expo + Next.js (next-adapter) about routing and how to approach this type of app ? :)

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Yeah definitely want to talk about that setup soon as well!

    • @TheSkeero
      @TheSkeero Рік тому

      @@galaxies_dev Good to hear that ... im looking forward to it 👍

  • @Valentin2000258
    @Valentin2000258 Рік тому

    Hi! I have the following issue:
    I have created a React Native project by using the command "npx create-expo-app@latest MobileExp --template tabs@49"
    After that, I wrote the command "npm install -g expo-cli" to install the expo packages
    I have checked and I have both npm and npx versions up to date
    I have written the commands both inside the terminal of VS Code and the cmd of the file containing the project
    Whenever I use "expo start" it does nothing
    I previously created React Native projects, maybe it has something to do with that? Having npm installed globally or in a wrong manner?
    Let me know if u have any ideas on how to fix this issue. I haven't managed to find a solution with chatGPT (shame on me)
    It also tells me that there's no package.json in my project, even though there is, but it doesn't recognize it

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      I think I usually use the local package with "npx expo start"!

    • @Valentin2000258
      @Valentin2000258 Рік тому

      @@galaxies_dev I have tried that but it didn't fix it. It seems that the json locked file gets created outside of the project instead of inside. Even if I move it, it won't work, however, I'll dive into the documentation and give it a few more tries after reinstalling everything just in case

  • @OsamaHasan000
    @OsamaHasan000 Рік тому

    please tell me simon is android studio is necessary for this course?????????????? please

    • @galaxies_dev
      @galaxies_dev  Рік тому

      As we are using Expo all along the video this time you don't really need it!

    • @OsamaHasan000
      @OsamaHasan000 Рік тому

      @@galaxies_dev thanks

  • @galaxies_dev
    @galaxies_dev  Рік тому

    Join Galaxies.dev today - the Home of the Best React Native content🚀

  • @PercyMelody
    @PercyMelody Рік тому

    Why is it that every one avoids Google firebase login in expo, yets it's one of the most demand features 😢

  • @vitaliejalbu8206
    @vitaliejalbu8206 Рік тому +1

    Why you don’t used ionic + react? 👀👀

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Because I got a lot of Ionic examples already :)

  • @predofrazao
    @predofrazao Рік тому

    In Android, when we open a "fullScreenModal" from BottomSheetModal, the BottomSheetModal overrides the modal. Any ideas on how I can resolve this?
    Also, awesome tutorial, really appreciate it!

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Good question, I guess just some zIndex won't do :/ Will have to look into this!

    • @Giobaski
      @Giobaski 11 місяців тому

      @@galaxies_dev have you looked? :)

  • @drazensimonovic3197
    @drazensimonovic3197 Рік тому

    I have this error? Can someone tell me how to fix it?
    TypeError: Cannot read property 'toString' of undefined
    This error is located at:
    in BottomSheetGestureHandlersProvider (created by BottomSheet)
    in BottomSheet (created by BottomSheet)
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by RootLayoutNav)
    in RootLayoutNav
    in Unknown (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App) (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

    • @galaxies_dev
      @galaxies_dev  Рік тому

      That means you try to convert undefined to a string - check the values you pass to the sheet if any of them is undefined!

  • @gopalpoojary8964
    @gopalpoojary8964 Рік тому

    Can you create a application that can decode and give us the code of any application we inputed in it like the link of the required app and then it reads the whole app and start writing it's code for us so that we can customize that app the way we want?

  • @abdul-latifmohammed3276
    @abdul-latifmohammed3276 Рік тому +1

    awesome tutorials, but please the link to the images assets

  • @RavenXplod
    @RavenXplod Рік тому +1

    Please do these kinds of 4-5hr builds with ionic-react

  • @AkmalAshwin
    @AkmalAshwin 6 місяців тому

    wheres the payment gateway bruh

  • @acasareto
    @acasareto Рік тому

    the scrollview parallax component will eventually fail...

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Yeah I'll try and figure out something better!

  • @Matheus_1582
    @Matheus_1582 Рік тому

    Atomation App using just the Capacitor

  • @israrahmad7035
    @israrahmad7035 Рік тому

    answer plz

  • @davidlintin
    @davidlintin Рік тому

    Well this is 5 hours tomorrow sorted haha

  • @logiccomputer8000
    @logiccomputer8000 Рік тому +2

    please create ionic(angular) content

  • @syaefulbahri5315
    @syaefulbahri5315 Рік тому

    First? 😂

  • @Yasvantkumar-r1b
    @Yasvantkumar-r1b 9 місяців тому

    you're teching skill is good but u explaining everything is too fast please explain slow so that the begginers can easily understand

    • @galaxies_dev
      @galaxies_dev  9 місяців тому +1

      Thank you, will try to improve on that!

  • @MrAvelino2010
    @MrAvelino2010 Рік тому +1

    Transform into PWA

  • @HABIBAHBAWA
    @HABIBAHBAWA 8 місяців тому

    why Stack.Screen doesn't work with me ?

  • @WhatIfShowYT
    @WhatIfShowYT 11 місяців тому

  • @disgruntleddev
    @disgruntleddev Рік тому +1

    Have you tried restyle?

    • @galaxies_dev
      @galaxies_dev  Рік тому +2

      Not yet, it's on my list next to NativeWind and Tamagui!

  • @artyomgrigorev2186
    @artyomgrigorev2186 Рік тому +1

    this work for me
    npx create-expo-app@latest galfood2 --template tabs@50