Technical Architecture

ROPAgen represents a modern, production-ready web application built with industry-leading technologies and best practices. The platform demonstrates excellence in software engineering through its sophisticated architecture, automated deployment pipeline, and cutting-edge user experience design.

Technology Stack

Core Framework & Runtime

ROPAgen is built on Next.js 15, leveraging the latest React 19 features and server-side rendering capabilities. The application utilizes Next.js's App Router for optimal performance and developer experience, with TypeScript providing comprehensive type safety throughout the codebase.

Frontend Technologies

The user interface showcases modern web development practices with a carefully curated technology stack:

• React 19 with the latest hooks and concurrent features
• TypeScript 5 for robust type checking and enhanced developer productivity
• Tailwind CSS 4 for utility-first styling with custom design system integration
• Framer Motion 12 powering sophisticated animations and micro-interactions
• Radix UI components ensuring accessibility compliance and consistent behavior
• next-themes for seamless dark/light mode transitions

AI & Language Models

The document generation engine integrates multiple AI providers for maximum flexibility and reliability:

• OpenAI GPT-4 models via the official AI SDK
• Mistral AI integration for alternative language model options
• Vercel AI SDK providing unified interface for model switching
• Custom prompt engineering optimized for GDPR compliance document generation

Internationalization & Accessibility

ROPAgen supports multiple languages through a sophisticated internationalization system:

• next-intl for comprehensive i18n support (German and English)
• Dynamic locale routing with /[locale] structure
• Server-side translation loading for optimal performance
• Accessible UI components meeting WCAG guidelines

Documentation System

The documentation platform utilizes Fumadocs, a modern documentation framework built specifically for Next.js applications, providing:

• MDX-based content with custom components
• Built-in search functionality
• Responsive design with mobile-first approach
• Syntax highlighting and code examples

PDF Generation & Document Processing

Advanced document generation capabilities powered by:

• Puppeteer for high-fidelity PDF rendering
• Chromium headless browser integration
• Marked for Markdown to HTML conversion
• Custom styling engine for professional document layouts

Database & Authentication

ROPAgen employs Supabase as its backend solution, providing:

• PostgreSQL database for structured data storage
• Built-in authentication and user management

CI/CD Pipeline

ROPAgen implements a robust three-branch deployment strategy with fully automated continuous integration and deployment:

Branch Strategy

The project follows a structured Git workflow:

• Feature branches → Development work and new features
• dev branch → Integration and testing environment
• main branch → Production-ready releases

Automated Build & Deployment

GitHub Actions orchestrates the entire deployment pipeline, which follows industry standard best practices.

1. Trigger Events: Automated workflows activate on:

• Push or merge to dev branch → deploys to staging
• Merge to main branch → deploys to production

2. Docker Image Creation:

• GitHub Actions builds optimized Docker images
• Images are automatically pushed to Docker Hub
• Each deployment tagged with commit SHA and branch name

3. Automated Container Deployment:

• Watchtower runs on the production server
• Continuously monitors Docker Hub for image updates
• Automatically pulls new images and deploys updated containers
• Zero-downtime deployment with health checks

Deployment Environments

• Staging: dev.ropagen.eu (from dev branch)
• Production: ropagen.eu (from main branch)

This automated pipeline ensures consistent deployments, rapid iteration cycles, and reliable production releases without manual intervention.

Prompt Handling

Each button includes an associated "source" that is transmitted with every request to the LLM API. This design enables flexible, source-specific prompt adaptation, allowing each prompt to be tailored to its originating source. The prompt and code are designed so that potential hallucinations do not affect any other part of the ROPA generation process,but are limited only to the specific prompt where they occur. This modular approach enhances reliability and maintainability in the document generation workflow.