# SGE System Frontend

## Overview

The frontend of the SGE System is a modern web application built with **React**, providing an interactive and user-friendly interface. It communicates with the backend API to deliver a seamless experience for users.

## Technology Stack

- **React** – UI library
- **React Router** – Routing
- **i18n** – Internationalization
- **Docker** – Containerization

## Repository Structure

```
SGE/
├── sge-backend/           # Backend source code
├── sge-frontend/          # Frontend source code
├── config.conf            # Centralized configuration file (see below)
├── docker-compose.yml     # Docker Compose file (see below)
```

## Setup and Installation

### Prerequisites

- **Node.js** (v14.0.0 required) and npm
- **Docker** (for containerized deployment)

#### Node.js Version Management

If you need to switch Node versions, use nvm:

```sh
nvm install v14.0.0
nvm use v14.0.0
unset NODE_OPTIONS
```

### Frontend Setup

#### Local Development

1. Clone the repository and navigate to the frontend directory:

   ```sh
   git clone <repository-url>
   cd SGE/sge-frontend
   ```

2. Ensure `config.conf` is in the project root (`SGE/`).  
   You can either:

   - Manually set environment variables from `config.conf`
   - Or configure your IDE to load variables from `config.conf`

3. Install dependencies:

   ```sh
   npm install
   ```

4. Start the development server:
   ```sh
   npm start
   ```

#### Docker Deployment

1. Ensure both `config.conf` and `docker-compose.yml` are in the project root (`SGE/`).
2. From the root directory, build and run the frontend (and backend) using Docker:
   ```sh
   docker-compose up --build
   ```

## Configuration Management

The SGE System uses a centralized `config.conf` file for all environment variables.  
**Location:** Place `config.conf` in the root directory of your project, alongside `docker-compose.yml`.

This file contains environment variables for both backend and frontend components, including:

- API connection settings
- Mail configuration
- Application URLs

When running with Docker, environment variables are automatically loaded from `config.conf` via the `env_file` directive in `docker-compose.yml`.

For local development, you can either:

- Use the same `config.conf` file and manually set the environment variables
- Configure your IDE to load these variables from the file

Refer to the backend README for more details on configuration options and structure.

## Integration with Backend

The frontend expects the backend API to be available at the host and port specified in `config.conf` (`API_PROTOCOL`, `API_HOST`, `SERVER_PORT`).  
Ensure both services are configured consistently.

## License

[Insert your license information here]

## CI/CD Testing v4