This content originally appeared on DEV Community and was authored by Akrem Muktar
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/
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.
Copyright (c) 2025 Akrem M.
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.
This content originally appeared on DEV Community and was authored by Akrem Muktar