This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
🔥 What I Built
I built a modern, responsive, and interactive intranet dashboard tailored for internal use within a team or organization. This dashboard brings together essential features that empower employees to stay connected, organized, and productive, right from a centralized platform.
✨ Features:
Dashboard Overview, A clean hub to access everything instantly: announcements, events, documents, and more.
User Profile Management, Editable user details with smooth toggle between view/edit modes.
- Announcements & Events Pages: Organized lists for internal updates and team happenings, with call-to-action buttons like “Register” and “Join Meeting”.
- Document & Invoice Sections: A structured layout to manage internal files and billing overviews.
- Integrated Chat Interface: A simple, responsive chat layout to simulate team conversations.
- Settings Page: Customizable interface preferences for a tailored intranet experience.
- Fully Responsive Design: Powered by Bootstrap and custom CSS, optimized for all screen sizes (desktop, tablet, and mobile).
I focused on designing an intranet that feels clean, intuitive, and practical mimicking tools real teams would actually want to use.
📺 Demo
🌟 If you find this project useful or inspiring, don’t forget to give it a star, it really helps and means a lot! 😁
👩🏻💻 Journey
Building this intranet dashboard was a fun deep dive into combining layout precision with practical design thinking.
I started by mapping out the page structure: each section: Dashboard, Announcements, Events, Documents, Invoices, Chat, Profile, Notifications, and Settings, needed to feel cohesive and seamless across the experience.
Some highlights from my process:
- Structure & Layout: I used Bootstrap grid systems to maintain a clean, consistent layout across all pages.
- Mobile Responsiveness: Careful media query tuning and Bootstrap classes ensured smooth transitions between screen sizes.
- Polished UX Touches: Like hover effects, icon placements, button states, and spacing for readability.
💡 Highlights I'm Proud Of:
- Smooth profile editing flow with stateful transitions (Edit > Save).
- Making the chat layout fully responsive with minimal JS.
- Creating a real-feel notifications system.
- Keeping visual hierarchy tight across pages, clean paddings, legible fonts, and intuitive CTAs.
🛠️ Tech Stack
- HTML5: Clean semantic structure for every page.
- CSS3 + Bootstrap 5: Leveraging Bootstrap for grid/flex layout + custom styling for brand consistency.
- JavaScript: Added interactivity without any frameworks.
- Responsive Design: Ensured mobile-first experience using media queries and Bootstrap utilities.
This challenge helped me push my front-end thinking forward. It’s more than just code, it’s about creating meaningful interfaces that improve workflows and communication.
Thanks to Axero and Dev.to for this fun challenge! I'm excited to explore more UI/UX challenges like this and keep building. 🏗
Let me know what you think of my dashboard. I’m open to feedback and improvements! 💙
| Thanks for reading! 🙏🏻 Made with 💙 by Hadil Ben Abdallah |
  
|
|---|
Top comments (26)
Hadil, fantastic work on your intranet dashboard for the Axero Frontend Challenge! From a technical perspective, your choice of a lean tech stack—HTML5, CSS3, Bootstrap 5, and vanilla JavaScript—demonstrates a strong command of front-end fundamentals. The decision to avoid heavy frameworks while still achieving smooth interactivity (like the profile editing flow and responsive chat layout) is particularly impressive. Your focus on semantic HTML and clean CSS with Bootstrap’s grid system ensures maintainability and scalability, which are critical for real-world applications. The GitHub repository is a great touch for transparency—any chance you could share specific code snippets (e.g., for the stateful transitions) to showcase your approach? Amazing job overall, and I’m excited to see more of your work!
It truly means a lot! 🙏
I really wanted to keep the tech stack lean to prove that even with just the core web technologies, HTML5, CSS3, Bootstrap 5, and vanilla JS, we can build something clean, interactive, and maintainable. It was a fun challenge to rely on fundamentals while still delivering smooth flows like the profile editor and chat layout.
I'm really glad you mentioned semantic HTML and maintainability, it was a key focus throughout development. And yes, I’d be happy to share code snippets for those stateful transitions! I’ll either add a short section in the README or publish a follow-up post breaking down some of the logic behind them. Stay tuned!
This is so good 👏👏
Thank you so much 😍🙏🏻
Wow, Hadil, your intranet dashboard is a stellar example of user-centered design! The clean layout, intuitive navigation, and thoughtful UX touches—like hover effects, legible fonts, and clear CTAs—create a seamless and professional experience. I particularly love how you’ve prioritized responsiveness, ensuring the dashboard feels just as polished on mobile as it does on desktop. The notifications system and chat interface add a practical, real-world feel that aligns perfectly with the needs of a team-focused intranet. One suggestion: have you considered adding subtle animations for page transitions to enhance the flow even further? This is such a well-executed project, and it’s clear you’ve poured a lot of thought into making it both functional and visually appealing. Great work!
Thank you so much, Hassan, for this incredibly detailed and encouraging comment! 🌟
It truly means a lot to see that the small UX decisions, like hover effects, clean CTAs, and responsive design, stood out to you. I really wanted to create something that feels intuitive for everyday team use, so your feedback reassures me I’m on the right path.
And yes, I love your idea about adding subtle page transition animations! That would definitely bring a smoother flow and elevate the overall feel, I’ll be exploring that next.
Hadil, your submission for the Axero Frontend Challenge is truly inspiring! The way you’ve conceptualized a modern intranet dashboard as a centralized hub for team productivity is spot-on for addressing real organizational needs. Features like the announcements page, document management, and customizable settings show a deep understanding of what makes an intranet valuable for employees. I also appreciate how you’ve documented your journey, highlighting both the strategic planning (mapping out page structures) and the practical execution (responsive design and UX polish). This project not only showcases your technical skills but also your ability to think holistically about solving workplace challenges. I’d love to hear more about how you prioritized certain features over others—any key insights from user research or feedback? Absolutely brilliant work!
Thank you so much for your kind words! 🙏🏻
I’m really glad you connected with the vision behind the dashboard. When I started designing it, I focused on how a digital workspace can truly serve a team, not just as a tool, but as a cohesive environment where productivity and communication flow naturally.
Prioritizing features was definitely a challenge! I tried to put myself in the shoes of an employee navigating a busy workday: quick access to announcements, organized documents, and personalization options felt like essential pillars to build around. While I didn’t conduct formal user research, I drew inspiration from common frustrations I’ve seen and read about in real-world intranet solutions.
I’d love to dive deeper into this with more feedback and maybe even iterate further. Thanks again for such a motivating message!
Great Work Hadil!
BTW how did you make this section in the blog?
I may be too dumb, but can you please share the markdown snippet?
Thank you so much, I really appreciate it! 😍
And no worries at all, we’re all here to learn and support each other. 🙌🏻
Here's the markdown snippet:
If you ever have any other questions, feel free to ask anytime, I’d be more than happy to help whenever I can!
wow !!!
It's Perfect 👏👏👏👏
Thank you so much Mahdi! 🙏🏻🙏🏻
Interesting. Thanks for sharing!
You're welcome 😍🙏🏻
that was great , keep going strong 👊
Thank you so much Pouyan 🙌🏻
It looks amazing Hadil!🥰👏 Congratulations on your hard work!
Wishing you the best of luck in the competition!🥰
Thank you so much Theodora Cristea 😍😍 Your encouragement means a lot 🙏🏻
Great job Hadil !!
Keep it up !! 👍👍
Thank you so much 😍🙏🏻