██FR█████ █INTELL███████████

Axero Frontend Challenge: Smart Day‑Starter – The Ultimate Office Dashboard


This content originally appeared on DEV Community and was authored by Nikoloz Turazashvili (@axrisi)

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

What I Built

I created Smart Day‑Starter Dashboard, a professional, feature‑rich intranet homepage designed to streamline daily workflows by surfacing critical information and tools in one cohesive view. Key highlights include:

  • 📢 Announcements & Alerts Company‑wide notifications delivered via dismissible banners at the top of the page.
  • 🚀 Quick Launch Drag‑and‑drop shortcuts to internal apps and resources, with customizable icons and labels.
  • 📋 Tasks & Approvals An at‑a‑glance list of your pending tasks and approval requests.
  • 📅 Team Calendar Mini‑calendar showing today’s events, upcoming meetings, and team birthdays.
  • 🎫 Support Tickets Real‑time ticket dashboard with status indicators and quick “assign to me” actions.
  • 🎨 Full Customization Theme switching (light/dark), layout presets, and widget visibility toggles.
  • ♿ Accessibility‑First WCAG 2.1 AA compliant, including keyboard navigation and ARIA labels.
  • 📱 Responsive Design Optimized for desktop, tablet, and mobile breakpoints.
  • 🔄 Real‑time Updates Auto‑refresh with offline/online detection to keep data current.
  • 💾 Data Persistence LocalStorage‑backed settings with fallback for anonymous users.
  • ⚡ Performance‑Optimized Lighthouse scores ≥ 90 Performance, ≥ 95 Accessibility.

Demo

  • Live Preview:
    smart-day-starter-dashboard.vercel.app
  • Source Code:

    GitHub logo turazashvili / Holistic-Webdev-Office-Space

    Smart Day-Starter Dashboard

    A professional, feature-rich intranet homepage that streamlines daily workflows for employees by surfacing critical information and tools in one cohesive dashboard.

    Deploy with Vercel

    🌟 Features

    Core Widgets

    • 📢 Announcements & Alerts – Company-wide notifications with dismissible banners
    • 🚀 Quick Launch – Customizable shortcuts to internal tools with drag-and-drop reordering
    • 📋 Tasks & Approvals – Pending tasks, approvals, and workflow items
    • 📅 Team Calendar – Mini calendar with today’s events and upcoming meetings
    • 🎫 Support Tickets – Real-time ticket dashboard with status tracking

    Advanced Features

    • 🎨 Full Customization – Theme switching, layout preferences, widget visibility
    • ♿ Accessibility First – WCAG 2.1 AA compliant with full keyboard and screen reader support
    • 📱 Responsive Design – Works seamlessly across desktop, tablet, and mobile devices
    • 🔄 Real-time Updates – Auto-refresh with offline/online detection
    • 💾 Data Persistence – LocalStorage with fallback for user preferences and custom data
    • 🌙 Dark Mode – System-aware theme switching…
    View on GitHub

Journey

  1. Planning & Wireframes I sketched the overall layout and identified core user personas (Managers, Staff, IT) to guide widget selection.
  2. Architecture & Tech Stack
    • HTML5 for semantic markup
    • CSS3 (Grid, Flexbox, Custom Properties) using a BEM convention
    • Vanilla JavaScript with ES6 modules and the Observer pattern for widget communication
  3. Building Key Features
    • Implemented drag‑and‑drop for Quick Launch using the native Drag API.
    • Created a modular widget system with a base class to streamline adding new widgets.
    • Ensured accessibility via ARIA roles and keyboard focus management.
  4. Performance & Accessibility
    • Optimized initial load by deferring non‑critical JS.
    • Achieved Lighthouse scores above 90 by lazy‑loading images and minimizing reflows.
    • Passed automated a11y tests and conducted manual screen‑reader walkthroughs.
  5. Challenges & Learnings
    • State persistence: Designing a robust LocalStorage fallback for user preferences.
    • Real‑time updates: Debouncing network requests to avoid API flooding.
    • Responsive breakpoints: Ensuring usability on narrow mobile screens without sacrificing desktop polish.

I’m proud of how this dashboard balances rich functionality with fast load times and accessibility. I’d love your feedback on other widgets or integrations you’d add to make your workday smoother!

By entering this challenge, I grant Axero a worldwide, royalty-free license to use this submission in their marketing materials.


This content originally appeared on DEV Community and was authored by Nikoloz Turazashvili (@axrisi)