Building a Vanilla JS Intranet Dashboard: A Developer-Centric Approach

Modern Intranet Dashboard: A Developer-Centric Digital Workspace

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

What I Built

I designed a responsive intranet dashboard for Nexus Innovations, a fictional tech company, focusing on developer productivity and team collaboration. The single-page application features:

  • Personalized welcome area with quick actions
  • Interactive calendar with event management
  • Team spotlight section with status indicators
  • Resource hub with categorized documents
  • Company news feed and quick-access tools
  • Accessibility features including dark mode and text scaling

Built exclusively with vanilla HTML, CSS, and JavaScript, the dashboard demonstrates how clean design and thoughtful UX can enhance digital workplace experiences without requiring complex frameworks.

Demo:

View Live Demo on W3Schools

GitHub Repository

Journey

This project challenged me to balance aesthetic appeal with practical functionality. Key decisions I’m proud of:

  1. Performance-First Approach: Used CSS Grid and Flexbox for layout instead of heavier frameworks, achieving 95+ Lighthouse scores.

  2. Progressive Enhancement: Implemented all interactive features (calendar navigation, theme toggles) with vanilla JavaScript that degrades gracefully.

  3. Accessible Design: Followed WCAG guidelines for color contrast and keyboard navigation, going beyond the challenge requirements.

  4. Custom UI Patterns: Created reusable card components with consistent hover states and focus indicators.

The most valuable lesson was optimizing the developer experience while maintaining visual polish. I experimented with several calendar implementations before settling on the current balance between functionality and simplicity.

By submitting, I affirm that I hold all necessary rights or licenses for this submission.

Leave a Reply