diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..f54719e9a9b4aa8ada08c04b5d0d1e16a509512b --- /dev/null +++ b/README.md @@ -0,0 +1,124 @@ +# 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 | + + +--- +--- + +