Let's Build a STOCKS Price Tracker with React Native (step-by-step tutorial)
視聴回数 105,461 回
0
0
This tutorial is sponsored by ✨IBM 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/4bhO6KM
Follow along and build a Stocks Price Tracker App in React Native. This step-by-step tutorial is a great starting point for developers with any experience, even for beginners. From crafting an intuitive UI to integrating with a public Stocks API, this video covers every step needed to create an interactive application where users can monitor stock prices, add favorites, and view historical data in graph format
❗Try our *FREE* 2-day Masterclass on notJust.Academy: https://assets.notjust.dev/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=02feb24
*📚 Step-by-step Guide:* https://notjust.notion.site/Stocks-app-Guide-3f5ccd1d6797442aaa65b9f952b3b855
*✨ Asset Bundle:* https://assets.notjust.dev/stocks
*💻 Source Code:* https://github.com/notJust-dev/Stocks
*📝 Today's Agenda:*
- Project Introduction and Setup
- Designing the User Interface
- Integrating Public Stocks API with React Native
- Implementing the Price Tracking Feature
- Building the Favorites System for Users
- Adding Graphical Representation for Stock History
- Using Stepzen to Build a GraphQL API on top
- Optimizing User Experience
- Finalizing and Testing the Application
📚 Enroll NOW in *The Full-Stack Mobile Developer course* and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
https://academy.notjust.dev/?utm_source=youtube&utm_medium=livestream&utm_content=02feb24
*💬 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 Overview
5:28 Initializing and Setting up Expo Project
*USER INTERFACE*
23:26 Rendering a List of Stocks
1:04:56 Building the Details Page of a Stock
01:24:33 Integrating react-native-graph; Displaying data in chart
*API*
01:58:35 Creating a TwelveData account and getting the API key
02:03:15 Why use a GraphQL layer on top of a REST API
02:05:53 Setting up an IBM StepZen API and adding queries
02:46:52 Fetching the GraphQL API from React Native
03:09:00 Querying info about Stocks from the Backend
*BONUS*
03:22:07 Saving Stocks as Favourites with a custom PostgreSQL database
3:56:51 Demo and 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 #tutorial #reactnative
❇️ Get your free account here: https://bit.ly/4bhO6KM
Follow along and build a Stocks Price Tracker App in React Native. This step-by-step tutorial is a great starting point for developers with any experience, even for beginners. From crafting an intuitive UI to integrating with a public Stocks API, this video covers every step needed to create an interactive application where users can monitor stock prices, add favorites, and view historical data in graph format
❗Try our *FREE* 2-day Masterclass on notJust.Academy: https://assets.notjust.dev/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=02feb24
*📚 Step-by-step Guide:* https://notjust.notion.site/Stocks-app-Guide-3f5ccd1d6797442aaa65b9f952b3b855
*✨ Asset Bundle:* https://assets.notjust.dev/stocks
*💻 Source Code:* https://github.com/notJust-dev/Stocks
*📝 Today's Agenda:*
- Project Introduction and Setup
- Designing the User Interface
- Integrating Public Stocks API with React Native
- Implementing the Price Tracking Feature
- Building the Favorites System for Users
- Adding Graphical Representation for Stock History
- Using Stepzen to Build a GraphQL API on top
- Optimizing User Experience
- Finalizing and Testing the Application
📚 Enroll NOW in *The Full-Stack Mobile Developer course* and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
https://academy.notjust.dev/?utm_source=youtube&utm_medium=livestream&utm_content=02feb24
*💬 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 Overview
5:28 Initializing and Setting up Expo Project
*USER INTERFACE*
23:26 Rendering a List of Stocks
1:04:56 Building the Details Page of a Stock
01:24:33 Integrating react-native-graph; Displaying data in chart
*API*
01:58:35 Creating a TwelveData account and getting the API key
02:03:15 Why use a GraphQL layer on top of a REST API
02:05:53 Setting up an IBM StepZen API and adding queries
02:46:52 Fetching the GraphQL API from React Native
03:09:00 Querying info about Stocks from the Backend
*BONUS*
03:22:07 Saving Stocks as Favourites with a custom PostgreSQL database
3:56:51 Demo and 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 #tutorial #reactnative
