Skip to content

🏗️ Application Architecture

This document provides an overview of how Kraken Web UI is structured and how its components interact.

⚙️ Technology Stack

Kraken Web UI is built using the following technologies:

  • Frontend: Next.js (React framework)
  • Backend: Next.js API Routes
  • Database: MongoDB
  • State Management: Local state (React hooks)
  • Containerization: Docker
  • CI/CD: GitHub Actions
  • Testing: Jest (unit & integration tests)
  • Code Quality: ESLint (linting), Prettier (formatting)

🏛️ System Architecture Overview

The system follows a modular, component-based architecture, separating concerns between Frontend, Backend, and Database.

┌──────────┐       ┌───────────────┐        ┌──────────┐
│ Frontend │ <-->  │ API (Next.js) │ <-->   │ MongoDB  │
└──────────┘       └───────────────┘        └──────────┘

  1. Frontend (Next.js)

  2. Renders UI components.

  3. Handles user interactions.

  4. Calls API routes for data.

  5. Backend (Next.js API)

  6. Provides RESTful API endpoints.

  7. Interacts with MongoDB.

  8. Performs business logic.

  9. Database (MongoDB)

  10. Stores sensor data and configurations.

  11. Queries and updates data.

🔄 Data Flow

  1. The user interacts with the UI (e.g., adds a sensor).
  2. The Frontend sends a request to the Next.js API.
  3. The API processes the request and communicates with MongoDB.
  4. The response is sent back to the Frontend, updating the UI.

📂 Main Directories and Responsibilities

  • src/components/ → UI components.
  • src/models/ → Database schemas.
  • src/actions/ → Logic for interacting with the backend.
  • tests/ → Automated tests using Jest.
  • .eslintrc.json / .prettierignore → Code linting & formatting configurations.

🚀 Deployment & CI/CD

  • The project is deployed using GitHub Actions and Docker.
  • The CI/CD pipeline includes:
  • Code Quality Checks
    • Runs ESLint to ensure best practices.
    • Runs Prettier to format the code.
  • Automated Testing
    • Runs Jest tests for both unit and integration testing.
  • Docker Build & Deployment
    • Builds and pushes Docker images.
    • Deploys the latest version.