Diabolical Services

Diabolical Services is built as a React + Vite single-page application with its own Express production server. The frontend handles the landing page experience, routing, animations, chatbot, contact form, and visual interactions, while the Express server handles dynamic SEO injection, API routes, robots.txt, sitemap.xml, compression, security headers, and production delivery. The system includes an internal admin panel for managing SEO and tracking configuration, local JSON-based persistence for settings, Firebase SDK initialization for future Firestore/Auth expansion, and n8n webhook integration for lead processing. The application is containerized with Docker and deployed through Dokploy.

Frontend Stack

The frontend was built with React 19, Vite 7, React Router DOM, Tailwind CSS v4, GSAP, ScrollTrigger, Lucide React, Axios, clsx, and tailwind-merge. The landing page includes a full-screen Hero, interactive grid, floating navigation, problem section, solution cards, success stories, comparison section, bold CTA hook, FAQ accordion, contact form, footer, custom cursor, and a lazy-loaded diagnostic chatbot. The visual system uses a dark high-contrast interface, glassmorphism cards, custom fonts, animation effects, smooth scrolling, subtle grain overlays, and responsive behavior for desktop and mobile devices.

Backend Stack

The production backend is an Express server called Monster_SEO. It serves the Vite build, exposes internal API routes, handles gzip compression, applies HTTP security headers with Helmet, supports CORS, parses JSON requests, and provides health checks for deployment. The server also reads the built index.html file, loads the current SEO configuration, and injects metadata into the HTML before sending it to the browser. This allows crawlers and social platforms to receive complete SEO tags even though the frontend is a client-side SPA.

Database Stack

The project uses local JSON-based persistence through data/settings.json. This file stores configurable SEO and marketing settings such as title, description, keywords, site URL, favicon, Open Graph image, Twitter handle, robots.txt, sitemap.xml, structured data, Google Tag Manager, Meta Pixel, and custom header scripts. The system also initializes Firebase Firestore and Firebase Auth as cloud infrastructure prepared for future expansion.

Automation Stack

Lead capture is automated through n8n. The contact form and diagnostic chatbot both send POST requests to a self-hosted n8n webhook. The payload includes contact information and user answers. After submission, the system also opens WhatsApp with a pre-formatted message using platform-aware deep links for Android, iOS, and desktop. This creates a direct workflow from landing page interaction to lead routing and WhatsApp follow-up.

AI Stack

Diabolical Services is positioned as an AI automation brand, and the landing page is designed to present AI-driven services, automation workflows, and business process optimization. The platform also includes llms.txt, structured service metadata, and AI-crawler-oriented context to make the website easier for AI search systems and LLM-based crawlers to understand.

Deployment Stack

The project is deployed with Docker on Dokploy. The Docker build installs dependencies, runs the Vite production build, prepares a persistent data directory, exposes port 3000, and starts the Express production server. Dokploy handles the production deployment environment, while the Express health check endpoint supports service monitoring.