Let's Build a STOCKS Price Tracker with React Native (step-by-step tutorial)

notJust․dev・2 minutes read

Building a stock tracker app with React Native Expo, GraphQL, and IBM Stappen, including features like real-time stock data integration and database implementation for learning full-stack mobile development. Detailed step-by-step guide and asset bundle provided, with a focus on practical insights for building financial apps, sponsored by IBM Stappen.

Insights

  • Building a full stack stock tracker app with React Native, GraphQL, and IBM Stappen.
  • Integrating real market data and charts for stock performance visualization.
  • Using IBM Stappen for GraphQL API and PostgreSQL database management.
  • Implementing Apollo Client for GraphQL API integration in React Native for stock tracking.

Get key ideas from YouTube videos. It’s free

Recent questions

  • How can I build a stock tracker application?

    The stock tracker application can be built using React Native Expo, GraphQL, and IBM Stappen. Features include searching for stock symbols, tracking prices, and integrating real market data from an external API. Learning to integrate charts and graphs in React Native for stock performance visualization is essential. Implementing features like adding stocks to favorites and learning about databases for storing information is also crucial. The front end uses React Native with Expo and Expo Router, while the back end involves a custom GraphQL API using IBM Stappen. The API connects to external sources for real-time stock data and a custom PostgreSQL database for managing features.

  • How do I integrate charts and graphs in React Native?

    To integrate charts and graphs in React Native, you can use the React Native Graph library. Install necessary libraries like React Native Reanimated, Gesture Handler, and Skia for chart functionality. Configure the Babel plugin for React Native Reanimated and wrap the application in Gesture Handler Root View. Create a separate component for rendering the graph and populate it with data points from the time series. Transform data from the time series into the required format for the graph using mapping functions. Enhance the graph with a linear gradient background for improved visual appeal. Enable pan gesture for interactive graph exploration and utilize the `onPointSelected` function to display selected point values on the graph.

  • How can I transform a REST API into a GraphQL API?

    To transform a REST API into a GraphQL API, you can use IBM Steps. Start by signing up for an account on steps.com, which is free. Install the IBM Steps CLI tool globally on your machine to manage your GraphQL API. Authenticate with Steps by running "stepen login" in your terminal and providing your account name and admin key. Create a new folder named "API" to store the configuration file of your API within your Expo project. Transform the REST API into a GraphQL API by importing the URL using "steps import curl" and saving it. Deploy the imported schema to Steps and Cloud by running "stepen start" to interact with your API through a graphical URL. Configure headers by creating a "config.yaml" file with authorization details like API key for easier API consumption.

  • How can I handle errors in a GraphQL API?

    Handling errors in a GraphQL API involves displaying loading indicators, error messages, and logging data. Utilize the useQuery hook and gql from Apollo client to define and run queries. Ensure that the query focuses on values for the graph, specifically date time and closing value. Provide required variables like interval and symbol for successful queries. Implement error handling by mapping through data.time series to display real values for different symbols. Connect symbols to the graph through properties to ensure accurate rendering. Utilize the use Query hook and gql from Apollo client to help in defining and running queries.

  • How can I save stocks as favorites in a stock tracker application?

    To save stocks as favorites in a stock tracker application, you can integrate a custom database with GraphQL. Steps and Staben facilitate the connection between GraphQL and a PostgreSQL database, enabling easy query creation and execution. Initially, the data should be an empty string and empty array. Query favorite stocks using "favorByUserID" to get a list of favorites. Import "useQuery" and "gql" from Apollo client for essential functionalities. Handle loading, error, and data retrieval using "useQuery" and extract stock data from the fetched favorites. Implement a mutation to add symbols to favorites and connect queries using materializer directive to obtain additional code details.

Related videos

Summary

00:00

