Skip to Content
DevelopmentFrontend (Platform)Overview

Frontend Documentation

Welcome to the Rhesis Frontend documentation. This section covers the React-based frontend application that provides the user interface for the Rhesis platform.

Frontend Overview The Rhesis frontend is built with React 18, TypeScript, and Next.js 15, providing a modern, responsive user interface with real-time collaboration features.

Quick Start

Prerequisites

Before working with the frontend, ensure you have:

System Requirements - Node.js 18+ and npm - Backend service running on port 8080 - Modern browser with ES6+ support - Environment variables configured

Development Setup

setup.sh
# Navigate to frontend directory
cd apps/frontend

# Install dependencies
npm install

# Set up environment
cp ../../.env.example .env.local
# Edit .env.local with your configuration

# Start development server
npm run dev

Development Server - URL: http://localhost:3000  - Hot Reload: Enabled for instant updates - TypeScript: Full type checking and IntelliSense - ESLint: Code quality and style enforcement

Architecture

Technology Stack

React 18

Modern React with hooks, concurrent features, and suspense.

TypeScript

Type-safe JavaScript with advanced IDE support.

Next.js 15

Full-stack React framework with App Router.

Tailwind CSS

Utility-first CSS framework for rapid styling.

Zustand

Lightweight state management for React.

React Query

Data fetching and caching library.

Application Structure

Application Structure
└──
apps/frontend
    ├──
src
    │   ├──
app# Next.js App Router pages
    │   │   ├──
(protected)# Authenticated routes
    │   │   ├──
auth# Authentication pages
    │   │   └──
layout.tsx# Root layout
    │   ├──
components# Reusable React components
    │   │   ├──
common# Shared components
    │   │   ├──
forms# Form components
    │   │   └──
layout# Layout components
    │   ├──
hooks# Custom React hooks
    │   ├──
lib# Utility libraries
    │   ├──
stores# Zustand state stores
    │   └──
types# TypeScript type definitions
    ├──
public# Static assets
    ├──
tailwind.config.js# Tailwind CSS configuration
    └──
package.json# Dependencies and scripts

Core Features

Authentication System

The frontend implements a comprehensive authentication system:

auth.tsx
// Authentication hook
const { user, login, logout, isLoading } = useAuth();

// Protected route wrapper

JWT Authentication

Secure token-based authentication with automatic refresh.

Role-Based Access

UI components adapt based on user permissions.

Multi-tenant Support

Organization-based data isolation and management.

Social Login

Integration with OAuth providers (Google, GitHub).

Session Management

Automatic session handling and timeout management.

State Management

Using Zustand for lightweight, scalable state management:

// Example store
interface AppState {
  user: User | null
  organization: Organization | null
  setUser: (user: User) => void
  setOrganization: (org: Organization) => void
}
 
const useAppStore = create<AppState>(set => ({
  user: null,
  organization: null,
  setUser: user => set({ user }),
  setOrganization: org => set({ organization: org }),
}))

Data Fetching

React Query for efficient data fetching and caching:

useQuery.ts
// Example query
const {
data: tests,
isLoading,
error,
} = useQuery({
queryKey: ['tests', organizationId],
queryFn: () => api.getTests(organizationId),
staleTime: 5 * 60 * 1000, // 5 minutes
})

Component Library

Common Components

The frontend includes a comprehensive component library:

UI Components

Buttons, inputs, modals, and other basic UI elements.

Layout Components

Headers, sidebars, and page layout structures.

Form Components

Form builders, validators, and submission handlers.

Data Display

Tables, charts, and data visualization components.

Navigation

Breadcrumbs, menus, and routing components.

Component Examples

components.tsx
// Button component


// Form component

Routing & Navigation

App Router Structure

Next.js 15 App Router provides file-based routing:

app/
├── page.tsx                    # Home page (/)
├── auth/
│   ├── signin/page.tsx         # Sign in (/auth/signin)
│   └── signout/page.tsx        # Sign out (/auth/signout)
├── (protected)/                # Protected route group
│   ├── dashboard/page.tsx      # Dashboard (/dashboard)
│   ├── tests/
│   │   ├── page.tsx           # Tests list (/tests)
│   │   └── [id]/page.tsx      # Test detail (/tests/123)
│   └── settings/page.tsx       # Settings (/settings)
└── layout.tsx                  # Root layout

