๐Ÿ”ด Let’s build Deliveroo 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)

๐Ÿ“ฉ Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

I asked Sanity to hook up some free stuff for this video… They made a custom ๐Ÿ”ฅ boosted free plan ๐Ÿ‘‰ https://www.sanity.io/sonny

โ—๏ธJoin the worldโ€™s BEST developer community โ€œZero to Full Stack Heroโ€ NOW: https://www.papareact.com/course

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 backend of the app, allowing your team to easily update the contents of the app!
๐Ÿ‘‰ Build a sleek animated checkout flow with an AWESOME UI/UX experience!


๐Ÿ–ฅ๏ธ CODE
Get the code for my builds here: https://links.papareact.com/github


Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

โค๏ธ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate

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