Frontend Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/App.tsx
• frontend/src/main.tsx
• frontend/vite.config.ts
• frontend/package.json
• frontend/src/components/Layout.tsx
• frontend/src/components/Sidebar.tsx
• frontend/tailwind.config.js
• SUMMARY.md
• DASHBOARD_README.md
• frontend/src/components/DocumentationView.tsx
• frontend/src/components/Chart3D.tsx

The frontend for the SPK Kajek project is a modern Single Page Application (SPA) built to provide an interactive and responsive user interface for the TOPSIS-based Decision Support System. It serves as the client-facing component, communicating with a FastAPI backend via a REST API to perform calculations and manage data. The architecture is designed for a fast, seamless user experience with dynamic data visualizations and smooth animations.

The overall system architecture places the React frontend as the primary interface for the user, handling all presentation logic and user interactions.

This diagram shows the high-level interaction between the user's browser, the Vite-powered React frontend, and the backend services.
Sources: SUMMARY.md

Technology Stack

The frontend is built with a modern toolchain centered around React and TypeScript, ensuring type safety and robust component-based development. Vite is used as the build tool for a fast development experience.

Technology	Version	Purpose
React	^18.2.0	UI Framework
TypeScript	^5.0.0	Type Safety
Vite	^5.0.0	Build Tool & Dev Server
Tailwind CSS	^3.3.5	Utility-First CSS Framework
Framer Motion	^10.16.0	Animations and Transitions
Recharts	^2.10.0	2D Data Visualization
Three.js	^0.160.1	3D Data Visualization
Axios	^1.6.0	HTTP Client for API communication
Lucide React	^0.292.0	Icons

Sources: frontend/package.json, README.md

Project Structure

The frontend directory is organized to separate concerns, with distinct folders for components, services, and application context. This structure promotes modularity and maintainability.

This diagram illustrates the file organization within the frontend directory.
Sources: SUMMARY.md, DASHBOARD_README.md

Build and Configuration

Build Tool: Vite

The project uses Vite as its build tool and development server. The configuration in vite.config.ts enables the React plugin (@vitejs/plugin-react) for HMR (Hot Module Replacement) and other optimizations.

The primary scripts for managing the frontend lifecycle are:

• npm run dev: Starts the development server.
• npm run build: Compiles and bundles the application for production.
• npm run preview: Serves the production build locally.

Sources: frontend/package.json:5-9, frontend/vite.config.ts

Styling: Tailwind CSS

Styling is primarily handled by Tailwind CSS. The configuration file tailwind.config.js extends the default theme with custom colors for the application's dark mode.

Color Name	Hex Code	Usage
dark.900	#1a1f2e	Main background
dark.800	#242b3d	Card background
dark.700	#2d3548	Elevated surfaces
dark.600	#3d4556	Borders & dividers

Sources: frontend/tailwind.config.js:8-15

Component Architecture

The application follows a component-based architecture, with App.tsx as the root component. It manages application state, authentication, and routing between different views.

Core Components

Component	Description	Source File
App.tsx	The root component. Manages authentication state and renders the active view.	frontend/src/App.tsx
Layout.tsx	Provides the main application structure, including the sidebar and main content area with a shared header.	frontend/src/components/Layout.tsx
Sidebar.tsx	A collapsible navigation menu for switching between different application views.	frontend/src/components/Sidebar.tsx
LoginView.tsx	The authentication screen presented to unauthenticated users.	frontend/src/App.tsx:61-63
*View.tsx	A series of components representing distinct pages (e.g., DashboardView, AnalysisView).	frontend/src/App.tsx:16-34

Component Hierarchy

The diagram below shows the relationship between the main structural components.

This chart illustrates how App.tsx conditionally renders LoginView or the main Layout based on authentication status. The Layout then frames the currently active view.
Sources: frontend/src/App.tsx:61-78, frontend/src/components/Layout.tsx

State Management and Routing

State Management

The application primarily uses React's built-in useState hook for local and global state management. The main application state, including isAuthenticated, currentUser, and activeTab, is managed within the root App.tsx component and passed down to child components as props.

Sources: frontend/src/App.tsx:13, 36-37

Client-Side Routing

Routing is handled by managing the activeTab state in App.tsx. A switch statement in the renderContent function determines which "View" component to display based on the activeTab string. Navigation is performed by calling the setActiveTab function.

The flow for rendering content is as follows:

This diagram shows the logic flow when a user navigates between pages.
Sources: frontend/src/App.tsx:15-34, frontend/src/components/Sidebar.tsx:59-65

Authentication Flow

Authentication is based on JSON Web Tokens (JWT). The client-side flow involves requesting a token, storing it, and handling logout.

The sequence diagram below details the login process:

This diagram shows the sequence of events from user interaction in LoginView to the state update in App.tsx that reveals the main application.
Sources: frontend/src/App.tsx:39-47, DASHBOARD_README.md

UI and Visualization

Animations

The application heavily uses framer-motion for animations. This includes:

• Page transitions with AnimatePresence in App.tsx.
• Collapsible sidebar animations in Sidebar.tsx.
• Staggered and hover animations on cards and UI elements in DashboardView.tsx.

Sources: frontend/src/App.tsx:66-76, frontend/src/components/Sidebar.tsx:40-58, UI_UX_UPGRADE.md

Data Visualization

The frontend employs two key libraries for charting:

1. Recharts: Used for 2D charts like bar charts, radar charts, and line charts to visualize TOPSIS results and historical data.
2. Three.js: Used for creating interactive 3D bar charts, providing a multi-dimensional view of the analysis results. The Chart3D.tsx component encapsulates this logic, setting up a THREE.Scene, camera, renderer, and dynamically generating bars based on data.

Sources: DASHBOARD_README.md, frontend/src/components/Chart3D.tsx