A simple frontend user interface for interacting with a mock stock API. A user is able to fetch data through searching, pagination and sorting by triggering the endpoints of the stock API.
-
Clone the repository,
cdto the project directory and install dependencies in the root of the project and the server directory:$ npm i $ npm --prefix=$PWD/server i -
Start the mock API server by running
npm run server:$ npm run server Loaded 364 stocks Server running on http://localhost:4000
-
Documentation on the API is at http://localhost:4000/documentation#/:
-
To start a CRA development build run
npm run startand your default browser should open up to http://localhost:3000:$ npm run start
-
To run both the server and the react app enter the following into your terminal while at root directory:
$ npm run both Please create a sample application that resembles the mockups and meets the requirements below: Your application should consist of two pages:
-
Home page
/- Should present a list of stocks fetched from the mock API with the open, close, high, low and percentage change in price (from open to close) visible for each stock.
- List should be paginated (either infinite-scroll or pagination buttons are acceptable)
- List should be sortable by the exposed
sortparameter (see API documentation) - The user should be able to search after a specific stock using an input in the navbar and the list should filter accordingly.
- Clicking on a stock row should navigate the user to a detailed view (see below).
-
Stock detail page
/{cusip}- Should be located at
/{cusip}for the given stock - Name, symbol, open, close, change, high and low should be clearly visible
- The navbar should include a button which returns the user back to the homepage
- Should be located at