"Full Stack Stock Tracker with React Native"

  • Building a full stack stock tracker application using React Native Expo, GraphQL, and IBM Stappen.
  • Features include searching for stock symbols, tracking prices, and integrating real market data from an external API.
  • Learning to integrate charts and graphs in React Native for stock performance visualization.
  • Implementing features like adding stocks to favorites and learning about databases for storing information.
  • Ideal for learning React Native and full-stack mobile development in a single tutorial.
  • Suitable for those planning to build financial applications, offering practical insights.
  • Front end uses React Native with Expo and Expo Router, while the back end involves a custom GraphQL API using IBM Stappen.
  • The API connects to external sources for real-time stock data and a custom PostgreSQL database for managing features.
  • Sponsored by IBM Stappen, known for its ease in building GraphQL APIs with a single command.
  • Detailed step-by-step guide and asset bundle provided for easy progress tracking and project completion.

17:37

"Organizing Code: Cleaning, Renaming, Rendering Stocks"

  • Renaming source directory not necessary for the project; personal preference.
  • Cleaning up files to maintain structured code.
  • Removing unnecessary content from tabs index file.
  • Deleting components and styles not in use.
  • Cleaning up the application model file.
  • Removing unused components from the components folder.
  • Importing data from the asset bundle into assets folder.
  • Starting to render a list of stocks on the home screen.
  • Utilizing the top five data object for stock information.
  • Creating a custom component, stocklist item, to render stock details.

37:32

"Stock list item API setup and styling"

  • API returns close and percent change as strings
  • Stock list item includes symbol, close, and percentage change as strings
  • Typo corrected from "percent change" to "percentage change"
  • To add spacing between items in flat list, use content container style property with gap value
  • Adjust gap value to control spacing between items
  • Add padding around flat list items using content container style property
  • Stock list item component structure setup for rendering
  • Left column includes symbol and name, wrapped in a view for single parent component
  • Separate rendering and styling logic by defining styles using Stylesheet.create
  • Use tokenized colors from a constants file for consistent color usage
  • Display price and percentage change on the right side of the stock list item
  • Split components into left and right containers for two-column layout
  • Use flex properties to control container sizes and alignment
  • Apply mono text style for close and percentage change for consistent font family
  • Parse close string to number for formatting with fixed decimal places
  • Calculate change as a number for conditional styling based on positive or negative values

58:15

"Stock Tracker App with Color-Coded Numbers"

  • Positive numbers are displayed in green, while negative numbers are in red.
  • The desire to add a plus sign before positive numbers is expressed.
  • A pair of brackets will be added before changing to fixed to display a plus sign for positive numbers.
  • A percentage sign will be added after the values.
  • A dollar sign or different currency symbol can be added in front of the text.
  • Spacing adjustments will be made between the name, symbol, and stock price.
  • Assets for the project can be obtained at assets.noz.de/stocks.
  • The 12 data API will be used for stock information, offering a free tier with 800 API credits per day.
  • A stock tracker application is being built using React Native Expo, including a front end and a custom GraphQL API for stock data.
  • A new screen for stock details is created in the root navigator, allowing navigation to detailed stock information.

01:18:36

Stock Information Retrieval and Display with React

  • Access stock information by querying or obtaining it from various sources, including APIs.
  • Handle scenarios where a stock with a specific symbol cannot be found, returning an appropriate message.
  • Differences in stock symbol cases can impact search results, especially on the web.
  • Utilize stock information to render stock list items in components for display.
  • Customize the title and back button on the Details page based on stock details.
  • Implement a chart for the stock's price history using React Native Graph library.
  • Install necessary libraries like React Native Reanimated, Gesture Handler, and Skia for chart functionality.
  • Configure Babel plugin for React Native Reanimated and wrap the application in Gesture Handler Root View.
  • Create a separate component for rendering the graph and populate it with data points from the time series.
  • Transform data from the time series into the required format for the graph using mapping functions.

01:40:50

Optimizing Graph Creation and Interaction Techniques

  • The structure of an array is crucial for the data needed.
  • Converting a string date to a date format is done using `new Date(value.dateTime)`.
  • Converting a string value to a number is essential for graph points.
  • Renaming variables and ensuring correct data types is necessary for graph creation.
  • Enhancing the graph with a linear gradient background is a recommended improvement.
  • Enabling pan gesture allows for interactive graph exploration.
  • Utilizing `onPointSelected` function to display selected point values on the graph.
  • Implementing a state variable to store and display selected point values.
  • Resetting the selected point on gesture end enhances user experience.
  • Exploring further improvements like indicator pulsating for better visual appeal.

