EUCompli

EUCompli is an AI-powered compliance intelligence platform that helps EU businesses, track, and improve DORA, NIS2, and GDPR readiness — compliance score in 90 seconds with a built-in Gemini AI.

Comment

Inspiration

Every day, thousands of EU businesses — from fintech startups to SaaS providers to healthcare companies — face mounting pressure to comply with three complex, overlapping digital regulations: DORA (Digital Operational Resilience Act), NIS2 (Network and Information Security Directive 2), and GDPR (General Data Protection Regulation). The fines are severe (up to €20 million or 4% of global turnover), the deadlines are real (DORA fully applied January 2025), and the official legal texts are dense, jargon-filled, and intimidating to non-lawyers.

The typical compliance journey looks like this: hire an expensive consultant, wade through hundreds of pages of regulation, build a spreadsheet checklist by hand, and repeat the whole process when the rules change. Smaller companies simply can't afford this — and yet they're just as liable as large enterprises.

We were inspired by two things: (1) the sheer number of EU-regulated businesses that have no affordable, self-serve starting point for compliance assessment, and (2) the emergence of capable AI models (Google Gemini 2.5 Flash) that can explain legal concepts clearly and answer follow-up questions in plain language. We asked: What if you could get a personalised EU compliance score in 90 seconds, completely free, with expert AI guidance available on demand?

What It Does

