Sensibull Frontend Developer
Programming Challenge
Problem Statement
We have provided 2 APIs that give a list of stocks and their prices (See 'Input API Details'
section below.)
Create web application with the following 2 pages
Stocks page
Display a table listing the symbol, name and category for each instrument
Provide a search box that fuzzy searches the symbol and name and filters the list
of stocks shown in the table
On clicking any symbol, user must be redirected to quotes page for that symbol
(see below)
For this page, load data from /instruments API (see 'Input API Details' section
below)
Quotes page
For the selected instrument, show the list of quotes
The quotes must be sort-able by timestamp ascending or descending
Please refresh the quotes when the valid_till timestamp for the data expires
For this page, load data from /quotes API (see 'Input API Details' section below)
Please make the pages look nice
Technical Requirements
The submission must use React.
You may use any third party npm libraries.
You can use any third party CSS frameworks as you want (eg. material-ui, bootstrap etc.) or
write vanilla CSS.
Submission
Please create a tar.gz file containing a git repo of the solution and upload it to a shared
Google Drive/DropBox folder, and share that link with us.
NOTE: Please remove node_modules directory before creating the tar.gz file.
Use Git for version control.
We would like to see the Git metadata (the .git folder) in the tarball so we can look at
your commit logs and understand how your solution evolved.
Frequent commits are a big plus.
Please make sure that the code has the necessary instructions to build the frontend and run
the dev server.
Please make sure that the build instructions are simple, for eg. something like
npm install && npm run build && npm run start
Please include a file detailing any design / architecture and any potential improvement if
needed.
Do not make either your solution or this problem statement publicly available by, for
example, using GitHub, Gitlab or Bitbucket or by posting this problem to a blog or forum.
Input API Details
Instruments API
(NOTE: This API is provided by Sensibull)
Endpoint: https://prototype.sbulltech.com/api/v2/instruments
Method: GET
Response: CSV with list of instruments
Example:
Request
curl 'https://prototype.sbulltech.com/api/v2/instruments'
Response
Symbol,Name,Sector,Validtill
BAJFINANCE,Bajaj Finance Ltd.,Financial Services,2021-10-29 08:59:06
KSCL,Kaveri Seed Company Ltd.,Consumer Goods,2021-10-29 08:59:06
DLF,DLF Ltd.,Construction,2021-10-29 08:59:06
RELCAPITAL,Reliance Capital Ltd.,Financial Services,2021-10-29 08:59:06
Quotes API
(NOTE: This API is provided by Sensibull)
Method: GET
Endpoint: https://prototype.sbulltech.com/api/v2/quotes/{symbol}
Response: Array of quotes for the given symbol
Example:
Request
curl 'https://prototype.sbulltech.com/api/v2/quotes/SBIN'
Response
{
"success": true,
"payload": {
"SBIN": [
{
"time": "2021-10-28 12:03:46",
"price": 17388.932633802062,
"valid_till": "2021-10-28 12:03:48"
},
{
"time": "2021-10-28 12:05:22",
"price": 16644.677657986853,
"valid_till": "2021-10-28 12:03:22"
},
{
"time": "2021-10-28 12:07:59",
"price": 17399.191923387705,
"valid_till": "2021-10-28 12:03:03"
}
]
}
}
