Giter Club home page Giter Club logo

crypto-app-frontend's Introduction

crypto-app-frontend

Project description

This project is about a cryptocurrencies-like website. Here is a description of the features it contains:

Main accounts page

  • This a page which is showing a list of accounts/wallets, like an administration panel from a user.
  • Each account has a balance in Bitcoin (BTC), it should display the balance in dollars given an exchange rate of the BTC to $ by WebSocket at any time.
  • When a new exchange is pushed, it updates each account balance. Also, the account balance may change in the time, it will update the balance in real change and notifying in the following way:
    • Red colour when the balance is lower than before
    • Green colour when the balance is higher than before
  • Each account is a clickable element that will open a new page without refreshing with account details

Account details page

  • This is a page which is showing the details from a given account ID
  • It should display a list of transactions attached to the given account
  • It shows the balance which as before is changed by the exchange rate update and flash a different colour depending on the balance update

App header

  • Top bar component that allows the user to return to the home view

Architecture introduction

This repository contains a React app which connects to a backend compose by a restful API and WebSockets in order to render the fakr data in real-time. The tech stack is the following:

  • React with Typescript
  • Material UI as components library
  • Xstate and RxJS for business logic and networking
  • socket.io client
  • Automation testing with Cypress and Jest

Installation

Firstly all the dependencies need to be installed, as this is a JS project node is necessary plus a dependency installer, the preference here is yarn

Once these tools are installed you need to run on the project folder for dependencies installation:

yarn

Running the app

First, the backend must be running or even a mock server on the port 8080, the quickest way is to set up the backend repository which is https://github.com/Nachox07/crypto-app-backend

Once it is running, you just need to run yarn start

Now it should open a browser tab on http://localhost:3000

Testing

Unit testing

The command to run the unit tests is:

yarn test

Integration testing

The following command open Cypress with the available suites:

yarn cypress:open

crypto-app-frontend's People

Contributors

nachox07 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.