This device is not compatible.

Build a Stock Market App Using React and Chart.js

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.

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.

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:

Demo of the stock market application

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