Let's Build a STOCKS Price Tracker with React Native (step-by-step tutorial)
ฝัง
- เผยแพร่เมื่อ 1 พ.ค. 2024
- 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.
That's great to hear 🙌
A pleasure to learn , as usual . Non Wonders , Vadim is a gifted trainer.
I'm glad you found it helpful 🙌
Vadim, thats video what I needed.Greetings from Turkey
My pleasure, I'm glad to hear that!🙌
Thank you for sharing this video....
Welcome!
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 🙏
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.
Amazing Job Sir.
Thank you kindly
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?
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.
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?
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
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
You can use responsive design test libraries like react-native-testing-library or use visual regression testing tools (e.g., Percy or Applitools)
for the graph can we make it more detailed like the line looks too smooth can we make it more realistic
yes, you can definitely do that
@@notjustdev how?
hey sir i have question why you use expo in all of your projects plz in some projects plz use React native CLI plz
because Expo is more beginner friendly. Once you become more experienced in react native, you would not need his videos to do CLI
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.
Because it's better? Even RN official recommend using it.
@@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.
@@stavroskefaleas6320 looks like you're new to frontend development after all. Welcome to JS/node world.
thanks for sharing this video #mrfishvlogs
Thanks for your support 🙌
здравая тема
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