This device is not compatible.


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.

Build a Stock Market App Using React and Chart.js

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.


Web Development

API Integration

Fintech Applications


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





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:

Demo of the stock market application

Project Tasks



Task 0: Get Started

Task 1: Get and Add the API Key

Task 2: Add Routing to the Application


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


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


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