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

notJust․dev
notJust․dev
105,410
0
Published 2024-02-02
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: 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: assets.notjust.dev/masterclass/?utm_source=youtube…

📚 Step-by-step Guide: notjust.notion.site/Stocks-app-Guide-3f5ccd1d67974…
✨ Asset Bundle: assets.notjust.dev/stocks
💻 Source Code: 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:
academy.notjust.dev/?utm_source=youtube&utm_medium…

💬 Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: 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
All Comments (16)
  • @KidBucks
    9min to 12min is hands down the best information on react I've heard in 5years.
  • @TrialApp-mu7si
    найогромнейшее спасибо за рабочую связку
  • @mathhack8647
    A pleasure to learn , as usual . Non Wonders , Vadim is a gifted trainer.
  • @serpikoz_6039
    Vadim, thats video what I needed.Greetings from Turkey
  • @alzearafat
    Great video as always Vadim, thank you so much! But if I can suggest, I think it's better to start from scratch, rather than using a template like "tabs". Because it might confuse beginners, instead of speeding up the tutorial/development. Because now you have to delete/modify here and there, jumping between files, which takes a lot more time than just setting up the Expo Router (Which is like 5 minutes top). I also think boilerplate codes are bad for learning purposes. Just my 2c 🙏
  • @user-mu9dk3qh9c
    hello, i have question about use expo sdk, what is better use for app, expo or clear react native, why you always use expo, its better for begginer format on youtube or expo sdk have a good lvl and its greate use for app?
  • @ryang4548
    I was wondering if you happen to know how to re connect to stepzen once you have closed down your VS code for a few days and restarted it back up? All was working but after coming back after a few days stepzen doesn't update when I change things in VS code (taking the apikey part out of the query). Can I re run a command in the terminal to get this back up and running?
  • @atnguyenucchi9776
    I have question can i have a app with responsive screen. Anyway to test that UI without using many differrent emulator/simulator. It realy heavy
  • @sivakumars1652
    for the graph can we make it more detailed like the line looks too smooth can we make it more realistic
  • @usmanmarkaz
    hey sir i have question why you use expo in all of your projects plz in some projects plz use React native CLI plz
  • @wejdanaltaleb3126
    Hi, I got this error when I try to assign the animated prop to true ERROR TypeError: 0, _$$_REQUIRE(_dependencyMap[8](...)ify/react-native-skia").useValue is not a function (it is undefined) This error is located at: in AnimatedLineGraph (created by LineGraphImpl) in LineGraphImpl (created by Grapgh) can you help me with that <LineGraph style={{ width: '100%', height: 300 }} points={points} // animated={true} color={'#ccc'} // gradientFillColors={['#303f9f', '#FFF']} />