Building the Formula 1 App with React Native
224,795
Published 2023-11-10
❇️ Get your free account here: bit.ly/3SvIMfW
In this video, we'll be going on a thrilling coding ride as we build a sleek Formula 1 app clone using React Native. We'll build beautiful User Interfaces with React Native and we'll power up our app with a robust GraphQL API crafted with IBM's StepZen. We'll also learn how to efficiently query our data using Apollo Client. Whether you're new to React Native or looking to shift gears in your app development skills, this video will fuel your journey into the fast lane of coding!
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclass/?utm_source=youtube…
📚 Step-by-step guide: notjust.dev/projects/f1
✨ Asset Bundle: assets.notjust.dev/f1
⌨️ Source code: github.com/notJust-dev/F1
This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Advanced UI building in React Native, focusing on performance and design patterns.
- The integration and advantages of using GraphQL over traditional REST APIs for efficient data retrieval.
- Step-by-step guidance on setting up IBM StepZen to create a scalable, serverless GraphQL API.
- Best practices for implementing Apollo Client within a React Native application for state management and API communication.
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev in 2023! Check out what our successful students are saying about their experience:
academy.notjust.dev/?utm_source=youtube&utm_medium…
💬 Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: discord.gg/VpURUN2
Timecodes:
0:00 Intro and Project Overview
2:37 Prerequisites
4:10 Creating and Initializing a new Expo Project
11:09 Getting Race Data using Formula 1 API
20:21 Adding a GraphQL Layer using IBM StepZen
39:37 Building the User Interface of the F1 App HomeScreen
1:09:50 Creating a Custom Component
1:14:17 Livestream Interaction
1:23:06 Adding Custom Fonts in the Application
1:31:44 Implementing Dynamic Fields for Races in the List
1:42:09 Setting up Expo Router
1:55:48 Setting up the Expo Router Navigation Layout
2:10:51 Implementing the Top Tab Navigator
2:27:33 Styling the Navigation User Interface
2:38:51 Improving the User Interface
2:42:13 Building the Race Details Screen
2:55:03 Displaying Race Rankings
3:14:51 Building the Qualifying Screen
3:16:03 Querying our GraphQL ApI using Apolo Client
3:57:38 Outro
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #formula1 #reactnative
All Comments (15)
-
Just completed the project looking forward to using it next race season!
-
Please make some project with mmkv, or file system) You doing great job
-
Very, very good! Learned a lot!
-
Thanks for this awesome presention
-
right on I can’t understand web development or computer code anymore than I could learn to read or write music if I had to, to save my life and I play more then a few instruments and then some, thanks for sharing
-
Awesome work
-
Could you please explain how to do this on a Windows machine? Cannot execute cURL in terminal, and also cannot execute import stepzen command in terminal.
-
IBM leaders in A.I. , cool I learned about the kata kana back in 2016 I think, I’m a little slow
-
Hello from Brasil .
-
nice sharing sir from host bb
-
Hi bro
-
Hello
-
${item.id} is not working for me somehow. Is that related to any configuration that I have ?
-
Please make doctors appointment as i have to learn for my college minor projects. pls vadim:face-purple-crying:
