Develop a simple stock trading application request stock quotes and allows the enduser to buy and sell stocks. This assignment will be completed in stages.
- That lists information about a set of quotes
- Provide the ability for the user to buy x amounts of each particular stock
- Provide the ability to sell x amounts of particular stock (if they have it in their portfolio)
- A button that refreshes stock information
- Displays the user's available balance
- Displays the user's stock portfolio with each stock's purchased price as well as the difference between purchase price and current price.
- Clone this repository:
git clone https://github.com/CaninoDev/stocks - In your favorite IDE, open the resulting folder.
- run
npm install - In a terminal window, run
node server,js. This will serve as the backend for this project. - Complete the following stage:
class component:
- fetch quotes information when it mounts using the component's lifecycle function componentDidMount() and calls fetch(). The resulting data should be stored in the component's state
- renders each stock information using stateless components
The endpoint for retrieving stock data is localhost:5000/api/index. Research into the fetch() and how to call it here
class component: - stores the user's available balance in state. Their starting balance should be $100,000. - implements transactional functions that take in values that will add and subtract from their balance - renders their balance information using a stateless component
class component: - stores the user's stock portfolio in state. Assume that their stock portfolio contains the entire index as provided in your quotes component. - implements a sell function that divests their portfolio for a specific stock. Don't worry about updating your balance to reflect transaction at the moment. - renders each stock in the portfolio that displays the purchase date and price.
Use App.js as your starting point. It should render the class components above.
After you have completed Stage 1, take a look at the application as a whole. Take what you know about state, props, and .bind(this) and consider how you would attempt to connect these stateful components. What would the resulting architecture look like?
We will look at higher order components and Redux for the second stage.