Building the Formula 1 App with React Native
notJust․dev notJust․dev
108K subscribers
205,824 views
0

 Published On Streamed live on Nov 10, 2023

This tutorial is sponsored by ✨StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇️ Get your free account here: https://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:
https://assets.notjust.dev/masterclas...

📚 Step-by-step guide: https://notjust.dev/projects/f1
✨ Asset Bundle: https://assets.notjust.dev/f1
⌨️ Source code: https://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:
https://academy.notjust.dev/?utm_sour...

💬 Join the notJust Development gang and let's build together:
Twitter:   / vadimnotjustdev  
Instagram:   / vadimnotjustdev  
Facebook:   / notjustdev  
LinkedIn:   / vadimsavin  
Discord:   / discord  

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

show more

Share/Embed