QDG CMS

QDG CMS is the frontend content management application for QDG and affiliated horse-racing sites. It is a React single-page app that lets CMS operators author stories and manage photo/video media, backed by the separate QDG CMS API (.NET 9 Web API, see the qdg-cms-api project).

What it is

• React 19 + TypeScript, built with Vite 7, styled with Tailwind CSS 3.4, linted with ESLint 9 (flat config).
• Deployed as static assets to an on-prem IIS site (C:\inetpub\wwwroot\QdgCms) via a self-hosted GitHub Actions workflow, deploying from the dev branch on manual trigger, with automatic backup/rollback and a health check.
• Repository: D:\Projects\Masterclass Project\QDG-CMS.

Context: migration from Appsmith

This app is an active, in-progress rewrite/port of a legacy Appsmith-based CMS widget set. Many parts of the codebase intentionally replicate legacy widget behavior (e.g. the Image Editor's crop-box behavior, the CustomStoryLink widget, story form field layouts). Understanding this history explains some design choices that otherwise look unusual for a greenfield app.

Core features

• Create/Edit Story — the default landing page. A rich-text (TipTap) story editor with content, classification, attribution, and scheduling sections, plus attaching up to 6 images and 3 videos and linking parent/child stories.
• Story List — paginated, filterable list of stories with status chips, delete, and edit-in-new-tab.
• Image Gallery / Image Editor — browse, search, filter, preview, delete, and download photo media; the editor crops a source photo into 5 size variants (small/medium/hd/hires/large) using Cropper.js and attaches racing metadata.
• Video Gallery / Video Uploader — browse, search, filter, preview, delete, and download video media; the uploader handles a full presigned-upload flow to object storage.
• Create User — admin form to create new CMS accounts.
• Light/dark theme toggle and logout, both in the top nav.

Current focus (as of Sept 2026)

Active development is concentrated on media management (image/video upload via the presigned-URL flow to Wasabi, size-variant handling for photos) and the Create/Edit Story workflow (linking, validation, scheduling). Image and Video Gallery listing plus Video upload are fully wired to the real backend API; the older imageService/videoService/storyFormService mock layers are being phased out in favor of mediaService and storyService.

Related documentation

• User Guide — what a CMS operator can do in the app.
• API Documents — how the frontend talks to the backend.
• Project Architecture — code structure, state, routing, and key design decisions.
• Database — the frontend's (lack of) direct database access, and the inferred backend schema shape.
• Backend: see the qdg-cms-api KB project.