Lition Energy Use Case Frontend

Introduction

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:

1. React architecture and approach
2. Layout
3. Testing

Besides, Lition has its own UI-kit which is currently under development, but it is also based on React and Styleguidist.

Installation and start

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.

Configuration

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:

1. Redux for state management.
2. React-router for navigation and app-routing.
3. Axios for handling AJAX requests.
4. React-intl and moment.js for i18n.

To start development, there are several requirements that must be met first:

1. React version >= 16.0.
2. All variables should be declared under :root section.
3. Every CSS file should be imported in a related component file.
4. All necessary states of a component should be added to styleguidist.

Development

On this project there are several sets of development rules that are highly recommended to be followed.

The first one concerns application layers:

1. Follow the DRY principle (this applies to all levels - JavaScript, CSS).
2. Build your solution across redux philosophy and separation of concerns.
3. Do not use promises or async calls, all solutions based on unidirectional dataflow.
4. For each domain entity and related CRUD you should create scripts with the same name, as follows:

/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:

1. Use everywhere classic function declaration.
2. Lambda/arrow function only for callbacks (through const is optional).
3. Do not bind class methods, use lambda onClick="() => this.classMethod()".
4. Cover all path via unit and integration tests, because a test coverage of 80% minimum is expected and needed in order to be able to commit any changes.
5. Use prettier for single code style (configure your IDE).
6. Make components independent from i18n messages and store, implement this kind of logic in containers
7. Do not use middlewares

And the third one is about writing HTML and CSS:

1. Use semantic tags (like header, footer, section and other), it can be verified here.
2. You can wrap a React component by a semantic element, not only by div.
3. Use aria-attributes and https://www.w3.org/WAI/standards-guidelines.
4. Work only with modern CSS, do not use any preprocessor (SASS or LESS).
5. Setup font-size in rem and other properties in em units.
6. Setup line-height in a number.
7. Setup normalization, base and common variables in index.css file.
8. Order your CSS properties by this way.
9. Setup state classes with following names .menu-item--active (as modifier in BEM), for other cases try to use classic w3c selectors, do not use classes everywhere because it makes HTMl untidy and difficult to read.
10. Setup all colors under :root section.
11. Create new color variables, always use postfix -color, for background use infix -bg-, use standard pure color names (red, black) directly in component styles.
12. All class names should use prefix ltn-

Testing

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

Documenting

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