This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
My vision for this project was to create a clean, modern, and user-centric intranet homepage. I wanted to build more than just a static page; the goal was a dynamic hub that enhances both productivity and team culture. The layout is a responsive grid that looks great on all screen sizes, starting with a personalized welcome message for the user.
The dashboard is packed with features that make it a true digital workspace:
Dynamic & Interactive Widgets
Team Directory: A searchable list of all team members. The search filters the list in real-time as you type. A "Details" button smoothly reveals more information about each person.
Company Goals (OKRs): To keep everyone aligned, this widget visually tracks the progress of key company goals using clean, easy-to-read progress bars.
Team Poll: An interactive "Poll of the Week" to boost engagement. After voting, the UI instantly updates to show the results, and the poll is locked for the current session to prevent multiple votes.
Quick Links & Calendar: Classic intranet features providing easy access to important resources and a clear view of upcoming events.
Data Visualization & User Experience
Performance Charts: Using Chart.js, the dashboard displays key content metrics. Users can easily toggle between different views (Articles, Views, Engagement).
Dark Mode & Accessibility: A smoothly transitioning dark mode is available and remembers your choice. All icon-based buttons include aria-label attributes for screen reader accessibility, and the entire layout is keyboard-navigable.
Demo
Here are the links to the live project and the source code.
Live Demo: https://noelmarketing.github.io/noel-hq/
Source Code: https://github.com/Noelmarketing/noel-hq
Journey
Building the HQ Dashboard was a fantastic experience. My main goal was to build a rich, interactive experience using only vanilla JavaScript, without relying on any frameworks. This was a great way to focus on the fundamentals of DOM manipulation and state management.
I'm particularly proud of how the interactive poll turned out. Implementing the logic to handle voting, instantly update the UI with percentage-based results, and then lock the poll for the session was a fun little logic puzzle. It really helped bring the dashboard to life. I also enjoyed creating the modular grid layout with Tailwind CSS, which made it easy to keep the design clean and responsive.
What's Next?
The dashboard is built to be easily extendable. A few features I'd love to add in the future are a "Kudos" or "Shout-out" feed and a drag-and-drop interface to allow users to customize their dashboard layout.
About Me & Connect
Thanks for reading my post! I'm a passionate web developer focused on creating clean and user-friendly digital experiences.
If you'd like to see more of my work or get in touch, you can find me here:
- Website: noel.marketing
- GitHub: Github
- Newest Project: Curtify.co
Top comments (0)