TMS-UI (Task Management System)
This project was bootstrapped with Create React App, Redux Thunk and Typescript.
It manages a simple task manager based on TMS server.
Code contribution and design
The project is developed based on the redux thunk framework. It uses middleware dispatchers for creating side-effects to the actions and retrieve data from the APIs.
Folder structure
- __test__: contains all unit tests
- components: contains the ui component
- containers: contains the connection function between redux and simple component.
- open-api: the json open api needed for generating the service code
- store: redux reducers and action creators
UI library
A simple UI library has been used for widgets rendering: Primereact. The main usage is the PrimeFlex library that gives some simple css classes for using the flexbox, borders and spicing
Open API
TMS server exposes a JSON representative swagger structure that is used for creating services based on axios
Follow https://github.com/marcosperanza/tms#open-api for extracting the updated APIs.
This project reads the open APIs json file directly on this folder: src/open-api/tms-api-v1.json. In order to generate the services run this
npm run generate
Docker
The docker image is based on nginx:1.19.10 image. The main idea is to use nginx to publish the webapp and redirect the requests to the backand.
Into the project folder nginx there is a default template for configuring nginx.
It uses an envinonment variable TMS_SERVICES that must be used for redirect the request to the right backend server.
npm install
npm run build
docker build -t marcosperanza79/tms-ui:latest -f Dockerfile .