This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
Axero Workspace is a modern, accessible, and highly interactive intranet dashboard built with React, TypeScript, and Tailwind CSS. My goal was to reimagine the digital office experience—making it beautiful, customizable, and inclusive for everyone.
Key Features:
- Drag-and-Drop Widgets: Rearrange your dashboard with persistent order (localStorage).
- 3D OfficePulse Visualization: See your team’s activity in real time.
- AI Assistant: Get instant help and productivity tips.
- Accessibility Controls: Toggle high-contrast mode, adjust font size, and more.
- Theme & Font Persistence: Preferences are saved across sessions.
- Responsive Design: Works beautifully on desktop, tablet, and mobile.
Demo
Live Demo: https://axero-workspace.vercel.app/
Source Code:https://github.com/Boweii22/Axero
Screenshots:
Journey
Building Axero Workspace was a deep dive into modern frontend best practices and UI/UX design. Here’s what stood out in my process:
- Accessibility & Theming: Making the dashboard accessible was a top priority. I implemented theme-aware components and font scaling and ensured all text and controls have proper contrast in both light and dark modes. Preferences are saved in localStorage for a seamless experience.
- Responsiveness: I spent extra time refining the layout for all screen sizes, ensuring widgets never overlap or get cramped, and that the settings panel and modals are always usable.
- Persistence: Theme, font, and widget order all persist thanks to localStorage, making the dashboard feel truly personal. What I’m proud of:
- The polished, theme-aware UI.
- The accessibility features.
- The overall user experience and attention to detail.
Team Submission:
Solo project
Thank you to Axero and DEV for this awesome challenge! 🚀
Top comments (0)