reverse-proxy-frontend/README.md

Reverse Proxy Frontend

A modern web interface for managing reverse proxy configurations, monitoring active sessions, and analyzing traffic patterns. Built with React 19, TypeScript, and Material-UI for a responsive and intuitive user experience.

📋 Overview

This frontend application provides a comprehensive dashboard for reverse proxy management, featuring real-time session monitoring, forward configuration, analytics, and an integrated AI assistant. It's designed to work seamlessly with the reverse proxy backend API and offers both light and dark mode support with internationalization.

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn package manager

Development Setup

# Clone the repository
git clone https://lab.code-rove.com/gitea/tudor.stanciu/reverse-proxy-frontend
cd ReverseProxy_Frontend

# Install dependencies
npm install

# Start development server
npm start

The application will be available at http://localhost:3000

Production Build

# Build for production
npm run build

# Preview production build locally
npm run preview

# Type check (optional)
npm run type-check

🌍 Environment Configuration

Create environment files for different deployment scenarios:

Development (.env)

VITE_REVERSE_PROXY_API_URL=http://localhost:5050
VITE_CHATBOT_API_URL=http://localhost:5061
VITE_REVERSE_PROXY_DOCS_URL=https://lab.code-rove.com/hedgedoc/s/UkJ6S5NJz
VITE_BASE_PATH=

Production (.env.production)

VITE_REVERSE_PROXY_API_URL=https://lab.code-rove.com/reverse-proxy-api
VITE_CHATBOT_API_URL=https://lab.code-rove.com/chatbot-api
VITE_REVERSE_PROXY_DOCS_URL=https://lab.code-rove.com/hedgedoc/s/UkJ6S5NJz
VITE_BASE_PATH=reverse-proxy

📸 Screenshots

Dashboard Overview

Session Analytics

🎯 Key Features

🖥️ Server Management

• Real-time Status Monitoring - Live server health and performance metrics
• System Information - Hardware specs, version info, and runtime statistics
• Quick Actions - Direct links to configuration and documentation

📊 Session Analytics

• Active Sessions - Monitor currently running reverse proxy sessions
• Forward Management - Configure and manage request forwarding rules
• Performance Charts - Visual analytics of session runtime and traffic patterns
• Historical Data - Track usage trends and performance over time

⚙️ Advanced Configuration

• Forward Options - Detailed configuration for each forward rule
• IP Filtering - Allow/block specific IP addresses or ranges
• SSL Policy - Configure certificate validation and security settings
• Key Overwrite - Custom header and parameter manipulation
• Exception Handling - Define custom error responses and fallbacks

🤖 AI Assistant Integration

• Interactive Chatbot - Get help with configuration and troubleshooting
• Guided Setup - Step-by-step wizard for common tasks
• Context-Aware Help - Intelligent suggestions based on current context

🌐 User Experience

• Responsive Design - Works seamlessly across desktop, tablet, and mobile
• Internationalization - Multi-language support (English, Romanian)
• Dark/Light Mode - Theme switching for better usability
• Accessibility - WCAG compliant design with keyboard navigation

🛠️ Technology Stack

Frontend Core

• React 19.1 - Latest React with concurrent features and performance improvements
• TypeScript 5.9 - Full type safety and enhanced developer experience
• Vite 7.0 - Ultra-fast build tool and development server with HMR

UI Framework

• Material-UI v7 - Modern Material Design components with theming
• @emotion - High-performance CSS-in-JS styling
• sx props - Streamlined styling API for better performance

State Management

• Redux Toolkit 2.8 - Modern Redux patterns with RTK Query ready
• React-Redux 9.2 - React bindings with hooks API
• Immer - Immutable state updates with mutable API

Routing & Navigation

• React Router v7 - Latest routing with data loading and error boundaries
• Dynamic Imports - Code splitting for optimal bundle sizes

Charts & Visualization

• Recharts - Composable charting library for analytics
• Custom Components - Purpose-built visualization components

Development Tools

• ESLint - Code quality and consistency enforcement
• TypeScript Compiler - Type checking and compilation
• Source Maps - Full debugging support in development and production

Internationalization

• i18next - Comprehensive internationalization framework
• React i18next - React integration with hooks and HOCs
• Language Detection - Automatic locale detection and persistence

Additional Features

• React Country Flag - Country flag components
• React Skillbars - Animated progress bars for metrics
• Moment.js - Date and time manipulation
• Axios - HTTP client with interceptors and request/response transformation

📁 Project Architecture

