Learn to visualize the live Stocks, Forex or your organization data using Highcharts library in React JS with Redux.

What you'll learn
Integrate Highcharts highstocks and charts in React JS SPA
Fetch the live stock data, Forex data and data from REST API (Mongo DB, Express JS, Node JS) and use it via Redux store in React JS SPA
Use Drag and Drop functionality to change the chart types dynamically to display Highcharts chart
Compare Monthly stocks and currency by presenting it visually using Highstocks charts
Display Candlestick, OHLC charts and customize Highstocks charts

Requirements
Good knowledge on React JS and Redux
Basic knowledge of ECMA Script 2015/ ES6 along with Bootstrap 4.x
Basic knowledge of developing REST APIs using Express JS, Node JS along with some database like Mongo DB

Description
Are you working on stock market applications, currency or finance applications which needs data visualization? Or wants to visualize the company or your own products growth. Also wants to compare different stocks and currencies? Welcome to my new course Finance Market Stocks and Currency Visualization in React JS with Redux.In this course, you will learn how to integrate Highcharts library in React JS for data visualization. You will display charts for live Stocks data and Forex data using Highstocks chart. Use custom REST APIs developed using Express JS, Node JS and Mongo DB of your organization and display charts using Highcharts with drag and drop functionality. Compare different company stocks. Compare different country currency trends.Key Points - Integrate Highcharts Library in React SPAVisualize live Stocks and Forex data using HighStocks chartsCompare different company stocksCompare different currencies exchange ratesVisualize custom REST APIs data using Highcharts charts with Drag and Drop functionality and change the chart type dynamicallyVisualize stocks and currencies data using Candlestick chart and OHLC chartsCustomize Highstocks charts

Overview
Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Who should take this course?

Lecture 3 Tools and Software required for this course

Lecture 4 Introduction to application template

Lecture 5 Understanding application structure

Lecture 6 Understanding Webpack configuration

Lecture 7 Understanding initial application code

Section 2: Getting real time and historical Stock and Forex data

Lecture 8 Introduction to a REST API of Stock and Forex

Lecture 9 Stock APIs

Lecture 10 Forex APIs

Section 3: Highcharts wrapper for React

Lecture 11 Introduction to Highcharts library

Lecture 12 Introduction to Highcharts React wrapper

Lecture 13 Preparing our SPA to use Highcharts React Wrapper

Section 4: Getting ready with Application stocks state in Redux

Lecture 14 Defining Stock Action types

Lecture 15 Stock Action Functions with AJAX requests - Part-I

Lecture 16 Stock Action Functions with AJAX requests - Part-II

Lecture 17 Stock Action Functions with AJAX requests - Part-III

Lecture 18 Add Stock Reducer

Lecture 19 Create New Redux Store

Lecture 20 Connect Redux Store to React Application

Lecture 21 Adding Utility function

Section 5: Data Visualization of Stocks using Highstocks - Part-I

Lecture 22 Add Daily Stocks Component

Lecture 23 Connect Daily Stocks component with Redux Store

Lecture 24 Using React Highcharts wrapper to display daily stocks information

Lecture 25 Lazy loading Daily Stocks component by defining route

Section 6: Data Visualization of Stocks using Highstocks - Part-II

Lecture 26 Add Weekly Stocks component

Lecture 27 Connect Weekly Stocks component with Redux Store

Lecture 28 Using React Highcharts wrapper to display weekly stocks information

Lecture 29 Lazy loading Weekly Stocks component by defining route

Section 7: Data Visualization of Stocks using Highstocks - Part-III

Lecture 30 Add Monthly Stocks Component and Connect to Redux Store

Lecture 31 Using React Highcharts wrapper to display monthly stocks information

Lecture 32 Lazy loading Monthly Stocks component by defining route

Section 8: Data Visualization of Stocks using Highstocks - Part-IV

Lecture 33 Writing Monthly Stocks Comparison Component Logic

Lecture 34 Lazy loading Monthly Stocks Comparison component by defining route

Section 9: Challenge for Students

Lecture 35 Challenge

Section 10: Getting ready with Application Forex state in Redux

Lecture 36 Defining Forex Action types

Lecture 37 Forex Action Functions with AJAX requests - Part - I

Lecture 38 Forex Action Functions with AJAX requests - Part - II

Lecture 39 Forex Action Functions with AJAX requests - Part - III

Lecture 40 Add Forex Reducer

Lecture 41 Configure Forex Reducer in Redux store

Section 11: Data Visualization of Forex using Highcharts chart - Part-II

Lecture 42 Add Daily Forex Component

Lecture 43 Connect Daily Forex component with Redux Store

Lecture 44 Using React Highcharts wrapper to display Daily forex information

Lecture 45 Lazy loading Daily Forex component by defining route

Lecture 46 Introduction to Candlestick, OHLC Chart

Section 12: Data Visualization of Forex using Highcharts chart - Part-III

Lecture 47 Add Weekly Forex component

Lecture 48 Connect Weekly Forex component with Redux Store

Lecture 49 Using React Highcharts wrapper to display Weekly Forex information

Lecture 50 Lazy loading Weekly Forex component by defining route

Section 13: Data Visualization of Forex using Highcharts chart - Part-IV

Lecture 51 Add Monthly Forex Component and Connect to Redux Store

Lecture 52 Using React Highcharts wrapper to display Monthly Forex information

Lecture 53 Lazy loading Monthly Forex component by defining route

Section 14: Data Visualization of Forex using Highcharts chart - Part-V

Lecture 54 Add Monthly Forex Comparison Component

Lecture 55 Connect Monthly Forex Comparison component with Redux Store

Lecture 56 Using React Highcharts wrapper to display Monthly Forex comparison information

Lecture 57 Lazy loading Monthly Forex Comparison component by defining route

Section 15: A closer look at REST API build with Node JS, Express JS and Mongo DB

Lecture 58 Introduction to Mongo DB

Lecture 59 Demo - Creating Mongo DB database, collections and inserting the required data

Lecture 60 Introduction to REST API

Lecture 61 Demo - Installing and understanding the application code of REST API

Section 16: Using Highcharts charts in React SPA

Lecture 62 Add action type and action method

Lecture 63 Add Highcharts reducer and configure it to Redux Store

Lecture 64 Configure Drag and Drop package in our React SPA

Lecture 65 Add DynamicHighCharts Component

Lecture 66 Connect DynamicHighCharts component with Redux Store

Lecture 67 Working of React Drag and Drop package

Lecture 68 Using React Highcharts wrapper to display Quarter Sales and Feedback data

Lecture 69 Configure Route and Test DynamicHighCharts Component

Section 17: Customize Highstocks Charts

Lecture 70 Filled color, Markers with Shadow and Step Chart

Intermediate developers who have knowledge of React JS with Redux,Developers who wants to integrate charts in their new/existing React applications,Developers who are working with finance applications or wants to present the data visually using charts