DEV Community

Cover image for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
Abhi nandan
Abhi nandan

Posted on

Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

#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

I created a comprehensive Office Space Intranet Portal that serves as a complete digital workplace hub for employees. The design focuses on creating an intuitive, modern interface that brings together all essential workplace tools and information in one centralized location.

Key Features Implemented:

  1. Welcome Dashboard with personalized greetings and quick actions
  2. Upcoming Events calendar integration for company activities
  3. Birthday Celebrations with interactive wish functionality
  4. New Team Member onboarding spotlight
  5. Holiday Request System with remaining days tracking
  6. IT Support Portal with ticketing system access
  7. Company News Feed with categorized updates
  8. Social Media Engagement tools for employee advocacy
  9. Team Spotlight for recognizing outstanding contributors
  10. Software Feature Announcements for product updates
  11. Resource Library with quick access to essential documents
  12. Meeting Room Booking with real-time availability
  13. Panel Interview Management for HR workflows
  14. Employee Referral Program with progress tracking and bonuses

The portal emphasizes employee engagement, productivity enhancement, and seamless workplace collaboration through a clean, professional design that works across all devices.

Demo

https://abhinandangithub01.github.io/Office-Space/#dashboard

Journey

Building this intranet portal was an exciting challenge that allowed me to explore modern workplace design principles and user experience patterns.

Design Philosophy
I started with the core principle that an intranet should be the single source of truth for employees. Every widget serves a specific workplace need:

  • Information discovery (news, events, resources)
  • Task completion (holiday requests, IT support, room booking)
  • Social connection (birthdays, team spotlights, referrals)
  • Productivity enhancement (meeting scheduling, interview management)

What I Learned

This project deepened my understanding of:

  • Enterprise UX patterns and how workplace software should prioritize efficiency
  • CSS Grid mastery for complex, responsive layouts
  • Event-driven JavaScript architecture for maintainable interactive applications
  • Performance optimization techniques for smooth user experiences
  • The challenge pushed me to think beyond individual features and consider how different workplace tools interconnect to create a cohesive digital experience.

Technologies Used: Vanilla HTML5, CSS3 (with custom properties and Grid), Vanilla JavaScript (ES6+), Font Awesome icons

Responsive: Fully responsive design for desktop, tablet, and mobile devices

Copyright (c) 2025 Abhinandangithub01

Special thanks to Axero for sponsoring this challenge and inspiring workplace innovation! This project demonstrates how thoughtful design and modern web technologies can transform the employee digital experience.

Top comments (0)