Back to Home

The Crypto App interview project

Published on

Vite Typescript TDD Auth0 Project
GitHubLinkedIn

codecov NodeJS CI

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

  1. Component should have a header and footer
  2. Market summary displayed for all currencies a. v3/markets/summaries
  3. Header with a search tab to find details on specific currency a. v3/markets/[marketSymbol]/summary b. E.g. - v3/markets/ltc-btc/summary
  4. Quality unit tests using react testing library
  5. Docker build files
  6. Back-end Health check and version info/pages
  7. Light/Dark themes

Non-Functional Requirements

  1. Authentication for backend rest calls
  2. Professional styling and UX
  3. ES lint defined/configured in the project folder for code quality
  4. Good project structuring
  5. Secured way of storing auth credentials
  6. No Hardcoding
  7. Efficient code (less loops, conditional statements)
  8. Readable and well-structured package.json
  9. Add typescript supporting functions
  10. 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:

image

General Flow

image

Core Components

Back end

  • Endpoint for market summary for all currencies.

    • Express server GET

  • Endpoint for summary of specific currency.

    • Express server GET

  • Endpoint for health check

    • Express server GET

  • Endpoint for status check

    • Express server GET

  • 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.
    • 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.