React Native for beginners - Building the Formula 1 App in React Native and Expo

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! ⚛️ React Native Mastery is the ONLY course you need to master mobile development with React Native & Expo 🚀 Enroll here: https://www.notjust.dev/react-native-mastery 📚 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. 💬 Join the notJust Development gang and let's build together: Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://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