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