Login Get started

Building the Formula 1 App with React Native

notJust․dev・141 minutes read

The text discusses building a Formula 1 application with React Native, integrating real-time data from API Sport and utilizing GraphQL with StepZen for flexibility and data retrieval efficiency. It emphasizes enhancing the user experience through efficient data querying, styling considerations, and integrating custom fonts, culminating in the successful integration of Apollo Client for GraphQL queries.

Insights

The live stream focuses on building a Formula 1 application using React Native, targeting Formula 1 fans and newcomers.
The data for the application will be sourced from a real API called API Sport, which offers Formula 1 race data.
By building a GraphQL API with StepZen, it becomes feasible to connect to various data sources beyond the current API, like a custom database for additional features.
The text emphasizes the practicality of StepZen by detailing the process of creating a free account, obtaining API keys, and installing the StepZen CLI globally.

Get key ideas from YouTube videos. It’s free

Recent questions

How can I access Formula 1 race data?
By utilizing a real API called API Sport.
What is the role of Staben in building GraphQL APIs?
Staben simplifies the process of building GraphQL APIs.
How can I convert a REST API to a GraphQL API?
By running the StepZen import command.
What is the benefit of using Apollo Client in a React Native application?
Efficient data querying and caching.
How can I enhance the user interface of a Formula 1 application?
By utilizing styling considerations and components like FlatList.

Related videos

Summary

00:00

Building Formula 1 App with React Native

The live stream focuses on building a Formula 1 application using React Native, targeting Formula 1 fans and newcomers.
The application will display a list of races from the current season and provide detailed information about specific races, including circuit details and race rankings.
The front end of the application will be built using React Native with Expo and Expo router for navigation.
The data for the application will be sourced from a real API called API Sport, which offers Formula 1 race data.
A thin GraphQL layer will be added between the client and the API using Staben for the back end.
Staben, an IBM company, is highlighted for its role in simplifying the process of building GraphQL APIs.
A step-by-step guide and asset bundle are available on the website nodevprojects.com/f1 for easy replication of the project.
A free account with Staben is required to access the API data, and the API key must be saved for future use.
The API provides information on races, circuits, and rankings, with a focus on displaying race data and driver rankings in the application.
The process involves sending a CURL request to the API endpoint to retrieve race data, with specific parameters like season and race type.

19:44

"Utilizing StepZen for GraphQL API Integration"

The text discusses utilizing a GET request to gather data on races in a specific season, starting with races in Bahrain and Saudi Arabia.
It explains executing the GET request using curl in the terminal and the intention to add a GraphQL layer on top of the external API for more flexibility.
By building a GraphQL API with StepZen, it becomes feasible to connect to various data sources beyond the current API, like a custom database for additional features.
StepZen simplifies the process of connecting to extra data sources, enabling easy data retrieval and creating relations between different data sets.
The text emphasizes the practicality of StepZen by detailing the process of creating a free account, obtaining API keys, and installing the StepZen CLI globally.
It mentions the limitations of the free API plan, offering 100 requests per day, with options for more requests at a cost.
The text guides on creating a new folder for StepZen files within the application directory and running the StepZen import command to convert a REST API to a GraphQL API.
It demonstrates the process of importing a second API endpoint for race rankings, showcasing the ease of adding new queries and endpoints with StepZen.
The text highlights the significance of GraphQL in reducing the need for multiple requests to a REST API, streamlining data retrieval and enhancing user experience.
It concludes by emphasizing the readiness to integrate the GraphQL API into a React Native application using Apollo Client for efficient data querying and caching.

40:28

"Enhancing User Interface with Race Data"

The initial step involves enhancing the user interface, particularly focusing on the home screen.
The home screen will feature a list of races, detailing the date, round, country, and Grand Prix name.
To gather this data, a query can be constructed for races in the 2023 season, specifying date, country, Grand Prix name, and potentially season.
Executing this query will provide the necessary data to populate the homepage.
Copying the JSON data structure obtained from the query will facilitate swift data source changes between JSON and API.
For those seeking to collaborate using the same data, a downloadable asset bundle with sample data is available.
The data structure within the asset bundle mirrors the response array format, containing extensive race information.
The development process begins by displaying race information on a single screen, with future plans to expand to multiple screens.
Utilizing a FlatList component, the race data can be rendered in a scrollable list format on the screen.
Styling considerations include color schemes, text alignments, and grouping text elements within columns for a visually appealing layout.

01:03:06

"Styling and Organizing React Native Components"

Attaching a style to the middle view with flex One to push the icon to the right and occupy available space.
Styling the top view with spacings and borders, creating a "dates container" with padding, margin, and a right border.
Aligning items in the "dates container" vertically and centering the month.
Styling the month text with background color, padding, border radius, and overflow hidden for rounded corners.
Adding round borders to the item container for a subtle touch and enhancing the UI with shadows.
Moving the "race list item" component to a separate file for better organization and reusability.
Updating the asset bundle and creating a GitHub repository for the project.
Explaining the benefits of using Expo for React Native development over native Android.
Encouraging viewers to subscribe to the channel and support the goal of reaching 100,000 subscribers.
Introducing the next step of loading custom fonts, providing a source for Formula One fonts, and demonstrating how to import and use them in the application.

