Skip to content
This repository has been archived by the owner on May 23, 2023. It is now read-only.

zimmerman-team/IOM-frontend

Repository files navigation

IOM FRONTEND

This project is the React JS Application as User Interface of the IOM Portal Website to visualized the open data of the IOM Project Activities.

Background Setup & Configuration

This UI has been created & configuration using create-react-app is easy way to creating a React App with no build configuration.

React UI Framework

This application is using Ant Design as main UI Framework with some customize style using JSS abstraction CSS & SASS CSS extension.

Charting Library

Charting is most important UI on this application, we use Rechart redefined chart library built with React and D3.

Data Rest API

This application is just the UI application without contain any data, and the data comes from OIPA specific for the IOM Project.

To fetching data from OIPA, we use Fetch API is an interface resources (including across the network), this is the standard module in every modern browser currently available in the market.

As we know the model of React App is SPA (Single Page Application), when a user clicks to other pages actually just move to the same page. And the problem how about data? If the same page actually must be the same data too, and Redux is the solution to make it different data in SPA as a predictable state container for JavaScript Apps.

Redux is difficult to implemented for some developer, then we use Redux Saga is a library to make application side effects asynchronous things, like data fetching and impure things like accessing the browser cache and very easy to manage, more efficient to execute, and better at handling failures.

How to run on localhost

Download or clone this repository:

git clone https://github.com/zimmerman-zimmerman/iom-frontend

cd iom-frontend

Install all dependencies library:

yarn install

Run application:

yarn start

Finally on your browser open this link http://localhost:3000.

Note

The important thing how this application connect to the OIPA is environment file. To check the content of the file, follow bellow command:

cd iom-frontend

Show the content of file .env with cat:

cat .env

The content of the file .env something like bellow:

REACT_APP_OIPA_HOST=https://iom-oipa.zz-demos.net REACT_APP_REPORTING_ORGANISATION_IDENTIFIER=XM-DAC-47066 REACT_APP_HOSTNAME=https://www.iom.int REACT_APP_GOOGLE_MAP_KEY=AIzaSyCa5x8w9ZoopjQeEwQmfSCDT4fWaNgIEA4

And REACT_APP_OIPA_HOST is the URL web server of the OIPA.