Build a Stock Dashboard App with React + Tailwind - Part 7 (Fetch Data)
Learn how to build a stock dashboard app using React and TailwindCSS! We will cover topics such as React Hooks, React Context, Recharts, Fetch API, and Finnhub!
This tutorial includes many unique features such as searching for a stock symbol, displaying historical chart data, toggling a dark mode, animations, and much more!
In part 7 we finally fetch data from the Finnhub REST API. This part also further explores React Context and Hooks such as useEffect.
💻 Source Code
https://github.com/DLabbate/stock-das...
⌚ Timeline
00:00 What we'll be doing
01:00 React context for stock symbol
02:50 API helper functions
12:51 Search stocks from Finnhub
15:15 Set context when user clicks a stock
16:41 What is useEffect?
17:16 Implementing useEffect in Dashboard component
23:40 Implementing useEffect in Chart component
33:10 Bug fixes and cleanup
34:25 Results
📚 References
TailwindCSS
https://tailwindcss.com/
How to Install TailwindCSS with React
https://tailwindcss.com/docs/guides/c...
Recharts
https://recharts.org/en-US
Creating an AreaChart with Recharts
https://recharts.org/en-US/api/AreaChart
Heroicons
https://github.com/tailwindlabs/heroi...
Finnhub API
https://finnhub.io/