Route Protection

// Middleware for route protection
export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')
 
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/auth/signin', request.url))
  }
 
  return NextResponse.next()
}

API Integration

API Client

Centralized API client with automatic error handling:

// API client configuration
const apiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  timeout: 10000,
})
 
// Request interceptor for authentication
apiClient.interceptors.request.use(config => {
  const token = getAuthToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

API Hooks

Custom hooks for API integration:

// Custom hook for tests
export function useTests(organizationId: string) {
  return useQuery({
    queryKey: ['tests', organizationId],
    queryFn: () => api.getTests(organizationId),
    enabled: !!organizationId,
  })
}
 
// Mutation hook
export function useCreateTest() {
  return useMutation({
    mutationFn: api.createTest,
    onSuccess: () => {
      queryClient.invalidateQueries(['tests'])
    },
  })
}

Styling & Design

Tailwind CSS

Utility-first CSS framework for rapid development:

// Component with Tailwind classes
<div className="flex items-center justify-between p-6 bg-white rounded-lg shadow-sm border border-gray-200">
  <h2 className="text-xl font-semibold text-gray-900">Test Results</h2>
  <Button variant="primary">Export</Button>
</div>

Design System

Consistent design tokens and components:

// Design tokens
const colors = {
  primary: {
    50: '#eff6ff',
    500: '#3b82f6',
    900: '#1e3a8a',
  },
  // ... more colors
}
 
// Component variants
const buttonVariants = {
  primary: 'bg-primary-500 text-white hover:bg-primary-600',
  secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
  danger: 'bg-red-500 text-white hover:bg-red-600',
}

Performance Optimization

Code Splitting

Automatic code splitting with Next.js:

// Dynamic imports for code splitting
const TestEditor = dynamic(() => import('./TestEditor'), {
  loading: () => <TestEditorSkeleton />,
  ssr: false,
});

Image Optimization

Next.js Image component for optimized images:

import Image from 'next/image';
 
<Image
  src="/logo.png"
  alt="Rhesis Logo"
  width={200}
  height={50}
  priority
/>

Caching Strategies

Static Generation

Pre-rendered pages for optimal performance.

Incremental Static Regeneration

Background updates for fresh content.

Client-side Caching

React Query for API response caching.

CDN Optimization

Static assets served from CDN.

Development Workflow

Local Development

# Start development server
npm run dev
 
# Run type checking
npm run type-check
 
# Run linting
npm run lint
 
# Run tests
npm run test
 
# Build for production
npm run build

Environment Configuration

Key environment variables:

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_WS_URL=ws://localhost:8080
 
# Authentication
NEXT_PUBLIC_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_AUTH_CLIENT_ID=your-client-id
 
# Feature Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ENABLE_BETA_FEATURES=false

Testing

Test Suite

Comprehensive testing with Jest and React Testing Library:

// Component test example
import { render, screen } from '@testing-library/react';
import { TestCard } from './TestCard';
 
describe('TestCard', () => {
  it('renders test information correctly', () => {
    render(<TestCard test={mockTest} />);
 
    expect(screen.getByText(mockTest.name)).toBeInTheDocument();
    expect(screen.getByText(mockTest.description)).toBeInTheDocument();
  });
});

Test Categories

Unit Tests

Individual component and function testing.

Integration Tests

Component interaction and API integration testing.

E2E Tests

Full user journey testing with Playwright.

Visual Regression Tests

UI consistency and design validation.

Deployment

Build Process

# Production build
npm run build
 
# Static export (optional)
npm run export

Deployment Options

Vercel

Optimized deployment for Next.js applications.

Netlify

Static site deployment with serverless functions.

Docker

Containerized deployment for custom environments.

Self-hosted

Traditional server deployment with nginx.

Next Steps - Explore the Component Library for available UI components - Check out Authentication Guide for security implementation - Review State Management for data flow patterns - Learn about API Integration for backend communication

OverviewGetting Started