Blog CMS for an AI fitness app
A custom publishing panel for an AI fitness app's blog: categories, rich-text sections, key takeaways, cover and thumbnail images, draft and publish states, featured posts.
- Role
- Full-stack engineer
- Status
- Live in production
- Client
- AI calorie-tracking app
- Next.js
- React
- Supabase
- Chakra UI
The problem
- Context
- A custom publishing panel for an AI fitness app's marketing blog. Posts are read by a separate marketing site that renders structured data and answer blocks, so each post is built from many typed fields rather than one body of text.
- Constraints
- An off-the-shelf CMS stores a post as one block of text, but this blog's value is in structured, machine-readable content: search metadata, direct-answer blocks, author and reviewer details, and social cards. Health content needs visible trust signals, and the marketing site's AI-facing index has to refresh whenever published content changes.
- What was at stake
- Missing or wrong structured fields cost visibility in search and in AI answers, and a post published without its search title or description cannot rank. Images orphaned by deleted posts pile up, and a stale AI index feeds assistants old content.
What I built
Search metadata
A full SEO field set, checked as you type
Each post has a search title and description with length targets, a focus keyword and secondary keywords, a canonical URL that is derived automatically but never overwrites a manual edit, and an index or no-index setting.
Social cards with sensible fallbacks
Open Graph and Twitter titles, descriptions and images each fall back to the next available value, so a post always shares with a proper card.
Built for AI answers
Answer boxes and summaries
Posts carry a short quick-answer box, three to five key takeaways and a machine-friendly summary, written to be lifted into featured snippets and AI answers.
Structured data generated, with a live preview
The post's structured data is built from its fields and previewed live as the editor types, computed off the typing path so the editor stays fast.
The AI index refreshed on publish
Publishing, editing a published post, unpublishing or deleting one notifies the marketing site to refresh its AI-facing index, sent after the editor's action completes so it never slows them down.
Trust signals
Author, reviewer and disclaimer
Each post records its author and, where there is one, a medical or nutrition reviewer, plus a disclaimer: the trust block health content needs. The author defaults to the signed-in editor.
Publishing workflow
Drafts free, publishing checked
Posts move between draft, published and archived. Drafts can be saved incomplete, but publishing requires the search title, description and excerpt. One post can be the featured hero, with several featured stories.
Unique slugs and no orphaned images
Slugs are checked before saving and backed by a database constraint. Deleting a post also deletes every image it used, from covers to images inside the content.
A rich content model
Beyond the body, posts store tables of contents, calls to action, related articles, content blocks and FAQs as structured fields, edited in a rich-text editor with tables and links.
Access control
Rules in the database
Row-level security lets the public site read published posts while only admins and editors can write, with matching rules on image storage. Users cannot change their own role; only admins can.
Tell me what you’re building and where it’s stuck.
I’ll tell you the cleanest path forward, including if it’s “don’t build that.”
Or write tocontact@alihassan.dev
