This device is not compatible.
PROJECT
Build a Stock Market App Using React and Chart.js
Learn how to build an interactive stock market application. This application allows you to explore and search for stocks. It also enables the user to inspect the additional details of any particular stock.
You will learn to:
Create a React application.
Integrate an API with React application.
Use Vanilla CSS and Bootstrap to design the layout.
Use React Hooks to develop the application.
Skills
Web Development
API Integration
Fintech Applications
Prerequisites
Basic understanding of React
Good understanding of Javascript, including arrow functions and array handling
Basic understanding of fetching data in React
Basic understanding of Vanilla CSS and Bootstrap
An account of Yahoo Finance API
Technologies
React
Chart.js
Bootstrap
Project Description
In this project, we’ll build a stock market application using React. We will integrate the Finance API into our Stock Market application and use the data to explore and inspect every available stock.
We’ll start with the initial skeleton React.js code that displays a simple “Hello World” message. We’ll then incrementally add different pages of our stock application, such as the home page and the details page of a particular stock.
The final layout of the application will look like the following:
Project Tasks
1
Introduction
Task 0: Get Started
Task 1: Get and Add the API Key
Task 2: Add Routing to the Application
2
Develop the Layout
Task 3: Implement the Slider
Task 4: Create the Header
Task 5: Design the Layout
Task 6: Wrap Layout Around the Routes
Task 7: Add Styles to the Layout Components
3
Develop the Home page
Task 8: Create the Card
Task 9: Implement the Cards List
Task 10: Implement the Search Functionality
Task 11: Update the Home Page
Task 12: Add Styles to the Home page Components
4
Develop the Details page
Task 13: Create the Line Chart
Task 14: Display the Stock Market Details
Task 15: Add Styles to the Details Components
Congratulations
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.