src/
├── components/           # Reusable UI components
│   ├── common/          # Generic components (Spinner, Icons, etc.)
│   ├── home/            # Homepage components
│   └── layout/          # Layout components (AppBar, etc.)
├── features/            # Feature-based modules
│   ├── about/           # About page and system information
│   ├── charts/          # Analytics and data visualization
│   ├── chatbot/         # AI assistant integration
│   ├── forwards/        # Forward configuration management
│   ├── frontendSession/ # Frontend session management
│   ├── releaseNotes/    # Application changelog
│   ├── server/          # Server status and management
│   ├── session/         # Proxy session monitoring
│   ├── snackbar/        # Global notification system
│   └── system/          # System utilities and settings
├── hooks/               # Custom React hooks
├── redux/               # State management
│   ├── reducers/        # Redux reducers
│   └── store.ts         # Store configuration
├── utils/               # Utility functions
│   ├── i18n.ts         # Internationalization setup
│   └── paths.ts        # Path resolution utilities
└── config/             # Application configuration

Feature Module Structure

Each feature follows a consistent structure:

features/[feature]/
├── actionCreators.ts    # Redux actions
├── actionTypes.ts       # Action type constants
├── api.ts              # API calls
├── reducer.ts          # Redux reducer
└── components/         # React components
    ├── [Feature]Container.tsx    # Connected container
    ├── [Feature]Component.tsx    # Pure component
    └── [Feature]Summary.tsx      # Summary display

🐳 Docker Deployment

Multi-stage Production Build

# Build stage
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production=false
COPY . .
ARG VITE_BASE_PATH=""
ENV VITE_BASE_PATH=${VITE_BASE_PATH}
RUN npm run build

# Production stage
FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build with Base Path Support

# For root deployment (/)
docker build -t reverse-proxy-frontend .

# For subfolder deployment (/reverse-proxy)
docker build --build-arg VITE_BASE_PATH=reverse-proxy -t reverse-proxy-frontend .

Run Container

# Development
docker run -p 3000:3000 reverse-proxy-frontend

# Production
docker run -p 80:80 reverse-proxy-frontend

📈 Performance Metrics

• Bundle Size: ~1.44MB (gzipped: ~461KB)
• Build Time: ~7.6 seconds (optimized with Vite)
• Dev Server Startup: <1 second
• Hot Module Replacement: <100ms
• First Contentful Paint: <1.2s
• Time to Interactive: <2.1s

🔧 Available Scripts

Script	Description
npm start	Start development server with HMR
npm run dev	Alias for start command
npm run build	Create optimized production build
npm run preview	Preview production build locally
npm run type-check	Run TypeScript type checking

🚢 Deployment Options

1. Static Hosting (Netlify, Vercel)

npm run build
# Deploy /build directory

2. Nginx Server

npm run build
# Copy build/ to nginx web root
# Configure nginx.conf for SPA routing

3. Docker Container

docker build -t reverse-proxy-frontend .
docker run -p 80:80 reverse-proxy-frontend

4. Subfolder Deployment

# Build with base path
VITE_BASE_PATH=reverse-proxy npm run build
# Or use Docker build arg
docker build --build-arg VITE_BASE_PATH=reverse-proxy -t app .

🌟 Development Guidelines

Code Style

• Use TypeScript for all new code
• Follow React hooks patterns
• Implement proper error boundaries
• Use MUI sx props instead of makeStyles
• Follow feature-based folder structure

State Management

• Use Redux Toolkit for global state
• Implement proper action creators and reducers
• Use React.memo for performance optimization
• Handle loading and error states consistently

Component Design

• Create reusable components in /components/common/
• Use proper TypeScript interfaces
• Implement responsive design with MUI Grid
• Follow accessibility best practices

API Integration

• Use centralized API configuration
• Implement proper error handling
• Use loading states for better UX
• Handle offline scenarios gracefully

🤝 Contributing

1. Fork the repository and create a feature branch
2. Follow existing patterns for consistency
3. Add TypeScript types for new features
4. Test thoroughly across different screen sizes
5. Update documentation for significant changes
6. Submit a pull request with clear description

🔍 Troubleshooting

Common Issues

Build Errors

# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install

TypeScript Errors

# Run type checking
npm run type-check

Environment Variables Not Working

• Ensure variables start with VITE_
• Restart development server after changes
• Check .env file is in project root

404 Errors in Production

• Configure web server for SPA routing
• Ensure base path matches deployment path

📄 License & Credits

Author: Tudor Stanciu Email: tudor.stanciu94@gmail.com Portfolio: https://lab.code-rove.com/tsp Version: 1.4.15

This project is part of a comprehensive reverse proxy infrastructure solution, showcasing modern web development practices and enterprise-level application architecture.