Stocks Web App

A web application that makes stock market statistics available to the user.

Photo by M. B. M. on Unsplash

Tech Stack

• React.js (Hooks, Context)
• React Router
• Bootstrap, Reactstrap
• ag-grid
• Recharts

Note: This tutorial does not provide the server-side implementation.

Demo

Stocks Web App Demo

Step by Step Tutorial:

Step1: Wrap app with a “Router” (React Router), when you click a <Link/>, it will navigate to the relevant component with a certain “path”. [App.js]

Step2:

• Implement “Home” and “Stock” page skeleton.
• No state involved here, pure HTML, and some styling, just try to build a skeleton here.

Step3:

• Implement a modular structure
• Instead of putting “Home” and “Stock” function components in the same App.js, we treat them as modular components
• Remember, we need to export the component in “Home” and “Stock, using “export default XXX”

Step4:

• Instead of using hard-coded data, we fetch the stock data when the “Stock” component is rendered.
• useEffect(()=>{}, []) is executed only once, because [] is empty

Step5:

• Use another “useState” to store the text input that user enters into “searchStockSymbol”
• Every time text input changes, “setState” it to “searchStockSymbol”
• Add the “searchStockBySymbol” function when the “search” button is clicked, simply hit the server again by accessing another endpoint. (But we can actually filter the data locally.)

Step6:

• To improve from version 5, when users search the stocks by text, instead of hitting the server again, we filter the data locally.
• Regular expression — test function

Step7:

• For now, we assume the “search” button has nothing to do with the “Industry” dropdown list. So we wrap the button together with the text input.
• Implement a dropdown list to show the stocks which belong to a particular industry.
• The mechanism is similar to <input/>, whenever a change is triggered, we fetch the data and update it to “updatedStocks”.

Step8:

• Rename “Stock” to “StockSearch”, because we also need a “StockHistory” screen.
• When a cell in the table is clicked, it will navigate to the history page, and also need to pass the “symbol”
• Create a new file called “Stock”, it is basically going to be a “route”

Minor Change:

• Instead of using “props.match.url”, we use “useRouteMatch()” here. React Router nesting

Step9:

• Create a new js file called “StockHistory.js”, move the “StockHistory()” component from “Stock.js” to “StockHistory.js”

Step10:

• Create “StockHistory” skeleton

Step11:

• Instead of using hard-coded table data, we define the “columns” first
• And then dynamically fetch the row data from the server

Step12:

• Modify “timestamp” format to the format of date - “yyyy-mm-dd”

Step13:

• When users select a specific date, the table should display the history data after that date.
• We hit the server again to fetch the updated data. Again, not ideal. Should not hit the server again. But it works.

Step14:

• Improvement from version 13, instead of hitting the server, we filter the data locally.

Step15:

• We want the “company name” to be displayed in the “StockHistory” screen, but we did not pass the name when we use the router.
• “Lifting state up” is the solution. Which basically manages a state in the parent component, which is able to share it with its children.

• In our case, “StockSearch.js” and “StockHistory.js” are siblings. So if they want to share the state, they have to through the “Stock.js”.

Step16:

• Implement data visualization using Recharts

Optional:

To improve from what we have done so far, I modify a little bit to

1. Instead of using “Lifting state up”, I apply the feature called “Context”, which is to share data and can be considered “global” for a tree of React components. You can assume it is like “Redux” if you are familiar with it.
2. Make the code cleaner, more modularized
3. Improve performance [prevent inevitable calls and repetitive storing]
4. Of course, make it look nicer [add some styling]

I have provided the repository link below, welcome to check it out! (In this project, server-side is not implemented, but I have provided some API sample datasets for you.)

captain-ray/Stock_Web_App