Technology Stack

The SPK Kajek project is a modern full-stack web application designed as a Decision Support System (DSS) for selecting the best Cloud VPS server using the TOPSIS method. The architecture is composed of a decoupled frontend and backend, communicating via a REST API. The frontend is a Single Page Application (SPA) built with React, providing a rich, interactive user experience, while the backend is a high-performance API server built with Python and FastAPI.

This separation allows for independent development, scaling, and maintenance of the client-side and server-side components. The technology choices reflect a focus on modern development practices, performance, and a high-quality user interface.

Sources: README.md:15-16, SUMMARY.md:7-10

Overall Architecture

The system follows a classic client-server architecture. The user interacts with a React-based frontend running in the browser, which makes HTTP requests to a FastAPI backend server. The backend processes these requests, performs TOPSIS calculations, manages data, and interacts with the file-based data layer for persistence.

The diagram below illustrates the high-level system architecture.

Sources: SUMMARY.md:9-41, backend/main.py:20-23, frontend/package.json

Frontend

The frontend is a modern Single Page Application (SPA) built using React and TypeScript, served by the Vite development server. It is responsible for all user interface elements, data visualization, and communication with the backend API.

Sources: README.md:41-51, DASHBOARD_README.md:6-15

Core Technologies

Sources: frontend/package.json:14-30, README.md:42-51, DASHBOARD_README.md:7-15

Frontend Project Structure

The frontend source code is organized within the frontend/src/ directory, separating components, services (API client), and context.

frontend/
├── src/
│   ├── components/       # Reusable React components (e.g., DashboardView, AnalysisView)
│   ├── services/         # API service client (api.ts)
│   ├── context/          # React Context for state management (e.g., ThemeContext)
│   ├── App.tsx           # Root application component
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles and Tailwind directives
├── package.json          # Project dependencies and scripts
├── tailwind.config.js    # Tailwind CSS configuration
└── vite.config.ts        # Vite build tool configuration

Sources: SUMMARY.md:141-155, DASHBOARD_README.md:213-225

Backend

The backend is a RESTful API built with Python and the FastAPI framework. It handles business logic, including the TOPSIS algorithm, user authentication, and data persistence operations.

Sources: README.md:53-61, SUMMARY.md:42-53

Core Technologies

Sources: backend/requirements.txt, README.md:54-61, backend/main.py:1-15

Authentication

The backend implements JWT-based authentication to secure its endpoints.

• Token Creation: A JWT is created upon successful login using the create_access_token function.
• Password Security: Passwords are not stored in plaintext. They are hashed using PBKDF2-HMAC-SHA256 with 100,000 iterations.
• Token Validation: Protected endpoints use the get_current_user dependency to decode and validate the JWT from the Authorization header.

The diagram below shows the authentication flow.

Data Layer

The application's data is stored in a file-based system rather than a traditional database. This simplifies setup and is suitable for the project's scope.

• Vendor Data: The primary data for TOPSIS alternatives is stored in an Excel file: TOPSIS_Input_Level.xlsx. This file contains the vendor information and their criteria levels.
• User Data: User accounts, including usernames and hashed passwords, are stored in users.json.
• Calculation History: Past TOPSIS calculation results are saved in calculation_history.json.

Sources: backend/main.py:20-23, generate_excel_level.py:284-285, SUMMARY.md:35-39

Data Schema

The following diagram shows the entities and their storage format.

Sources: backend/main.py:30-36, 730-754, generate_excel_level.py:11-45