Adabra · 2024 – 2026
Stackly
An all-in-one platform for agencies: websites, funnels, CRM and client projects.
- Role
- Senior Frontend Engineer: Pages, AI generation, Funnels, CRM reporting, Clients/Projects
- Timeline
- Jun 2024 – Oct 2026
- Company
Adabra
- AI page modes
- 2AI page modes
- page templates
- 30+page templates
- funnel step types
- 17funnel step types
- CRM report types
- 10CRM report types
Overview
The problem
Agencies juggle separate tools for client websites, landing-page funnels, CRM and project tracking. Stackly puts them in one workspace so an agency can build, publish and report for every client in one place.
My work centres on the builder: making a browser-based editor feel fast and forgiving, letting AI produce a usable first draft, and connecting what gets built to clients, projects and reporting.
What I built
Highlights
Pages: a visual site editor
A GrapesJS editor with drag-and-drop blocks, desktop, tablet and mobile previews, layers, motion, inline rich-text editing (heading levels, sizes, alignment, colours), sub-pages, a code view and publishing to a custom domain.
Magnus Intelligence: AI in the editor
Generate a full landing page in standard or 3D layouts, or a single section, from a prompt. Files and images can be attached as context and are previewed in the editor before generation.
Template gallery
Ready-made landing pages with live desktop, tablet and mobile previews and one-click Use template, from minimal layouts to animated 3D-style heroes.
Funnels
17 ready-made funnel templates and a funnel editor on the same GrapesJS core, with Magnus AI, save-as-my-template, publish status, form responses and per-funnel analytics.
CRM reporting
Configurable dashboards (automation performance, overdue tasks, task status by assignee, ticket backlog aging) and a report builder with filters, metric toggles, five chart types and save-as-new-report.
Clients and projects
A workspace per client with a brief, tasks, boards, notes, media, team members and a built-in chat thread.
Engineering
Decisions that shaped it
- Pages and Funnels share one GrapesJS editor core, so blocks, styling, motion and publishing behave the same in both and fixes land once.
- AI-generated pages open in the same editor as hand-built ones, so users keep full control after generation.
- API shapes are agreed alongside the React components that consume them, which keeps server responses and client state in step; hot MongoDB queries get targeted indexes, and every merge runs through CI/CD and peer review.
Screens
