Skip to content
Snippets Groups Projects
Commit 403c3ed9 authored by e.chrysikou@atc.gr's avatar e.chrysikou@atc.gr
Browse files

EUACR-358: Add README.file

parent fc15ee38
No related branches found
No related tags found
No related merge requests found
README.md 0 → 100644
# Citizen Web Application UI
The Citizen Web Application UI is the front-end component of the ACROSS web application, facilitating the citizen's cross border mobility. It is an open source software developed by
[ATC](https://www.atc.gr/) inside the EU founded project [ACROSS](https://across-h2020.eu/).
## Technologies Used
- **[React.js](https://react.dev/)**: This application is built using React.js, a JavaScript library for building user interfaces.
- **[Ant Design](https://ant.design/)**: The UI components and design system used in this project are from Ant Design, a popular React UI library that provides a set of high-quality components and layouts for building modern web applications.
## Installation Requirements
The Citizen Web Application UI requires that the following components are already installed:
- [User Journey Services Engine](https://git.code.tecnalia.com/across/public/user-journey-service-delivery/user-journey-services-engine): to execute User Journey workflows and get logs of activities.
- [Transparency Dashboard UI](https://git.code.tecnalia.com/across/public/citizen-front-end/transparency-dashboard/transparency-dashboard-ui): to get the list of given consents by each citizen and the status of them.
- [Service Catalogue](https://git.code.tecnalia.com/across/public/data-harmonization-and-connectors/service-registry/Public_Service_Catalog_ENG): to get all the required information of the available services.
- [Citizen Web Application BE](https://git.code.tecnalia.com/across/public/citizen-front-end/web-application/web-application-be): to communicate with the [User Journey Services Engine](https://git.code.tecnalia.com/across/public/user-journey-service-delivery/user-journey-services-engine), the [Service Catalogue](https://git.code.tecnalia.com/across/public/data-harmonization-and-connectors/service-registry/Public_Service_Catalog_ENG), the [Transparency Dashboard UI](https://git.code.tecnalia.com/across/public/citizen-front-end/transparency-dashboard/transparency-dashboard-ui) and the Services Providers.
- [Keycloak](https://www.keycloak.org/): to be installed and configured with its corresponding realm and clients.
## Usage
A tutorial video for the usage of the Citizen Web Application UI can be found [here](https://www.youtube.com/watch?v=lGTgErv4EeE&t=243s).
## Keycloak Server Configuration
A client named `across-citizen-web-app`, with the `citizen` role within the realm to be used for all the ACROSS clients, must be configured in the Keycloak Server. For Administrator users of the application, the `citizen-fe-admin` role must be configured as well.
## Running The Application Locally
Before running the application locally, ensure you have Node.js and Yarn installed on your machine.
### Installation Steps:
- **Node.js:** If you haven't already installed Node.js, you can download and install it from the official [Node.js website](https://nodejs.org/en). Follow the installation instructions for your operating system.
*Note:* This project requires Node.js version `16.0.0` or higher.
- **Yarn**: After installing Node.js, you can install Yarn by following the instructions on the [Yarn website](https://yarnpkg.com/).
*Note:* This project requires Yarn version `3.4.1` or higher.
### Steps to Run the Application:
- Clone the repository to your local machine:
``` bash
git clone https://git.code.tecnalia.com/across/public/citizen-front-end/web-application/web-application-ui.git
```
- Navigate to the project directory:
``` bash
cd web-application-ui
```
- Install project dependencies using Yarn:
``` bash
yarn install
```
- Start the application locally:
``` bash
yarn start
```
- Open your web browser and navigate to `http://localhost:3000` to view the application.
### Additional Notes:
- The `yarn install` command installs all project dependencies listed in the package.json file.
- The `yarn start` command starts the development server and launches the application in your default web browser.
- Ensure that no other processes are using port `3000` on your machine before running the application. If port `3000` is already in use, you can specify a different port using the PORT environment variable:
``` bash
yarn start port=4000
```
## Running the Aplication with Docker
To run the replication using Docker, follow these steps:
- **Install Docker:** Ensure you have Docker installed on your system following the instructions in the official [Docker website](https://www.docker.com/)
- **Build the Docker Image:** Navigate to the root directory of the project where the `Dockerfile` is located, then run the following command to build the Docker image:
``` bash
docker build -t across-ui .
```
- **Run the Docker Container:** Once the Docker image is built, you can run a Docker container using the following command:
``` bash
docker run --name across-ui -p 3000:80 across-ui
```
- **Access the Application:** After the container is running, you can access the application by navigating to `http://localhost:3000` in your web browser.
## License
The Citizen Web Application UI is licensed under [GPLv3.0](https://git.code.tecnalia.com/across/public/citizen-front-end/web-application/web-application-ui/-/blob/master/LICENSE?ref_type=heads).
---
## Main Libraries
The main libraries used by the Citizen Web Application UI are:
| Name | Version | License |
|-----------------------------------------------------------------------------------------|---------------|-----------------------------------|
| [React](https://react.dev/) | 17.0.2 | MIT |
| [Ant Design](https://ant.design/) | 4.24.7 | MIT |
| [Ant Design Icons](https://github.com/ant-design/ant-design-icons/tree/master) | 4.6.2 | MIT |
| [Apache ECharts](https://github.com/apache/echarts) | 5.4.1 | Apache 2.0 |
| [i18next](https://github.com/i18next/i18next) | 20.4.0 | MIT |
| [ISO8601 Duration](https://github.com/tolu/ISO8601-duration) | 2.1.1 | MIT |
| [Keycloak-JS](https://github.com/keycloak/keycloak) | 10.0.1 | Apache 2.0 |
| [Pusher JS](https://github.com/pusher/pusher-js) | 8.0.2 | MIT |
| [Web Vitals](https://github.com/GoogleChrome/web-vitals) | 1.0.1 | Apache 2.0 |
---
---
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment