When I first saw the Storyblok Headless CMS Challenge on DEV, I saw it as more than a contest; it was a personal challenge. With a goal of learning headless CMS architecture from scratch, I set out to build a professional portfolio that was not only visually appealing but also packed with modern features that a senior developer would be proud of.
This post documents my week-long journey of intense learning, debugging, building, and ultimately, creating something I'm incredibly proud to share.
The Final Project: A Feature-Rich Portfolio & Blog
My final project is a complete, multi-page portfolio and blog, built with a fully decoupled architecture using Next.js for the frontend and Storyblok for the headless CMS. Every piece of content, from the hero text to the footer, is fully editable through Storyblok's amazing Visual Editor.
Dynamic, Component-Based Homepage: Built with a suite of custom Storyblok components including a Hero, About Me, a grid of my technical Skills, a list of my Projects, and a Footer.
Full-Featured Blog: Includes a main listing page (/blog) and dynamically-routed individual post pages (/blog/[slug]) powered by Next.js's Incremental Static Regeneration (getStaticProps and getStaticPaths).
Professional UX & Polish: Features a clean, responsive design, a sticky navigation bar, and subtle animations on page elements using Framer Motion for a smooth user experience.
The Standout Feature: An "Amazing AI" Assistant: To compete for the AI prize, I built a genuinely useful tool to solve a problem I face myself: writing concise summaries for my articles.
The AI Assistant: How it Works
This was the most challenging and rewarding part of the project. I built a dedicated /assistant page that leverages the OpenAI API to automatically generate summaries for blog posts.
The process involves:
A simple frontend on the /assistant page where I can paste my full blog post text.
A secure backend API route in Next.js (/api/generate-summary) that receives the text.
This API route calls the OpenAI GPT-3.5 Turbo model with a specific prompt instructing it to act as an expert content editor.
The generated summary is sent back to the frontend, ready to be copied and pasted directly into the summary field in Storyblok, dramatically speeding up my content creation workflow.
My Tech Stack
Frontend: Next.js / React
Headless CMS: Storyblok
Deployment: Vercel
Styling: Global CSS
Animation: Framer Motion
Syntax Highlighting: PrismJS
AI: OpenAI API
My Biggest Challenges & "Aha!" Moments
This journey was filled with real-world development challenges.
The HTTPS Proxy: The biggest initial hurdle was connecting my local http server to the secure https Storyblok editor. Solving this required setting up a local SSL proxy, which was a fantastic lesson in web security and networking.
The Stubborn CSS Bug: I spent hours debugging a styling issue where my CSS file was loaded, but the styles weren't applying. After methodically testing every part of the chain—from the file structure, to the import path, to the browser cache, to finally inspecting the browser's loaded sources—we found the culprit: a single, invisible typo in an import path. This taught me the immense value of being systematic in debugging.
Why I Enjoyed Using Storyblok
The Visual Editor is a game-changer. Being able to build reusable components in my code and then use them like Lego bricks to visually construct pages is incredibly powerful. Seeing content changes reflect instantly on my local development server without a page refresh made the entire development process faster and more intuitive.
Conclusion
This week has been an incredible learning experience. I went from having a concept to a fully deployed, feature-rich, AI-powered web application. This project is now the centerpiece of my own portfolio, and the skills I learned are invaluable. Thank you to DEV and Storyblok for this amazing opportunity!
Cool! great progress