V-Office: A Responsive & Accessible Digital Workspace

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge Holistic Webdev Submission

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

What I Built

V‑Office is a fully responsive and accessible intranet-style digital workspace built with React, Tailwind CSS, and React Router. The goal was to create a holistic office dashboard that feels modern, clean, and user-first — whether you're on a desktop, tablet, mobile phone, or even a smart TV.

It includes:

A custom welcome banner with an image background and animation
A notification dropdown
A responsive navbar with dropdown profile menu on mobile and tablet devices.
Sections for Recent message, Recent Task, Announcements, Up coming Events, and Quick Resources.
Full support for light/dark mode, mobile safe areas, and ARIA accessibility
A creative layout that adapts across breakpoints, prioritizing UX and usability

Demo

🔗 Live Demo: https://v-office-seven.vercel.app

💻 GitHub Repo: https://github.com/Katotodan/v-office

You can view the project in different viewports or emulate the screen to experience its responsive behavior.

Journey

This project was a deep dive into what makes internal tools truly usable and enjoyable. I focused on:

✅ Designing for all screen sizes (even smart TVs)
✅ Implementing dark mode and respecting system preferences
✅ Animating content (like the welcome banner) with React state and transitions
✅ Building accessible navigation menus with keyboard and screen reader support
✅ Preventing scroll bugs when toggling menus on mobile
✅ Ensuring notification menus only stay open when intended (and not on random mousedown triggers!)

I also created 4 responsive banner background images for each device resolution, and structured the project in modular, clean components using React best practices.

The biggest challenge was perfecting mobile behavior while keeping desktop animations and transitions fluid. I learned a lot about CSS env() safe areas, dynamic viewport units (dvh), and managing scroll locking in React.