🔴 Let's build UPS 2.0 with REACT NATIVE! (TypeScript, Firebase, GraphQL, StepZen & Tailwind CSS)

Sonny Sangha
Sonny Sangha
277,758
0
Published 2022-09-10
🚨 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/dailycodingchallenges

❗️StepZen has hooked us up with a Customized FREE plan… Check it out! 👉 stepzen.com/signup?utm_source=papareact&utm_medium…

👉 Sample Data For the Build: github.com/sonnysangha/UPS-2.0-Sample-Data

---

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!

🎙️ 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: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
All Comments (21)
  • @yatzcool1318
    Hey Sonny, appreciate your hardwork man. This build is insane 🔥. I've been following you and your projects from 2020 and from building Whatsapp clone with Reactjs CSS and firebase to all these new projects with Nextjs, React Native, Stepzen, GraphQL and many more you have come a long way and the best part of that is you carried us with you. Thankyou for the value and knowledge you are providing through these live streams....💯💯and also I got a job because of you as a React Native Developer❤😃
  • @mayankkashyap79
    You are great. 👍👍 Waiting for some more React Native Builds. Helped me a lot to learn many different technologies in just a few hours.
  • @StefDev
    Sonny Really always kills it👌What a legend.
  • @ngsuraj
    Hi Sonny, I appreciate your hardwork as I have learnt so much from your videos.
  • @blackbird7013
    at 1:35:46 it was not the naming which was off, the @materializer directive expected "query" instead of "name". It should be like this: @materializer( query: "getTrackingItemsById" arguments: [{name: "id", field: "trackingId"}] ) If you use VSCode and add the following to your VSCode Settings: "tailwindCSS.classAttributes": [ "class", "className", "ngClass", "style", "containerStyle" ], You can have intellisense for TailwindCSS classes inside of style or containerStyle attributes in react-native using tailwind-rn. Assuming that the Tailwind CSS Intellisense Extension is installed. Maybe that helps :)
  • @ChadEvett-ow4gz
    is is amazing! We are also going to go ahead and break the world record for saying "go ahead" the most times in a single stream! In all seriousness you are awesome and ths is much appreciated. Go ahead and get it done guys!
  • @cking9145
    Intro sounds like a nice EDM-Radio-Stream haha instantly good nice party vibes like it is weekend hahaha and it is the first day of the week. Thanks for that 😎 and for the video of course too
  • @kozwe3167
    I finished this project, Thank You very much!!!.
  • @mikedelta658
    I would love to learn about Microservices architecture from you, Sonny!
  • @ai_coding
    Hey Sonny new dev & sub here. Thank you for sharing your knowledge. Starting out with the backend first has made things make more sense now. Im finished with the tutorial & the app is lit! I got the repo pack off u recently. Imo you got some of the best tutorials in the game. Keep up the great work & energy!