🔴 Let's build UPS 2.0 with REACT NATIVE! (TypeScript, Firebase, GraphQL, StepZen & Tailwind CSS)
252,532
Published 2022-09-10
Sign Up Here: www.papareact.com/universityofcode
❗️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
❗️❗️ Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: 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: links.papareact.com/github
🎙️ 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)
-
YEAH!! Perfect stream 🚀
-
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❤😃
-
Great build. This is my first react native project
-
The way the information is presented is so clear and engaging.
-
You are great. 👍👍 Waiting for some more React Native Builds. Helped me a lot to learn many different technologies in just a few hours.
-
would love to see push notifications (with attached data to be used when its clicked upon) in one of these builds utilizing expo-server-sdk-node
-
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!
-
Hi Sonny, I appreciate your hardwork as I have learnt so much from your videos.
-
I would love to learn about Microservices architecture from you, Sonny!
-
You're a legend bro
-
You should consider deployment part as well.
-
did not even know you could use tailwind for react native this makes everything so much easier
-
Sonny Really always kills it👌What a legend.
-
This was great to practice Navigation with TypeScript and GraphQL with StepZen! I built along!!
-
I finished this project, Thank You very much!!!.
-
At 1:35:48 you forgot to include transforms as part of the type query get Orders: [OrderList]@rest(transforms: [{ pathpattern: [], editor: "objectToArray" }])}
-
Hi Sonny, please what extension you using that shows the color picker on your react native code?
-
Great! I'll watch it tomorrow. What is the name of the map? Do you use Google maps?
-
Hats of to you & your hard work 💜
-
Hello! Thanks for knowledge sharing. Can you please explain which tailwind react native library you like and why? i.e. twrnc, NativeWind and tailwind-rn.
