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

Live Demo 🔥

GitHub Repository 🐈

🌟 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! 💙

---