Canvas Design Editor + Headless CMS Media Platform
Overview
A media-creation platform pairing a browser-based visual design editor with a headless CMS backend, enabling users to compose graphics, charts and rich media and manage them through a structured content API.
The Challenge
Building marketing/media assets visually requires a flexible canvas editor (shapes, images, animation, charts) plus a content backend to store, model and serve those assets, with notifications and scheduling for delivery workflows.
What We Built
The front end is a Fabric.js-powered React design editor (based on the react-design-editor foundation) with Ant Design UI, ECharts charting, color/animation tooling (animejs), media playback (mediaelement, gifler), i18n and a JSON inspector. The backend is a Strapi headless CMS exposing content-type, content-manager, upload, email and users-permissions plugins, with a Bookshelf/SQLite connector, Knex queries, JWT auth, scheduled jobs (node-schedule), Mailgun email and Nexmo SMS. A separate charts and fabric-test workspace supports iterative development, and the stack ships with Docker and GitLab CI.
Technologies & Approach
React + Fabric.js for the editing canvas, Ant Design for UI, ECharts for data visualization; Strapi as the content/API backend with messaging integrations (Mailgun, Nexmo) and scheduling. Containerized with Docker and CI via GitLab.
Outcome / Impact
Demonstrates combining a sophisticated interactive editor with a headless-CMS backend and messaging, a foundation for visual content/marketing tooling.
Capabilities Demonstrated
- Fabric.js interactive canvas / design editor
- Headless CMS modeling and APIs with Strapi
- Data visualization (ECharts) and rich media composition
- Email/SMS integrations and scheduled jobs