crypto
Introduction
A react app that fetches crypto currency market updates from https://bittrex.github.io/api/v3
Prerequisites
Install Docker
Check the official Docker documentation for information how to install Docker on your operating system. And then install Docker and supporting tools.
How to use
Install node dependencies
npm ci
with Docker installed on your machine, run the following make
commands
To build application
make build
To run the application
make up
To stop and remove application docker containers
make down
To run tests on Docker container
make test
To run lint on Docker container
make lint
System Design Documentation
Requirements
Functional Requirements
- Component should have a header and footer
- Market summary displayed for all currencies
a. https://api.bittrex.com/v3/markets/summaries
- Header with a search tab to find details on specific currency
a. https://api.bittrex.com/v3/markets//summary
b. E.g. - https://api.bittrex.com/v3/markets/ltc-btc/summary
- Quality unit tests using react testing library
- Docker build files
- Back-end Health check and version info/pages
- Light/Dark themes
Non-Functional Requirements
- Authentication for backend rest calls
- Professional styling and UX
- ES lint defined/configured in the project folder for code quality
- Good project structuring
- Secured way of storing auth credentials
- No Hardcoding
- Efficient code (less loops, conditional statements)
- Readable and well-structured package.json
- Add typescript supporting functions
- CI/CD
a. Build checks on prs
b. Tests on prs
Technologies
- React
- Typescript
- Vite
- Reeact Redux
- Eslint
- Tailwind
- React Testing Library
- Express
- Docker
High Level Design
Quick wireframe sketch:
General Flow
Core Components
Back end
-
Endpoint for market summary for all currencies.
-
Endpoint for summary of specific currency.
-
Endpoint for health check
-
Endpoint for status check
-
Authorised endpoints with auth0 jwt tokens.
Front end
- Simple single page application with:
- Header
- Main section
- Footer
- Search tab
Main section:
- to
GET
retrieve and render information from a back end endpoint
Search tab:
- to send a
GET
request to back end endpoint, with an id
of currency to view.
GET
request to retrieve a list of available currencies, better ease of use, rather than memorising / spelling correctly.
Authorization:
JWT Single Sign on login via Auth0. https://auth0.com/
Scale
For purpose of this project scale is not required. However during application development can investigate some future scale ideas.