The Crypto App interview project
Introduction
A React Single Page app that fetches crypto currency market updates from https://bittrex.github.io/api/v3
The aim is to show an understanding when working with third party APIs, with a care for project structuring. Also wanted to see bonus points of understanding of Docker, Protecting auth endpoints, and familiarity with back end.
Summary
This was a fun project to do, I was able to build it using some frameworks that I had been learning on my personal projects. It was also an opportunity for me to show high quality code, and TDD principles even in web development.
In the end, it got me the job, so it did prove my technical abilities.
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
Functional Requirements
- Component should have a header and footer
- Market summary displayed for all currencies a. v3/markets/summaries
- Header with a search tab to find details on specific currency a. v3/markets/[marketSymbol]/summary b. E.g. - 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.
- Express server
GET
- Express server
-
Endpoint for summary of specific currency.
- Express server
GET
- Express server
-
Endpoint for health check
- Express server
GET
- Express server
-
Endpoint for status check
- Express server
GET
- Express server
-
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 anid
of currency to view. GET
request to retrieve a list of available currencies, better ease of use, rather than memorising / spelling correctly.- Fuzzy search maybe.
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.