02:05:50

Creating GraphQL API with IBM Steps: A Guide

  • To create an API with IBM Steps, start by signing up for an account on steps.com, which is free.
  • Install the IBM Steps CLI tool globally on your machine to manage your GraphQL API.
  • Authenticate with Steps by running "stepen login" in your terminal and providing your account name and admin key.
  • Create a new folder named "API" to store the configuration file of your API within your Expo project.
  • Transform a REST API into a GraphQL API by importing the URL using "steps import curl" and saving it.
  • Deploy the imported schema to Steps and Cloud by running "stepen start" to interact with your API through a graphical URL.
  • Configure headers by creating a "config.yaml" file with authorization details like API key for easier API consumption.
  • Assign the created configuration set to your REST endpoint in the GraphQL schema to manage the API key through headers.
  • Adjust your API to handle batch requests for multiple stocks by duplicating and modifying the existing query in your GraphQL schema.
  • Test the batch request functionality by querying multiple symbols like Apple, IBM, and Microsoft to receive information about each stock.

02:28:03

Data Transformation Using Stepen and Rest Directives

  • The text discusses the process of transforming data using the Stepen directive reference in documentation.
  • The Rest directive allows for adding transforms to data obtained from the Rest API.
  • A specific transform called "object to array" is highlighted as useful for converting key-value pairs to an array.
  • The transformation involves changing key-value pairs to an array format for easier processing.
  • The API transformation directly impacts the response data structure.
  • The transformed response will consist of an array of codes with name and value fields.
  • The process involves modifying the API code to implement the transformation.
  • The transformed response is tested and confirmed to meet the desired outcome.
  • The API deployment is verified, and the transformed response is accessible through the dashboard.
  • The text concludes with preparations for integrating the GraphQL API into a React Native application using Apollo Client.

02:50:15

"API Endpoint Display and Authorization Essentials"

  • Stopping and starting the steps will display the API endpoint.
  • The cache management is done using the inmemory cache.
  • Authorization is required to send requests to the steps and API.
  • Adding the authorization header with the API key is necessary.
  • The API key can be obtained by running a command.
  • The API key should be added as an environment variable if working with Expo.
  • Exporting the default client is essential for Apollo client provider.
  • Wrapping the application with Apollo client provider allows running queries.
  • The Apollo client provider and client need to be imported for wrapping the application.
  • Sending queries involves building the query, using the useQuery hook, and handling loading, error, and data states.

03:14:04

"GraphQL query construction for time series"

  • In GraphQL, the graph layer requires a time series for queries.
  • Query construction involves using two variables: symbol (string type) and interval (string type).
  • The query should focus on values for the graph, specifically date time and closing value.
  • Providing required variables like interval and symbol is crucial for successful queries.
  • Utilizing the use Query hook and gql from Apollo client helps in defining and running queries.
  • Error handling includes displaying loading indicators, error messages, and logging data.
  • Mapping through data.time series allows for real values to be displayed for different symbols.
  • Connecting symbols to the graph through properties ensures accurate rendering.
  • Integrating a custom database with GraphQL opens up possibilities for saving stocks as favorites.
  • Steps and Staben facilitate the connection between GraphQL and a PostgreSQL database, enabling easy query creation and execution.

03:35:42

"Favorite Stock List: Query, Add, Enhance"

  • The title of the project is "Favorite the Flat List"
  • The data initially is an empty string and empty array
  • Querying favorite stocks is necessary
  • Importing "useQuery" and "gql" from Apollo client is essential
  • Running the query "favorByUserID" to get a list of favorites
  • Handling loading, error, and data retrieval using "useQuery"
  • Extracting stock data from the fetched favorites
  • Implementing a mutation to add symbols to favorites
  • Connecting queries using materializer directive to obtain additional code details
  • Enhancing the application by allowing users to manually input stock symbols and view detailed stock information, including graphs.

03:58:17

"Live stream ends with sponsor, tutorials promised"

  • Video sponsor mentioned, rushing to end the live stream
  • Encouragement to continue discussion in the comments, commitment to answering comments
  • Promise of more tutorials in the future, wishing viewers a good evening and encouraging them to keep learning and building applications
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.