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: 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/masterclas...
📚 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/?...
💬 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