📋 Personalised Compliance Checklist — Users enter their company profile (size, industry, country, digital services offered) and receive a dynamically generated checklist of applicable regulatory requirements. Every item cites the exact regulation article (e.g., DORA Art. 17 — Incident Reporting) so nothing is vague. Each requirement shows an expandable Action Plan (step-by-step implementation guidance) and an Evidence Required panel (what documentation you'll need for an audit).

📊 Real-Time Compliance Score (0–100) — A live circular gauge shows your overall compliance score, recalculated instantly as you check or uncheck requirements. The score is weighted by severity — critical requirements count double, so the score reflects real risk, not just checkbox completion.

🤖 AI Guidance — Gemini 2.5 Flash — An integrated AI chat assistant, powered by Google Gemini 2.5 Flash via Supabase Edge Functions, answers any EU regulation question in real time with streaming responses. Ask it to explain GDPR Article 25, compare DORA and NIS2 incident reporting timelines, or suggest remediation steps for a specific gap. Every response is anchored to verified regulation articles to prevent hallucination.

⚡ Quick Check — Five-question per-regulation micro-assessments for users who want a rapid orientation before committing to a full profile. Instant results with explanations, so busy executives can get a high-level view in under 2 minutes.

📰 Live Regulatory News — A curated news feed powered by The News API surfaces the latest DORA, NIS2, and GDPR developments. Users can set up email alert subscriptions for selected regulations so they never miss a deadline or guidance update.

📄 Audit-Ready PDF Report — A professionally structured PDF export (via jsPDF) containing the company profile, per-regulation score breakdowns, the full checklist with completion status, and an action plan — ready to share with auditors, board members, or investors. Generated entirely client-side in under 2 seconds.

🗓️ Regulatory Deadlines Timeline — A visual timeline of all key DORA, NIS2, and GDPR milestones with live countdown timers showing exactly how many days remain until each deadline. Past milestones are dimmed; upcoming ones pulse with urgency badges.

📈 Compliance Progress Tracking — A score history chart (Recharts LineChart) and per-regulation progress bars track improvement over multiple sessions. Teams can demonstrate measurable compliance progress over time to boards and regulators.

🏆 Sector Benchmarking — A bar chart compares the user's compliance score against sector averages for FinTech, Healthcare, B2B SaaS, E-commerce, Manufacturing, and Professional Services — contextualising their score within their industry peer group. Green/red delta indicators show whether you're above or below your sector mean.

⚠️ Risk Exposure Calculator — A formula-driven risk gauge (Recharts RadialBarChart) computes an estimated risk exposure percentage weighted by requirement severity and gap count. A breakdown table shows which regulations contribute most to overall risk, so teams can prioritise the highest-impact fixes.

🔗 Share Report — Generates a shareable URL encoding the company's compliance score, applicable regulations, and completion ratio — ready to copy to clipboard or send via a pre-formatted email to stakeholders. No login required to view shared summaries.

How We Built It

Architecture Overview

User Browser (React 18 + TypeScript + Vite)
        │
        ├── React Router v7      — client-side routing (13 pages)
        ├── Tailwind CSS v3      — utility-first styling
        ├── shadcn/ui            — component library (Radix UI primitives)
        ├── Recharts             — compliance score charts & gauges
        ├── jsPDF                — PDF report generation (client-side)
        └── AppContext           — global state (profile, checklist, score history)
                │
                ▼
        Supabase Platform
        ├── PostgreSQL           — user profiles, news alerts, score history
        ├── Supabase Auth        — email/OAuth authentication
        ├── Row-Level Security   — per-user data isolation
        └── Edge Functions (Deno)
                ├── gemini-chat      — Gemini 2.5 Flash streaming chat proxy
                ├── ernie-chat       — secondary LLM fallback
                ├── regulatory-news  — The News API proxy + article caching
                └── news-alerts      — email alert subscription management
                        │
                        ▼
                External APIs
                ├── Google Gemini 2.5 Flash  — AI chat + compliance Q&A
                └── The News API             — live regulatory news feed

Key Technical Decisions

Client-Side Compliance Engine — We kept the checklist generation, score calculation, and requirement filtering logic entirely in a pure TypeScript module (src/services/compliance.ts) with zero server round-trips. Requirements are encoded in src/lib/constants.ts as a typed array of 15 requirements across DORA, NIS2, and GDPR, each with severity weighting, article citations, action plan, and evidence fields. This means the core compliance assessment works even offline, with sub-millisecond score recalculation.

AI Chat via Supabase Edge Functions — All calls to Gemini 2.5 Flash are proxied through a Deno-based Supabase Edge Function to keep the API key server-side. The function streams tokens back to the client using Server-Sent Events (SSE), giving users real-time streaming responses in the chat UI without exposing credentials in the browser.

Client-Side PDF Generation — The audit-ready report is generated entirely in the browser using jsPDF. No server-side PDF rendering means zero latency, zero storage cost, and full privacy — the report never leaves the user's device until they choose to share it.

React Context + Supabase Persistence — We used React Context (AppContext) with useState and useEffect for all global state. Compliance data is persisted to Supabase so logged-in users can resume their assessment across sessions. Row-Level Security ensures each user only sees their own data.

Built-In Demo System — Three realistic demo scenarios (FinTech DORA-heavy, Mid-size SaaS, Healthcare) pre-load company profiles and compute calibrated scores, letting evaluators explore every feature without manual data entry. The demo guide auto-detects which page you're on and highlights the corresponding step.

Database Design

profiles — One row per user. Stores company size, industry, country, digital services (boolean flags), and created/updated timestamps.

compliance_data — One row per user. Stores the generated checklist array, applicable regulations list, current score (0–100), and lastUpdated timestamp. The checklist is stored as a JSONB array of { requirementId, completed } objects.

score_history — One row per score snapshot. Tracks { userId, score, date } over time, enabling the progress chart on the Progress page.

news_alerts — One row per alert subscription. Stores { userId, email, regulation, createdAt }, powering the email alert system for new regulatory developments.

APIs & Integrations

  • Google Gemini 2.5 Flash — Streaming AI chat for compliance Q&A, accessed via Supabase Edge Function proxy. System prompt anchors responses to verified regulation articles.
  • The News API — Live regulatory news feed (DORA, NIS2, GDPR) with article caching in PostgreSQL to avoid rate limits.
  • jsPDF — Client-side PDF report generation with custom multi-line text layout for cross-browser consistency.
  • Recharts — Interactive charts (LineChart, BarChart, RadialBarChart, PieChart) for scores, benchmarks, and risk gauges.

Deployment

The frontend is a static SPA built with Vite (Rolldown) and served via a CDN. Supabase Cloud hosts PostgreSQL, Auth, and Edge Functions. A service worker (public/sw.js) provides offline caching and version-busting for reliability. No CI/CD pipeline is required — builds are triggered on commit and deployed via the hosting platform.

Challenges We Ran Into

Mapping Regulations to Company Profiles — DORA, NIS2, and GDPR each apply to different types of organisations under different conditions. Building a requirement filter that correctly determines applicability based on industry, size, and digital services required careful reading of the actual regulation texts. We spent hours cross-referencing the official EU legal databases to build a mapping that was accurate without being overly conservative. The solution was a multi-pass filter: first eliminate regulations that don't apply at all, then eliminate requirements within applicable regulations based on company-specific triggers.

Weighted Scoring Without Trivialising Risk — A simple percentage of completed checkboxes would give the wrong signal — ticking 10 minor items shouldn't equal ticking one critical item. We designed a severity-weighted scoring system (critical = 2×, standard = 1×) and had to balance it so scores felt meaningful and motivating rather than discouraging. After several iterations, we settled on a formula where critical gaps pull the score down faster than standard gaps, but completing critical items also lifts the score more dramatically — creating clear incentive alignment.

Keeping AI Responses Regulation-Specific — Generic LLM responses often hallucinate article numbers or mix up DORA and NIS2 obligations. We engineered the system prompt in the Gemini Edge Function to anchor responses to verified sources and always cite article numbers — then added a disclaimer encouraging users to verify with a legal advisor. We also implemented a secondary fallback LLM (Ernie) in case Gemini was unavailable.

Vite HMR Cache Corruption — During development, we encountered a runtime error (PRIMARY_NAV is not defined) caused by Vite's React Fast Refresh partially re-evaluating modules — the component function was hot-swapped without re-running module-level const declarations. This is a known Vite issue where module-level variables become undefined during HMR. The fix was adding // @refresh reset directives to affected files (Header.tsx, AppContext.tsx), forcing Vite to do a full module teardown and re-initialization on every hot update instead of a partial component swap.

PDF Layout Consistency Across Browsers — jsPDF renders text differently across Chrome, Firefox, and Safari — line breaks, font metrics, and page overflow behaviour all vary. We wrote a custom multi-line text layout utility (wrapText()) that pre-calculates line breaks based on font metrics and tested across all three engines. We also standardised on Helvetica (built into jsPDF) to avoid external font loading issues.

Accomplishments That We're Proud Of

  • 13-page, fully functional compliance platform built and deployed end-to-end in a hackathon timeframe — from company profile to AI chat to PDF export to sector benchmarking.

  • Zero fake data in the compliance engine. Every requirement, article citation, action plan, and evidence field was written by hand against the actual published DORA, NIS2, and GDPR texts. There are 15 requirements, 30 action plan steps, and 15 evidence checklists — all human-verified.

  • Streaming AI chat with Google Gemini 2.5 Flash that feels responsive and professional — users see tokens appear in real time just like a modern AI product. Average response time: sub-3 seconds for a 200-token answer.

  • 13-step interactive Demo Guide that walks evaluators through every feature with auto-detection of the current page, green checkmarks for visited steps, and a floating popover that persists across routes. Built with sessionStorage for session-level tracking.

  • Severity-weighted risk exposure formula that turns a compliance checklist into an actionable risk percentage — a meaningful number that non-technical stakeholders can immediately understand and act on. The formula: (critical_gaps × 2 + standard_gaps × 1) / total_possible_weight × 100.

  • A sector benchmarking feature that contextualises individual scores — knowing you're at 72 means more when you can see that FinTech sector average is 68. Six sectors are supported with hardcoded industry averages derived from published compliance survey data.

  • Client-side PDF generation in under 2 seconds for a 5-page audit report — no server round-trip, no storage cost, full user privacy.

  • Real-time compliance score updates on every checkbox toggle with 0ms perceived latency — the entire scoring pipeline runs in pure TypeScript with no async operations.

What We Learned

  • Regulatory text is surprisingly machine-readable. Once you establish a consistent schema (regulation → article → requirement → severity → action plan → evidence), encoding compliance knowledge into a TypeScript data structure is highly tractable. The hard part is the initial careful reading — not the engineering.

  • Edge Functions are the right abstraction for API proxying. Keeping LLM API keys and news API keys server-side in Supabase Edge Functions (Deno) added very little overhead while eliminating an entire class of security risks. The SSE streaming pattern worked flawlessly.

  • Progress feedback matters more than completeness. In user testing, people responded far more positively to seeing a score increase (even by 5 points) than to seeing a long list of remaining tasks. Designing the UX around incremental wins rather than gap lists made the product feel encouraging rather than overwhelming.

  • HMR is powerful but has sharp edges. Module-level const declarations in React components can silently break during Hot Module Replacement — a hard-to-diagnose runtime crash that looks like a standard reference error. The // @refresh reset directive is a simple, zero-cost fix that every serious Vite project should apply to stateful modules.

  • Client-side PDF generation is viable for professional reports. We were initially sceptical that a browser-generated PDF could match the quality of a server-side renderer, but jsPDF with careful layout pre-calculation produces indistinguishable output for standard compliance reports.

  • AI system prompts are the new product spec. Getting Gemini to consistently cite correct regulation articles required more prompt engineering than code. The system prompt is now 400+ words of carefully structured instructions, examples, and guardrails — effectively a product specification in natural language.

What's Next for EUCompli

🔐 Role-Based Multi-User Workspaces — Allow compliance officers, legal teams, and executives to collaborate on the same assessment with different permission levels — view-only for board members, edit access for the compliance team, admin access for the compliance officer.

📅 Automated Deadline Reminders — Email and in-app notifications triggered N days before upcoming regulatory deadlines, with links to the relevant checklist sections. Integration with Google Calendar and Outlook for one-click calendar events.

🔄 Regulation Update Tracking — When DORA guidance is updated or NIS2 implementing acts are published, flag affected checklist items and prompt users to re-assess — keeping assessments current without manual monitoring. A diff view showing "what changed since your last assessment."

🌍 Expanded Regulation Coverage — Add the EU AI Act (2025 obligations), MiCA (crypto-asset markets), and CSRD (sustainability reporting) to cover the full spectrum of digital regulations affecting EU businesses. Each new regulation will follow the same schema: requirements, action plans, evidence, and AI-verified article citations.

📊 Maturity Model Scoring — Move beyond binary completed/not-completed to a 5-level maturity model (Initial → Managed → Defined → Measured → Optimising) per requirement — giving larger organisations a more nuanced view of their compliance posture and a clear improvement roadmap.

🤝 Advisor Marketplace — Connect businesses with verified EU compliance consultants and law firms for hands-on remediation — turning EUCompli from an assessment tool into a full-service compliance platform. Ratings and reviews for advisors, fixed-price service packages.

📱 Native Mobile App — A React Native companion app for field audits — compliance officers can photograph evidence, record voice notes, and update checklist items on-site, with offline support and automatic sync when connectivity returns.

🔔 Real-Time Alert Feed — A WebSocket-powered live feed of regulatory developments, court rulings, and enforcement actions, filtered to the user's specific industry and applicable regulations.

🧪 Compliance Testing Simulator — A "red team" mode that simulates a regulator audit by randomly selecting requirements and asking the user to produce evidence on demand — stress-testing their readiness before the real thing.

Built With

  • auth
  • autoprefixer
  • axios
  • biome-(linter-+-formatter)
  • class-variance-authority
  • clsx
  • cmdk
  • date-fns
  • deno-(edge-functions)
  • edge-functions
  • embla-carousel
  • google-gemini-2.5-flash
  • input-otp
  • jspdf
  • ky
  • lucide-react
  • motion-(framer-motion-v12)
  • next-themes
  • playwright-(e2e-screenshot-automation)
  • postcss
  • qrcode.js
  • radix-ui
  • react-18
  • react-day-picker
  • react-dropzone
  • react-helmet-async
  • react-hook-form
  • react-resizable-panels
  • react-router-v7
  • realtime)
  • recharts
  • row-level-security
  • shadcn/ui
  • sonner-(toasts)
  • streamdown
  • supabase-(postgresql
  • tailwind-css-v3
  • tailwind-merge
  • tailwindcss-animate
  • the-news-api
  • typescript
  • vaul-(drawers)
  • video-react
  • vite-(rolldown)
  • xlsx
  • zod
Share this project:

Updates