πŸ”΄ Let's build a Deliveroo Clone with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io, TS)

2022-07-07 8,322 0 1,051,564 YouTube

Download Convert to MP3

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course πŸ«‚ Join my Community, "University of Code" for FREE: https://www.universityofcode.com πŸ”΄ LOOKING FOR THE CODE? πŸ› οΈ https://links.papareact.com/github πŸ“© Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges --- 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 https://links.papareact.com/podcast 🌍 SOCIALS: 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 πŸ• 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