📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityo...
❗️StepZen has hooked us up with a Customized FREE plan… Check it out! 👉 https://stepzen.com/signup?utm_source...
👉 👉 Sample Data For the Build: https://github.com/sonnysangha/UPS-2....
❗️❗️ 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 a Delivery Tracking App with REACT NATIVE (yes we're building for iOS & Android!), you'll learn how to do the following in this build:
👉 You’ll learn how to create a GraphQL backend directly connected to your Firebase Realtime database effortlessly with StepZen!
👉 You’ll learn how to write robust React Native code with TypeScript!
👉 Use React Native Navigation to navigate between screens including Nested Navigators AND Tab navigators!
👉 Use Tailwind CSS with RN for awesome styling!
👉 Use React Native Elements to elevate your app design!
👉 You’ll even learn how to create your own Custom React Hooks!
+ SO MUCH MORE!
🖥️ CODE
Get the code for my builds here: https://links.papareact.com/github
🎙️ 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:03 Build Showcase
01:39 Build Explanation
04:41 StepZen Sponsorship
06:36 Setting Up Expo
09:52 Setting Up TypeScript
12:30 Initialising the Build
16:33 Setting Up Firebase
21:57 Setting Up StepZen (1/2)
25:09 Setting Up Tailwind CSS in React Native
29:52 Building the Customer’s Screen (1/3)
35:24 Setting Up React Native Navigation
47:08 Building the Bottom Tab Navigator (1/2)
56:40 Setting Up React Native Elements
1:02:49 Building the Bottom Tab Navigator (2/2)
1:05:57 Building the Customer’s Screen (2/3)
1:16:11 Setting Up StepZen & Firebase (1/2)
1:32:22 Live Debugging
1:43:16 Creating Type Definitions
1:52:27 Setting Up Apollo Client
1:55:35 Setting Up GraphQL Queries
1:58:53 Creating the useOrders Custom Hook
2:06:17 Creating the useCustomerOrders Custom Hook
2:10:15 Building the Customer’s Screen (3/3)
2:13:01 Building the Customer Card Component
2:26:08 Building the Modal Screen
2:41:07 Building the Delivery Card Component (1/3)
2:51:42 Implementing React Native Maps
2:55:27 Building the Delivery Card Component (2/3)
2:59:59 Building the Orders Screen
3:08:55 Building the Order Card Component
3:16:50 Building the Order Screen
3:24:38 Building the Delivery Card Component (3/3)
3:33:11 Final Build Demo
3:34:17 Final Build Explanation & Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with UPS 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 #javascript #tutorial #beginner #stepzen #firebase #nosql #graphql
