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

Ғылым және технология

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/masterclas...
📚 Step-by-step Guide: notjust.notion.site/Stocks-ap...
✨ 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/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
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

Пікірлер: 31

  • @KidBucks
    @KidBucksАй бұрын

    9min to 12min is hands down the best information on react I've heard in 5years.

  • @notjustdev

    @notjustdev

    Ай бұрын

    That's great to hear 🙌

  • @mathhack8647
    @mathhack86472 ай бұрын

    A pleasure to learn , as usual . Non Wonders , Vadim is a gifted trainer.

  • @notjustdev

    @notjustdev

    2 ай бұрын

    I'm glad you found it helpful 🙌

  • @serpikoz_6039
    @serpikoz_60392 ай бұрын

    Vadim, thats video what I needed.Greetings from Turkey

  • @notjustdev

    @notjustdev

    2 ай бұрын

    My pleasure, I'm glad to hear that!🙌

  • @alzearafat
    @alzearafat2 ай бұрын

    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 🙏

  • @notjustdev

    @notjustdev

    2 ай бұрын

    Thanks for your suggestion and appreciation! I've usually found it's easier for beginners to start from a template, and better for tutorial speed purposes.

  • @lakshmipriya.v9623
    @lakshmipriya.v96232 ай бұрын

    Thank you for sharing this video....

  • @notjustdev

    @notjustdev

    2 ай бұрын

    Welcome!

  • @KidBucks
    @KidBucksАй бұрын

    Amazing Job Sir.

  • @notjustdev

    @notjustdev

    Ай бұрын

    Thank you kindly

  • @ryang4548
    @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?

  • @notjustdev

    @notjustdev

    Ай бұрын

    The api should be running always, as it is deployed to the cloud. However, if you are doing updates to your api, and want them to be updated, you simply have to run stepzen start in your stepzen folder

  • @user-mu9dk3qh9c
    @user-mu9dk3qh9c2 ай бұрын

    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?

  • @notjustdev

    @notjustdev

    2 ай бұрын

    Expo is great for beginners due to its simplicity and easier setup. It provides a lot of built-in features, speeding up development. For more complex apps requiring native modules not supported by Expo, bare React Native might be necessary, but in 99% of the cases, you are fine by going with Expo. I use Expo for its convenience and rapid development capabilities, especially for tutorials.

  • @atnguyenucchi9776
    @atnguyenucchi97762 ай бұрын

    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

  • @notjustdev

    @notjustdev

    2 ай бұрын

    You can use responsive design test libraries like react-native-testing-library or use visual regression testing tools (e.g., Percy or Applitools)

  • @sivakumars1652
    @sivakumars1652Ай бұрын

    for the graph can we make it more detailed like the line looks too smooth can we make it more realistic

  • @notjustdev

    @notjustdev

    Ай бұрын

    yes, you can definitely do that

  • @sivakumars1652

    @sivakumars1652

    Ай бұрын

    @@notjustdev how?

  • @angeleight8480
    @angeleight8480Ай бұрын

    thanks for sharing this video #mrfishvlogs

  • @notjustdev

    @notjustdev

    Ай бұрын

    Thanks for your support 🙌

  • @usmanmarkaz
    @usmanmarkaz2 ай бұрын

    hey sir i have question why you use expo in all of your projects plz in some projects plz use React native CLI plz

  • @ntindaSnyper

    @ntindaSnyper

    2 ай бұрын

    because Expo is more beginner friendly. Once you become more experienced in react native, you would not need his videos to do CLI

  • @morale3056

    @morale3056

    2 ай бұрын

    Expo is the recommended method right now. Hence it is the default method in documentation. It's like nobody use cra for react, vite and next are the preferred methods. Move to expo and stop crying.

  • @alzearafat

    @alzearafat

    2 ай бұрын

    Because it's better? Even RN official recommend using it.

  • @stavroskefaleas6320

    @stavroskefaleas6320

    2 ай бұрын

    @@morale3056 It seems that it is still not mature enough though, because I had to delete all node_modules and run npm install to make it work.

  • @morale3056

    @morale3056

    2 ай бұрын

    @@stavroskefaleas6320 looks like you're new to frontend development after all. Welcome to JS/node world.

  • @user-zx6tg8jv4u
    @user-zx6tg8jv4uАй бұрын

    здравая тема

  • @wejdanaltaleb3126
    @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

Келесі