15 YouTube views, likes subscribers in 10 minutes. Free!
Get Free YouTube Subscribers, Views and Likes

Building the Formula 1 App with React Native

Follow
notJust․dev

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 4day Masterclass on notJust.Academy:
https://assets.notjust.dev/masterclas...

Stepbystep guide: https://notjust.dev/projects/f1
✨ Asset Bundle: https://assets.notjust.dev/f1
⌨ Source code: https://github.com/notJustdev/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.
Stepbystep 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 FullStack Mobile Developer course and don’t miss out on your chance to become a 6figure 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

posted by Tsitselisgo