Energy Use Case Web UI for Lition Trading Platform
Lition is developing the only scalable public-private blockchain with deletable data features, made for commercial products. Designed with Lition's live P2P trading use case, and co-innovated with SAP.
This repository shows the frontend for the energy use case, which is the world's first peer to peer energy trading plattform commercially available to a mass market. You can test it at https://demo.lition.de with the credentials demo / demo1234. The Frontend part of its trading platform is built with modern JavaScript, HTML and CSS, but there are some helpers: React as a framework, Jest as a testing tool and Styleguidist as a source of documentation.
There are several articles written by Lition Tech-Lead which describe the chosen approaches of development in full. Links to them can be found below:
Besides, Lition has its own UI-kit which is currently under development, but it is also based on React and Styleguidist.
First step is to install all application dependencies:
$ npm install
You have possibility to start standalone front-and app with local proxy server (by default http://localhost:3000
):
$ npm run start
or build static sources for production env via following command:
$ npm run build
After that check ./build
folder.
The idea of this project is to keep everything simple and use as little dependencies as possible. So in the beginning the initial app structure was created with create-react-app.
Still there are some additional necessary tools used for this project development:
To start development, there are several requirements that must be met first:
On this project there are several sets of development rules that are highly recommended to be followed.
The first one concerns application layers
:
/services/api/producers.js
/services/api/__tests__/producers.test.js
/reducers/producers.js
/reducers/__tests__/producers.test.js
/action_performers/producers.test.js
/action_performers/__tests__/producers.test.js
The second is about the way in which React components
should be written:
And the third one is about writing HTML and CSS
:
Start unit and system tests using following command:
$ npm run test
After test completion you can check coverage report here: ./coverage/lcov-report/index.html
All application web components must be described through interactive documentation.
Run standalone documentation via following command (by default http://localhost:6060
):
$ npm run styleguide
or build static files:
$ npm run styleguide:build