01:25:40

Utilize Expo fonts for dynamic text.

To use Expo font, install it with "npx Expo install Expo font."
Utilize the "useFonts" hook for font usage in applications.
Import the "useFonts" hook from "Expo fonts" and provide the font path.
Load the font (e.g., Formula 1 black) and use it as a font family for text.
Display text using the Formula 1 black font family.
Show an activity indicator until fonts are loaded to prevent errors.
Optionally, use a splash screen to load fonts before rendering the application.
Include various fonts like F1 black, bold, metallic, regular, and white for customization.
Customize font families for different text elements like name, date, month, and description.
Sort races by date in descending order for dynamic display and utilize dynamic fields for race details.

01:48:53

Routing Documentation Installation Guide

Manual installation guide for routing documentation
Install dependencies like Expo router, React Native safe area context
Modify project configuration in package.json for entry point
Add project scheme in app.js for deep links
Exclude React web development
Add plugins line in b.config for project configuration
Restart development server with cache clearing
Create app directory for screens in Expo router
Implement layout file for shared UI elements
Utilize stack Navigator for screen navigation in layout file

02:11:17

"Creating Dynamic Race Details with React Navigation"

The bottom of the screen displays B and TBS, with a stack Navigator.
The next step involves adding the race details screen to view specific race information.
The aim is to show race details upon selection, including results for the weekend's races, with different tabs at the top.
Utilizing React Navigation, ExploRouter integrates easily with React Navigation, using Material Top Tabs Navigator.
Material Top Tabs Navigator isn't automatically provided by ExploRouter but can be installed following the guide on React Native Navigation.
Installation involves adding dependencies and the Native Pager View.
Creation of a top tab Navigator involves establishing a new folder for race details, generating an index.TSX function, and a qualifying results file.
Navigating to race details is initiated by pressing on a race list item, utilizing the Link component from ExploRouter.
Implementing Dynamic Path Parameters allows for dynamic links to different race details based on the selected item.
Adjusting navigation user interface includes configuring headers, titles, colors, and styles for specific screens within the stack Navigator.

02:34:08

Customizing Top Tab Navigator and Bar Styles

Adjusting styles for top tab navigator: Utilize screen options in the layout to modify the background tab bar color to red, then switch to using colors.primary instead.
Customizing top bar style: Modify the inactive and active tint colors for labels, adjusting them to white and black respectively.
Tweaking tab bar indicator: Alter the indicator's background color to white, increase its height to 7.5, and adjust the font family for tab bar titles.
Implementing status bar: Move the status bar from index.TSX to the root layout for proper rendering.
Refining screen titles: Update the title of a specific screen within the top tabs to "Details when race qualifying" using options.
Displaying race details: Showcase information about the country, season, and circuit on the details screen, including the circuit's image.
Styling image component: Set the image component's width to 100% and height to maintain a 16:9 aspect ratio for better display.
Enhancing text styles: Increase font size and adjust font family for the country name and season, ensuring a clear distinction.
Rendering driver rankings: Utilize a flat list to showcase driver names and positions, then create a separate component for ranking list items.
Structuring ranking list item: Design a layout with columns for position, driver name, and time within the ranking list item component.

03:02:53

"Formula 1 Ranking Screen Setup Guide"

Styles need to be assigned to all components, starting with the container, by copying and pasting and changing names.
Container style includes background color white, padding of 5, and margin of 5, with Flex Direction row for displaying components in the same line.
Middle container (name) should take all space with flex one, pushing time to the end.
Position style includes defining font family, margin right 10, and fixed width of 50 for consistent alignment.
Name style includes font family F1 regular, text in a view, and team name display below it.
Flex one should be on the view containing name for proper alignment.
Image for drivers can be added with a size of 50 by 50, background color red, and adjusted padding for better display.
Ranking screen for Formula 1 application includes race details, rankings, and future integration with GraphQL API using Apollo client.
Apollo client setup involves defining URI, account name, headers, and cache type, then wrapping screens with Apollo client provider.
Home screen queries races for 2023 season using GraphQL query and use Query hook, displaying loading indicator, error message, or race data accordingly.

03:31:57

Troubleshooting GraphQL queries for race data

Issue with assigning sorted races to a new array due to read-only property
Solution: Destructure races into a new array to resolve read-only error
Identify necessary data for display: competition, location, country, season
Utilize Builder to determine required data for query
Fetch live data from GraphQL API using Staben for real-time data
Demonstration of sending dynamic variables to properties in GraphQL queries
Update query variables to test different seasons and types for accurate data retrieval
Querying details of a race based on its ID for specific race information
Required data for race details: competition, location, country, season, circuit image
Implementation of querying race details based on ID parameter for specific race details
Fetching race rankings data based on race ID for position, driver, team, and time information
Troubleshooting and debugging to ensure accurate data retrieval from backend
Integration of Apollo client for GraphQL queries and successful data display
Conclusion of project showcasing Apollo integration and upcoming Hackathon event.

Try it yourself — It’s free.