🔴 Let's build Deliveroo 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
---
The much-anticipated build is FINALLY HERE!
Join me as I build the DELIVEROO CLONE with REACT NATIVE (yes we're building for iOS & Android!). You'll learn how to do the following in this build:
👉 Use Tailwind CSS with RN for awesome styling!
👉 Use React Native Heroicons to elevate your app design!
👉 Use React Native Navigation to navigate between screens!
👉 Implement Redux to add items to the user's basket and manage state!
👉 Use Sanity CMS to power the app's backend, allowing your team to easily update the contents of the app!
👉 Build a sleek animated checkout flow with an AWESOME UI/UX experience!
+ SO MUCH MORE!
🎙️ PODCAST
links.papareact.com/podcast
🌍 SOCIALS:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
❤️ SUPPORT
PAPA Merch: links.papareact.com/merch
Donate: links.papareact.com/donate
🕐 TIMESTAMPS:
00:00 Introduction
01:05 Build Showcase
03:17 Build Explanation (1/2)
04:49 Sanity Sponsorship
06:45 Build Explanation (2/2)
08:23 Expo Explanation
09:39 Setting Up Expo
16:41 Setting Up Tailwind CSS
20:17 Live Debugging
24:12 Setting Up React Native Navigation
29:08 Building the Home Screen
31:54 Building the Header Section of the Home Screen (1/2)
36:06 Implementing Heroicons
38:33 Building the Header Section of the Home Screen (2/2)
45:46 Building the Body Section of the Home Screen
46:47 Building the Categories of the Body Section (1/2)
47:47 Live Debugging Again!
54:00 Building the Categories of the Body Section (2/2)
01:01:17 Building the Featured Rows of the Body Section
01:16:29 Implementing Sanity
01:23:27 Adding and Changing Sanity Schemas
01:29:25 Adding Data in Sanity Studio (1/2)
01:39:03 GROQ Explanation
01:39:24 Querying in Sanity Studio (2/2)
01:41:50 Pulling Data from Sanity Studio
01:57:47 Building the Restaurant Screen
02:06:18 Building the Restaurant Info Section in the Restaurant Screen
02:11:49 Building the Menu Section in the Restaurant Screen
02:12:22 Building the Dish Rows in the Menu Section
02:25:59 Explaining and Implementing Redux
02:33:43 Implementing Add to Basket Functionality
02:43:14 Building the Basket Pop Up
02:51:21 Building the Basket Screen (1/2)
02:57:23 Implementing Grouping Menu Items Functionality
03:02:42 Building the Basket Screen (2/2)
03:17:03 Building the Placing Order Screen with Animations
03:24:48 Building the Delivery Screen (1/2)
03:32:33 Implementing the Map and Pin Functionality
03:36:37 Building the Delivery Screen (2/2)
03:40:05 Final Build Explanation and Demo
03:44:39 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Deliveroo and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.
#reactjs #reactnative #redux #tailwindcss #tailwind

Пікірлер: 357

  • @SonnySangha
    @SonnySangha Жыл бұрын

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @user-gl1sl8ro4w

    @user-gl1sl8ro4w

    7 ай бұрын

    В Ж Х В Жв В В Й ххххжэ❤ц❤уу ууу 😂м❤иии иу. 😂😂😢😢чу😅😂 ц

  • @cipotusoa

    @cipotusoa

    3 ай бұрын

    Why?

  • @correctcode367
    @correctcode367 Жыл бұрын

    Your builds always help me a lot to improve my coding skills in react, Dude. 🚀🚀 Thanks a lot, Sonny 🌷

  • @anuragpramanik6095
    @anuragpramanik6095 Жыл бұрын

    I really enjoy this channel's content on React Native - it's all based on real-life projects! Keep up the great work bro!

  • @EktaAnkitni
    @EktaAnkitni5 ай бұрын

    May the diyas light lead you onto the road of growth and prosperity. Happy Diwali!

  • @aisteinlaw1558
    @aisteinlaw1558 Жыл бұрын

    I learnt a lot of things in this video! Thanks to Sonny and Jay!

  • @rreay724
    @rreay724 Жыл бұрын

    just a heads up, tailwind react-native isn't supported anymore and is now nativewind. Super easy to install and works exactly the same. Only real difference I saw is that you don't need the TailwindProvider.

  • @BARHAMMUSIC007

    @BARHAMMUSIC007

    Жыл бұрын

    yes i searched for not find tailwindcss-react vhange to nativewind

  • @boxjellyfish8045

    @boxjellyfish8045

    Жыл бұрын

    Why classnames are not working in react native

  • @victoriaoflagos2281

    @victoriaoflagos2281

    8 ай бұрын

    You saved my life 🙏🏼 Been struggling with this

  • @bharatmahendragowda7662

    @bharatmahendragowda7662

    4 ай бұрын

    ​@BARHAMMUSIC007

  • @bharatmahendragowda7662

    @bharatmahendragowda7662

    4 ай бұрын

  • @nicholasbazzoni7084
    @nicholasbazzoni7084 Жыл бұрын

    half way through this absolute blast cheers from brooklyn. love your show man!

  • @DeniseNelson1
    @DeniseNelson1 Жыл бұрын

    Sonny! I miss joining you every week. The time difference makes it’s hard to catch you live but I want to thank you for continuing to make things easier to understand. I appreciate you and your hard work!

  • @muhammadtayyab2366

    @muhammadtayyab2366

    Жыл бұрын

    Dissenters the government divided Jack and smartphone oak dialysis patients did k jam sloop is discard

  • @sohrabhossain9905
    @sohrabhossain9905 Жыл бұрын

    Really loved your project and explanation ❤

  • @programmermaureen7201
    @programmermaureen7201 Жыл бұрын

    This was my first React Native Project and I built it, and it turned out so cool, thanks Sonny for this amazing project

  • @andrewnguyen2234

    @andrewnguyen2234

    Жыл бұрын

    I am trying to learn React Native, do I just download the source code and follow him?

  • @programmermaureen7201

    @programmermaureen7201

    Жыл бұрын

    @@andrewnguyen2234 You don't need to download the code, you can follow along and understand the code by web searching and yeah sonny explains it so well...

  • @khatariinsaan5284

    @khatariinsaan5284

    Жыл бұрын

    I also completed in 2 day step by step by learing the concepts ! It's Great !!

  • @laughingspunk9137

    @laughingspunk9137

    Жыл бұрын

    From where can I have the data which he has used ?

  • @programmermaureen7201

    @programmermaureen7201

    Жыл бұрын

    @@laughingspunk9137 bro you can make your data yourself in sanity studio you just need to create documents and put in the suitable data.

  • @joscript7846
    @joscript7846 Жыл бұрын

    Cool Am still practicing with the medium clone

  • @devsmith948
    @devsmith948 Жыл бұрын

    Really excited. Amazing video. It is really helpful for me. I am not sure what is different between expo-cli and react-native-cli. Which do you prefer?

  • @kedarkulkarni7426
    @kedarkulkarni7426 Жыл бұрын

    Hey Sonny, this tutorial is really great, I request you to share the links in the description you are using in the video that will help people after live to try. links means package links ,documentation links etc.

  • @patrickkioko8191
    @patrickkioko8191 Жыл бұрын

    looking forward to try sanity. And i dont know how i missed reminder for this yet i had subscribed !!!!!!

  • @AbiNephilim
    @AbiNephilim11 ай бұрын

    Incredible stream! Took me 5 days to follow this and code up my version of this project, I decided to use Typescript to get some experience with it - I'm a dev coming from a PHP / Laravel background with HTML, CSS and vanilla JS experience so this was my first time using React Native, Redux, Typescript, Tailwind and Sanity, and I have certainly learned alot. Next step is updating my version of this project to polish it abit more and make it different so I can add it to my portfolio. Thank you so much Sonny for this content! I've got a complete custom mobile app idea I've been meaning to get to so following this project has helped me learn immensely.

  • @khalilaliouich8246

    @khalilaliouich8246

    5 ай бұрын

    Hello, What was the backend used language here please?

  • @zeroclp4503
    @zeroclp4503 Жыл бұрын

    Just finished this app, amazing work Sunny, I guess this was a pretty good way to start with react-native. LOVE THE ENERGY.

  • @safwanebahho4805

    @safwanebahho4805

    Жыл бұрын

    Hi bro did you use the same image that sonny use if yes told how did you get him and thanks

  • @Zero-nw4hc

    @Zero-nw4hc

    Жыл бұрын

    Give the code

  • @Zero-nw4hc

    @Zero-nw4hc

    Жыл бұрын

    Do you have source code?

  • @oficinah2470
    @oficinah2470 Жыл бұрын

    Excelente Sonny, esta muy interesante la forma como explicas, gracias por tu aporte.

  • @bw7868
    @bw7868 Жыл бұрын

    Nice guy, Great coding, Beautiful music. Thanks for the awesome work.

  • @tdlearn3982
    @tdlearn3982 Жыл бұрын

    This tutorial is really great, thanks a lot 🤟🤟🤟

  • @BenGodot
    @BenGodot Жыл бұрын

    Great video, I loved it! I have one question: Is Ionic worth using?

  • @hasanhafiz
    @hasanhafiz Жыл бұрын

    You are just changing the tutorial culture. Huge respect ✊

  • @cinturonnegro1263
    @cinturonnegro1263 Жыл бұрын

    Hey bro! finally finished this app, hope this help me to get a better job! thanks man, i really appreciate this, keep working this way

  • @mr.juniordev8091

    @mr.juniordev8091

    Жыл бұрын

    Great job. One question, how are you showcasing it?

  • @notharsh
    @notharsh Жыл бұрын

    Amazing video. Thank you Sonny

  • @franciscojaviergonzalezsan2367
    @franciscojaviergonzalezsan2367 Жыл бұрын

    Just finished the app. Amazing tutorial! Thank you Sonny!

  • @oyeSAURABH

    @oyeSAURABH

    Жыл бұрын

    Can you please provide me with the source code or something, just for reference?

  • @typicalindiancoderwhowatch8458
    @typicalindiancoderwhowatch8458 Жыл бұрын

    Great build 🔥🔥

  • @lokindradangi
    @lokindradangi Жыл бұрын

    if your device is andriod then safeAreaview from react-native not gone work so import import { SafeAreaView } from 'react-native-safe-area-context'

  • @ratnakarmishra623

    @ratnakarmishra623

    Жыл бұрын

    Bhai safeAreaView not work android. So iska koi solutions do🙏🙏🙏

  • @hooyah

    @hooyah

    Жыл бұрын

    thanks. its work for me.

  • @devdanny4926

    @devdanny4926

    Жыл бұрын

    To target both devices... import { SafeAreaView } from "react-native"; you can use this: const styles = StyleSheet.create({ AndroidSafeArea: { paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, }, }); 😊😋 This works like charm!

  • @devdanny4926

    @devdanny4926

    Жыл бұрын

    UPDATE - import { SafeAreaView StatusBar, StyleSheet Platform, } from "react-native";

  • @ratnakarmishra623

    @ratnakarmishra623

    Жыл бұрын

    @@devdanny4926 bro flex-1 is not working. So this problem solution please 🙏🙏🙏

  • @zocky3282
    @zocky3282 Жыл бұрын

    Really love your projects and builds 😍👏👏

  • @godfreyndiritu9062
    @godfreyndiritu9062 Жыл бұрын

    You're simply the best Sonny

  • @user18501
    @user18501 Жыл бұрын

    Hey Sonny! Thank you for the amazing tutorials. I wonder, is there any other way to solve the grouping with items? without Object.entries. Can we push each item into separate array in redux store? because the syntax is very complicated and doesn't look reacty for me. Thanks in advance !

  • @diegodominguez6768
    @diegodominguez6768 Жыл бұрын

    Just finished this project! Thanks Sonny 👑

  • @priyanshupandey3148

    @priyanshupandey3148

    Жыл бұрын

    How did you get the sanity data ?

  • @priyanshupandey3148

    @priyanshupandey3148

    Жыл бұрын

    But how to get the sanity contents same as he has in his build?

  • @tl6359

    @tl6359

    Жыл бұрын

    How did you get the increment button on dishes in dishrow to reflect or update the number onPress

  • @prashantkumarsingh689
    @prashantkumarsingh689 Жыл бұрын

    Hey Sonny always do start with this music its just awesome

  • @devdanny4926
    @devdanny4926 Жыл бұрын

    If you agree that this is the best channel to learn reactNative in 2022 Gather here let's take some selfie😄😄😄

  • @fadbad
    @fadbad Жыл бұрын

    Great work Sonny, did you manage to push the repo to github? I couldn’t find it

  • @omerakkoca8263
    @omerakkoca8263 Жыл бұрын

    Thanks for the tutorial Sonny

  • @boedaqsunda4255
    @boedaqsunda4255 Жыл бұрын

    works, keep up the good work man

  • @RahulSharma-ke7wg
    @RahulSharma-ke7wg Жыл бұрын

    i just love this channel.whenever i come here

  • @artemiskim4916
    @artemiskim4916 Жыл бұрын

    Sonny how do you run your app from browser? Thanks for awesome tutorial!!

  • @parnaell7320
    @parnaell7320 Жыл бұрын

    Thank you so much! It work!

  • @marcossouzajr1711
    @marcossouzajr1711 Жыл бұрын

    Strapi can be used instead sanity? Thanks for this amazing tutorial!

  • @sankalpaneupane5954
    @sankalpaneupane5954 Жыл бұрын

    You're great man!!

  • @nemopeti
    @nemopeti6 ай бұрын

    Is there a tutorial for de dev environment setup, and the project/folder structure you suggest?

  • @SteeveDIm
    @SteeveDIm Жыл бұрын

    OMG Bro you're the best coder on YT 🔥🔥🔥

  • @justicefrancis2002
    @justicefrancis2002 Жыл бұрын

    i love this, respect

  • @skilla10101
    @skilla10101 Жыл бұрын

    Sonny wowwww lets finish this app bro. LETS GOOOO.

  • @eyosiyas_js
    @eyosiyas_js Жыл бұрын

    Ufffffff so cleannnnnnnnn. big fan my bro. Soon 1M bro keep going.

  • @silenttraveler1816
    @silenttraveler1816 Жыл бұрын

    Sonny this is excellent stuff, can you do a vedio on implementing codepush and appcenter on react native project too

  • @devitosolucoes7534
    @devitosolucoes7534 Жыл бұрын

    Great video. May I ask you, how much would you charge for exactly this service you done in this video? Thank you.

  • @shellykapoor1958
    @shellykapoor1958 Жыл бұрын

    you have installed react native using npx react-native-cli or with expo react native installed automatically

  • @renekutter7562
    @renekutter7562 Жыл бұрын

    I really like your videos and your personality. Greetings from germany ! :)

  • @mrcrypticxdev
    @mrcrypticxdev Жыл бұрын

    Would Ionic be a good alternative to Expo in your opinion?

  • @jamesvaughanllewellyn1315
    @jamesvaughanllewellyn1315 Жыл бұрын

    You are amazing Sonnny😁

  • @JoshuaMusau
    @JoshuaMusau10 ай бұрын

    YOU'RE A F*CKIN GENIUS. I totally love your channel.

  • @rachidb9624
    @rachidb96244 ай бұрын

    Thanks man !

  • @kshitizbathwal7509
    @kshitizbathwal7509 Жыл бұрын

    Do these project videos also include backend coding/architecture or just frontend?

  • @vincenttanguayy
    @vincenttanguayy Жыл бұрын

    You should do the driver app, i would love to see how it would look

  • @PattyBeautCode
    @PattyBeautCode Жыл бұрын

    Another clone that is going to change my web& mobile coding level ! Thanks Sonny and team for amazing work ! ! btw, see Jay for 5 second is very big bonus 😁👍🏻

  • @jay_4399

    @jay_4399

    Жыл бұрын

    HAHA Thanks!

  • @dfordemo981
    @dfordemo981 Жыл бұрын

    واہ سواد آگیا، بہت اعلٰی برو 😊👍👍

  • @ammesidd6669
    @ammesidd6669 Жыл бұрын

    Hey @Sonny Sangha your videos are amazing and help me to learn react with ease. I'm working on this deliveroo_clone but stuck on pulling data from sanity studio .I have put the data inside the sanity studio but the vision plugins do not shows any query. kindly help me to sort out this difficulty.

  • @valeredwandji3599
    @valeredwandji3599 Жыл бұрын

    tes video sont très pationnante. merci

  • @tomerhertz8502
    @tomerhertz8502 Жыл бұрын

    heya, great tutorial as always... ran into an error when connect sanity and trying to link the data to the app, especially the images - it relates up untill this point in the video 1:53:05 Error: Unable to resolve image URL from source (undefined), i used sonny projectId ...

  • @whoribleplayer
    @whoribleplayer Жыл бұрын

    I checked out your older videos, do you still solve rubiks cubes or lift?

  • @briancornielle2991
    @briancornielle2991 Жыл бұрын

    Totally completed. Thank you so much for this!!

  • @hamadurrehman7830

    @hamadurrehman7830

    Жыл бұрын

    File mean the whole project file

  • @sdn47payakumbuh10
    @sdn47payakumbuh10 Жыл бұрын

    thank you very very very much, you help me a lot

  • @JM-cf8zy
    @JM-cf8zy Жыл бұрын

    Would love a quick tutorial on FLEX-ROW, FLEX-1 ETC and how it correlates and works with a phone, most tutorials on the net are regarding HTML SITES etc. Its like one of the only things your videos confuse me with as i feel its not explained properly.

  • @natizerai
    @natizerai Жыл бұрын

    OMG this guys is legend!

  • @nirvanzentinal
    @nirvanzentinal Жыл бұрын

    excellent video bro 😍😍Can you do a flutter project too plz?

  • @maurokane1468
    @maurokane1468 Жыл бұрын

    Can you recommend any videos for Redux+FireStore CRUD?

  • @aarzooislam8238
    @aarzooislam82388 ай бұрын

    can i use this as a multi vendor !

  • @kennedyfreitas7548
    @kennedyfreitas7548 Жыл бұрын

    Hey there @Sonny Sangha bro, where do you those those image assets?

  • @universecode1101
    @universecode1101 Жыл бұрын

    It was great Sonny 👏🏻 In my experience switching from React to React Native, it's a little weird every time 😝 Cool project

  • @therevealmusic

    @therevealmusic

    Жыл бұрын

    yoo i see you in programming channels lets ggggggggggggggggggggooooooooooo

  • @ivity2353

    @ivity2353

    Жыл бұрын

    Hola! Cómo resolviste el error "can't find variable results"? 3:00:40 es donde aparece este error en el vídeo. No sé cómo resolverlo

  • @nemanjagligovic3506
    @nemanjagligovic35064 ай бұрын

    Sonny you are the best ❤

  • @Jashan77114
    @Jashan77114 Жыл бұрын

    is sanity similar to AEM ? We are going to use AEM in client project

  • @adamgerber7824
    @adamgerber7824 Жыл бұрын

    do you have a spotify playlist? music is right up my alley man

  • @yasirtawfeq3556
    @yasirtawfeq3556 Жыл бұрын

    Thanks a lot

  • @jimmyopot1972
    @jimmyopot1972 Жыл бұрын

    In Papa React I believe!!!

  • @hrishikeshjain2307
    @hrishikeshjain2307 Жыл бұрын

    Bro which music you are using on background while developing ?

  • @demo5052
    @demo50527 ай бұрын

    I have deployed sanity. Now what changes should I make in my react native app so that I can connect directly to sanity studio instead of localhost:3333

  • @nihaltiwari2479
    @nihaltiwari2479 Жыл бұрын

    Your content is crazy man

  • @frostyfreezemovies
    @frostyfreezemovies Жыл бұрын

    Osm sir ❤️ as usual ✌️

  • @adi9781
    @adi9781 Жыл бұрын

    The OG is back!

  • @shahxxx15
    @shahxxx15 Жыл бұрын

    Hi all who just saw the video , I have a question `how can we redirect to restaurant page when user click on category button on the top of screen ? Because I didn`t see something about this in this video . Thanks

  • @sheheryarqazi1006
    @sheheryarqazi1006 Жыл бұрын

    GOAT Teacher

  • @yusufguner6198
    @yusufguner6198 Жыл бұрын

    Guys can you help me how we filled the backend at sanity. I think ı missed the part where we filled our sanity restaurants , dishes , featured , categories . How can ı implement it to my own sanit studio. Or if he published his own sanity How can ı access to those sanity data and implement it to my own project.

  • @xqc7087
    @xqc70876 ай бұрын

    How to copy and load sanity data of application in my sanity project?

  • @sandeepsunny8467
    @sandeepsunny8467 Жыл бұрын

    Sonny trust me 1M sub coming soon 🔜…let’s celebrate in Birmingham…Nice content

  • @josbexerra8115
    @josbexerra8115 Жыл бұрын

    saludos mister sonny.....gracias a pesar que no tiene subtitulos se entiende......saludos de los andes peruanos

  • @calebcadainoo
    @calebcadainoo Жыл бұрын

    Completed build

  • @ivity2353

    @ivity2353

    Жыл бұрын

    Hello bro. How you fixed this error: ReferenceError: Can't find variable: results You see this error n the 3:00:40 help me please.

  • @andrewyzd7746
    @andrewyzd7746 Жыл бұрын

    what is the background music at the duration of Build Showcase?

  • @wolfheart4563
    @wolfheart456318 күн бұрын

    lol, i put on a youtube playlist for an essay, then when i woke up i have been hearing computer coding.

  • @vincenttanguayy
    @vincenttanguayy Жыл бұрын

    I would love to see the driver’s app for deliveroo. Can you make that happen?

  • @mdiaz2111
    @mdiaz2111 Жыл бұрын

    When I put false on headerShow , the navigation bar is still there? On a android

  • @user-pl7jd8jf4z
    @user-pl7jd8jf4z6 ай бұрын

    Nice

  • @Mills2fly
    @Mills2fly Жыл бұрын

    Hello great work… how can I get access to source code. I hit a speed bump that I can’t seem to get over

  • @Zack-oy2tz
    @Zack-oy2tz Жыл бұрын

    I feel like I need to smash the like Button 1000 times

  • @tvkiduniya6685
    @tvkiduniya6685 Жыл бұрын

    Please make more videos in react native and react js

  • @facebookrakesh5572
    @facebookrakesh55723 ай бұрын

    hello bro shadow not work in tailwind what i have to do?

  • @nafisfuad1318
    @nafisfuad13189 күн бұрын

    is there anyway i can copy your sanity dataset?

  • @zabashhd459
    @zabashhd459 Жыл бұрын

    can you do the rider application too ?

  • @kulvirsingh4568
    @kulvirsingh4568 Жыл бұрын

    Waheguru ji ka khalsa waheguru ji ki Fateh 🙏🙏 🔥🔥

  • @huanphan9070
    @huanphan9070 Жыл бұрын

    Hi, how can we access to see the backend data. This is unauthorized