Skip to content
matthewcm.dev

    ↑ ↓ move · ↵ open · tab scopeopen graph →

    archive / project · 2023

    The Crypto App interview project

    Published

    • #vite
    • #typescript
    • #tdd
    • #auth0
    • #project

    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.