Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

Akrem Muktar — Fri, 25 Jul 2025 14:57:18 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I developed a comprehensive intranet portal for the office space of a fictional company called Alfeyn Tech. This digital workplace hub serves as a central location for developers, featuring a modern and intuitive interface. The design integrates all essential workplace tools and information, providing easy navigation to each section for a user-friendly experience.

Overview of Each Section:

Overview Section

This section features a list of upcoming events, today's agenda, and a chart displaying this week's achievements.
Tasks Section

This section includes a Today's Task List with checkboxes for tracking progress, a Task Progress Chart that updates in real time based on completed tasks, and a To-Do List that allows users to add or delete tasks. The list is saved locally for persistent tracking.
Communication Section

This section highlights developers who have done outstanding work during the week, complete with their photos and a brief note on their contributions. Additionally, it includes a list of today’s birthdays and a daily vibe rating poll.
Wellness Section

This section offers a motivational quote for developers, tips for improving productivity, a Pomodoro timer to assist with focus, and an office radio feature to play music from local sources.
Sidebar

This section contains announcements and links related to the office.

Demo

https://frontend-challenge-office-edition.netlify.app/

Video Demo

Journey

I decided to participate as soon as I came across this challenge. When I learned that it required the use of only HTML, CSS, and JavaScript, I committed to working solely with these technologies. I had always wanted to create my own code without relying on any frameworks, so I saw this as the perfect opportunity.

I encountered quite a bit of difficulty while designing the website, especially figuring out how to organize the content I envisioned. After some consideration, I decided to categorize the content. I opened VS Code and began translating the design I had sketched on paper into code.

Since I wanted the site to be a single page, I created everything within one HTML file. To improve the modularity of the code, I divided the CSS and JavaScript into separate modules. This project was a blend of coding artistry and my own ideas. It features a variety of elements, including events, a daily agenda, achievements, daily tasks, to-do lists, a Pomodoro timer, a list of the best developers of the week, birthday lists, an office radio, announcements, the current time and date, and links to key resources from the organization.

We extend our sincere gratitude to Axero for their sponsorship of this challenge, which serves to inspire innovation within the workplace. This project exemplifies how meticulous design and contemporary web technologies can enhance the digital experience for employees.

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

Akrem Muktar — Sat, 28 Jun 2025 20:29:50 +0000

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

Team Submission:

Built by Akrem Muktar

Thanks to Storyblok & DEV for inspiring this project! 🙌
Let’s keep building!

DEV Community: Akrem Muktar

Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

Overview of Each Section:

Demo

Journey

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

What I Built

Demo

Tech Stack

How I Used Storyblok

AI Integration

Learnings and Takeaways

Team Submission: