Competence4Energy: Web (Frontend)

The Competence4Energy Web application serves as the frontend for the Competence4Energy platform. It provides an intuitive frontend that helps researchers and professionals build profiles, connect with others, form research clusters, and explore competence fields to foster collaboration and knowledge exchange.

This repository is based on the original ZLE Web application and integrates closely with the backend API, delivering a comprehensive competence management and discovery solution.

Technology Stack

This frontend application is built with:

• Angular version 18.2.10
• Angular Material Design Framework for UI components
• TypeScript for type-safe development
• Additional libraries: Bootstrap, Leaflet, Axios, and more (see package.json for complete list)

Backend Requirement

Important: This frontend application requires the backend API to be running. The backend repository can be found at:

• Competence4Energy API

Make sure the backend is properly configured and running before starting the frontend development server.

Prerequisites

Before installing and running the application, ensure you have the following installed:

• Node.js (version 14.x or higher recommended) bundled with npm
  • Download from: https://nodejs.org/en/download/package-manager
• Angular CLI (optional, but recommended for global access)
  • Install globally: npm install -g @angular/cli
  • Note: Angular CLI is also included in the project's devDependencies, so npm install will install it locally

Local installation of ZLE-WEB Angular Frontend with ng serve for live editing

1. Clone the repository:

git clone <repository-url>
cd zle-web

2. Install Node.js and npm (if not already installed)

   • Download from: https://nodejs.org/en/download/package-manager

3. Install Angular CLI globally (optional, for direct ng command access):

npm install -g @angular/cli

4. Import/Install project dependencies:

npm install

This command will:

• Import and install all project dependencies listed in package.json
• Install Angular core modules (Angular 18.2.10)
• Install Angular Material and related UI components
• Install other required packages (Bootstrap, Leaflet, Axios, etc.)
• Create a node_modules directory with all dependencies

Note: This step is essential before running the application. All required modules and their versions are defined in package.json.

5. Start the development server:

ng serve
# or if Angular CLI is not installed globally, use:
npm run start

or for publishing it in local network to test with other devices like mobile phones

ng serve --host 0.0.0.0

deploy docker container locally (for testing purposes)

docker build -t competence_web_image .
docker compose up -d

you should be able to acces frontend under http://localhost:8080/competence/