Dagu — A blog website inspired by Afar traditional information system: My Storyblok Headless CMS Challenge Submission

#devchallenge #storyblokchallenge #webdev #api

This is a submission for the Storyblok Challenge

What I Built

Dagu is a modern storytelling and knowledge-sharing web app inspired by the Afar people's traditional communication system, where vital information (called Dagu) is passed from person to person.
I aimed to build a platform that preserves this cultural heritage in a digital form — allowing users to share, create, edit, and read Habbos (messages/posts).
It also explores headless CMS integration using Storyblok and AI features to assist in post creation.

Demo

Storyblok Space:
https://sylfxxcladepgakbnsin.supabase.co

Code Repository:
https://github.com/Abualiy/dagu

Live Demo
https://dagu.vercel.app

Demo Video
https://youtu.be/ZLIZ1rQugyU

Tech Stack

Frontend: Next.js 15 (App Router)
CMS: Storyblok (management + delivery APIs)
Database/Auth: Supabase (auth for users)
Styling: Tailwind CSS
Deployment: Vercel
AI API: OpenRouter (GPT-4o & other free-tier models)

How I Used Storyblok

Defined a custom content type: habbo
Used Storyblok Management API to create, edit, and delete posts
Queried posts via the Delivery API and displayed them in dynamic routes
Used richTextResolver for rendering content
Filtered Habbos by author and connected Storyblok content with Supabase-authenticated users

AI Integration

Submitted for the Awesome AI category!
I integrated OpenRouter to:
🧠 Automatically generate post excerpts using AI from the main content

Learnings and Takeaways

🌍 Proud to blend cultural storytelling with modern tech
🚀 Learned how to combine headless CMS, serverless functions, user auth, and AI
🧩 The challenge helped me structure my CMS thinking clearly — components, schema, and reusability
⚠️ One challenge was dynamic data fetching on Vercel, but I used force-dynamic and adjusted caching headers