Web Frontend (SPA)
Relevant source files
The following files were used as context for generating this wiki page:
The Web Frontend serves as the central interface for the NeXifyAI Enterprise platform, encompassing the public-facing landing page, an administrative dashboard, and a customer portal. It facilitates the management of autonomous AI agents, business process automation, and system integrations through a responsive Single Page Application (SPA) architecture.
Sources: apps/web/README.md:1-5, knowledge/emergent/README.md:8-13
Core Tech Stack
The frontend utilizes modern web technologies to ensure high performance, scalability, and enterprise-grade security.
| Layer | Technology |
|---|---|
| Framework | React 18 + Vite |
| Styling | CSS Modules & Tailwind CSS (Design Guidelines) |
| Routing | React Router v6 |
| I18n | Custom Context-based translations (DE, EN, NL) |
| SEO | React Helmet Async + JSON-LD Structured Data |
| 3D/Animation | React-Three-Fiber & Framer Motion |
| Testing | Playwright E2E (WCAG, Security-UX) |
Sources: apps/web/README.md:7-15, knowledge/emergent/README.md:15-22
Architectural Design
The application follows a modular structure separated into functional layers including API integration, reusable components, and localized data stores.
The frontend interacts with two primary backend services: Supabase for database operations and the Brain API for AI-agent orchestration.
Sources: apps/web/README.md:17-30, apps/web/src/components/SEOHead.jsx:110-120
Design System and UI Guidelines
The project enforces a strict "B2B Harmonized" design theme, emphasizing a Swiss high-contrast aesthetic with a dark dashboard variant.
Theme Configuration
- Background Color:
#0f1923 - Primary Accent:
#FE9B7B(Coral) used for primary actions and highlights. - Glass Surface:
bg-[#131a22]/85withbackdrop-blur-xl. - Typography: Manrope for headings, system UI for body text.
Sources: design_guidelines.json:2-45
Component Standards
All interactive elements must include a data-testid attribute using kebab-case role-based naming to support E2E testing. Table structures are unified with specific heights (h-10 for headers, h-14 for rows) and text alignment specifications.
Sources: design_guidelines.json:114-124
Key Modules and Features
SEO and Metadata Management
The SEOHead component manages document head attributes, including titles, descriptions, and Open Graph tags. It injects JSON-LD structured data for Organizations, Local Businesses, and FAQ pages to improve search engine visibility.
Multi-language Support (i18n)
Translations are handled via a custom context-based system. Language preferences are stored in localStorage (nx_lang). Supported languages include German (de), English (en), and Dutch (nl).
Sources: apps/web/src/pages/IntegrationDetail.jsx:40-60, knowledge/emergent/source/src/pages/LegalPages.js:900-915
Integration Catalog
The platform displays a catalog of 400+ system integrations. The IntegrationDetail page provides deep-dives into specific connectors, showing supported protocols (REST API, OAuth 2.0), use cases, and technical implementation steps (Analysis, Configuration, Testing, Go-Live).
Sources: apps/web/src/pages/IntegrationDetail.jsx:10-100
System Health Monitoring
A public health dashboard (health.html) monitors the status of critical services. It performs a 5-minute auto-refresh cycle to fetch data from the audit API.
| Service | Check Method |
|---|---|
| MongoDB | API response status: ok |
| Supabase | API response status: ok |
| Workers | Active count verification |
| Oracle Engine | Cycle progress check |
Sources: apps/web/public/health.html:120-150, SETUP.md:38-50
API and External Services
The frontend communicates with a FastAPI-based backend and several third-party services.
| Service | Purpose |
|---|---|
| Supabase | Oracle Tasks, Audit Logs, Knowledge Base |
| MongoDB | CRM Data, Project management, Leads |
| Revolut | Payment processing and checkout |
| Resend | Transactional E-mail delivery |
| OpenAI | LLM processing for AI Advisor |
Sources: SETUP.md:70-80, knowledge/emergent/source/src/pages/LegalPages.js:250-270
Build and Deployment
The application is deployed via Vercel with automatic builds triggered by pushes to the main branch.
Build Optimization
- Manual Chunking: React, Three.js, Framer-motion, and Unovis are separated into distinct bundles.
- Environment: Production builds disable sourcemaps to reduce file size.
- Output: The compiled assets are placed in the
/builddirectory.
Sources: apps/web/README.md:43-50, apps/web/README.md:70-75
Summary
The Web Frontend is a high-performance React SPA designed for enterprise automation. It integrates complex UI elements (3D, animations) with strict B2B design guidelines and legal compliance. By leveraging Vite for builds and Playwright for testing, it maintains a robust foundation for orchestrating AI agents across 400+ system integrations.