Back to projects
Tele Compensation System

Tele Compensation System

Wiran Larbi / August 1, 2024

Suivi Physique - Tele Compensation System

Project Overview

This project aims to redesign the Suivi Physique system used by NCRM to enhance the tele compensation process. The goal was to modernize an existing system to align with the company's evolving requirements. Through a modular, scalable, and secure approach, the project addressed key business needs, significantly improving efficiency and reliability within the tele compensation workflow.

Objectives

  • Redefine the existing Suivi Physique system.
  • Implement a secure, modular, and scalable solution using DevOps best practices.
  • Seamlessly integrate with the current system architecture, ensuring high compatibility and performance.

This project was structured into three main phases:

  1. Analysis and Project Scoping: Understanding the existing system, defining project boundaries, and gathering functional and non-functional requirements.
  2. Technical and Architectural Design: Establishing a solid technical foundation for both the front-end (Angular SPA) and back-end (Spring Boot).
  3. Implementation and Deployment: Building, testing, and deploying the system using modern development and deployment practices.

Key Features

  • Enhanced Security: Leveraged Spring Security for robust authentication and authorization, protecting the system against unauthorized access.
  • Modular Architecture: Organized the front-end and back-end into well-defined modules for maintainability and scalability.
  • Scalability: Designed to handle future load increases through horizontal scaling.
  • DevOps Integration: Implemented using GitHub Actions and Docker for seamless CI/CD processes.
  • Compliance with OWASP Top 10: Adhered to best practices in security, ensuring a safer application environment.

Tech Stack

  • Frontend: Angular, TypeScript, HTML, CSS
  • Backend: Spring Boot 3, Spring Security, Hibernate
  • DevOps: GitHub Actions, Docker, Maven
  • Database: MySQL
  • API Documentation: Swagger/OpenAPI

Project Structure

Frontend (Angular SPA)

The Angular single-page application (SPA) is organized into well-defined modules:

  • App: Contains core application components and logic.
  • Api: Auto-generated based on OpenAPI specs for consistent API integration.
  • Core: Shared services and modules, including:
    • Constants: Global constants.
    • Directives: Custom Angular directives.
    • Interceptors: HTTP interceptors.
    • Model: Data models shared across the app.
    • Routeguards: Route protections for enhanced security.
    • Services: Core services for app functionality.
  • Modules:
    • 404: Handles "Page Not Found" errors.
    • Auth: Manages authentication workflows.
    • Dashboard: Controls main dashboard functionalities.
    • Layout: Shared layout components.
    • Openapi: OpenAPI integration components.
    • Shared: Reusable components and services.

Backend (Spring Boot)

The backend adopts the MVC architecture to clearly separate concerns:

  • Auth: Authentication and authorization services.
  • Config: Configuration classes for Spring, OpenAPI, database, etc.
  • Constants: Centralized constants (user roles, error messages).
  • Exception: Global and custom exception handling.
  • Filter: HTTP filters for security and logging.
  • Gestion: Core business logic for tele compensation processes.
  • Mail: Classes for email notifications and SMTP configurations.
  • Token: Classes for handling authentication tokens.
  • Users: User management module.

CI/CD Workflows

Our project leverages GitHub Actions for Continuous Integration (CI) and Continuous Deployment (CD), ensuring that code changes are automatically tested, built, and deployed. Below is an overview of each workflow:

Angular Front-End Workflow (ci-ui.yaml)

This workflow automates testing, building, and optionally deploying the Angular front-end application.

  • Triggers: Runs on push or pull requests to key branches.
  • Setup and Linting: Sets up Node.js, installs dependencies, and checks code style with ng lint.
  • Build and Test: Builds the Angular app in production mode and runs tests to validate functionality.
  • Deployment: Deploys the app to the designated environment upon successful build and test completion.

Spring Boot Back-End Workflow (ci-api.yaml)

This workflow handles the CI/CD process for the Spring Boot API.

  • Triggers: Runs on push or pull requests to specific branches.
  • Setup and Dependencies: Sets up the JDK environment and installs dependencies with Maven.
  • Testing and Security: Runs unit and integration tests, along with security checks for dependencies.
  • Docker Image Creation and Deployment: Builds a Docker image for the API, which is then pushed to a registry and deployed to the appropriate environment.

Installation

  1. Clone the repository: 
    git clone https://github.com/Suivie-Physique/suivi-physique.git
  2. Navigate to the project directory: 
    cd suivi-physique
  3. Install dependencies for the Angular app: 
    cd frontend
npm install
  4. Build the Angular project: 
    ng build --prod
  5. Navigate to the backend and build the project: 
    cd ../backend
mvn clean install
  6. Run the project: 
    mvn spring-boot:run

Usage

  1. Access the application on http://localhost:4200 (Angular).
  2. The API can be accessed via http://localhost:8080/api (Spring Boot).

Contributions

Contributions are welcome! Please open an issue or submit a pull request with any improvements or suggestions.