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

2024 ж. 2 Мам.

104 166 Рет қаралды

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

Пікірлер

9min to 12min is hands down the best information on react I've heard in 5years.
@KidBucksАй бұрын
- That's great to hear 🙌
  @notjustdevАй бұрын
A pleasure to learn , as usual . Non Wonders , Vadim is a gifted trainer.
@mathhack86472 ай бұрын
- I'm glad you found it helpful 🙌
  @notjustdev2 ай бұрын
Vadim, thats video what I needed.Greetings from Turkey
@serpikoz_60392 ай бұрын
- My pleasure, I'm glad to hear that!🙌
  @notjustdev2 ай бұрын
Thank you for sharing this video....
@lakshmipriya.v96232 ай бұрын
- Welcome!
  @notjustdev2 ай бұрын
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 🙏
@alzearafat2 ай бұрын
- 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.
  @notjustdev2 ай бұрын
Amazing Job Sir.
@KidBucksАй бұрын
- Thank you kindly
  @notjustdevАй бұрын
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?
@user-mu9dk3qh9c2 ай бұрын
- 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.
  @notjustdev2 ай бұрын
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?
@ryang4548Ай бұрын
- 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
  @notjustdevАй бұрын
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
@atnguyenucchi97762 ай бұрын
- You can use responsive design test libraries like react-native-testing-library or use visual regression testing tools (e.g., Percy or Applitools)
  @notjustdev2 ай бұрын
for the graph can we make it more detailed like the line looks too smooth can we make it more realistic
@sivakumars1652Ай бұрын
- yes, you can definitely do that
  @notjustdevАй бұрын
- @@notjustdev how?
  @sivakumars1652Ай бұрын
hey sir i have question why you use expo in all of your projects plz in some projects plz use React native CLI plz
@usmanmarkaz3 ай бұрын
- because Expo is more beginner friendly. Once you become more experienced in react native, you would not need his videos to do CLI
  @ntindaSnyper3 ай бұрын
- 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.
  @morale30563 ай бұрын
- Because it's better? Even RN official recommend using it.
  @alzearafat2 ай бұрын
- @@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.
  @stavroskefaleas63202 ай бұрын
- @@stavroskefaleas6320 looks like you're new to frontend development after all. Welcome to JS/node world.
  @morale30562 ай бұрын
thanks for sharing this video #mrfishvlogs
@angeleight8480Ай бұрын
- Thanks for your support 🙌
  @notjustdevАй бұрын
здравая тема
@user-zx6tg8jv4uАй бұрын
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
@wejdanaltaleb3126Ай бұрын