🌿 Frontend Challenge Submission: The Hub – A Modern Intranet Portal

#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
"The Hub" is a sleek, eco-inspired intranet portal tailored to improve employee experience and simplify access to internal tools and information. Key features include:

Personalized Dashboard with user-specific greetings

Quick Access Toolbar for common tasks like timesheets, time off, and expenses

Document Management System with color-coded categories for easy navigation

Company News Feed showcasing featured announcements

Interactive Calendar with event management via FullCalendar.js

Fully Responsive Layout optimized for mobile, tablet, and desktop screens

🔗 Live Demo
👉 View Demo on CodePen - https://codepen.io/creative-coder/pen/EaVVqZZ

🛠️ Development Journey
Design & Planning

Created a nature-themed UI using calming greens and soft shadows
Focused on accessibility and readability throughout the design

Component Architecture

Built modular and reusable card components
Implemented hover animations and click effects for better interactivity

Feature Implementation

Integrated FullCalendar.js with mock event data
Used a card-based layout to organize multiple features cleanly
Performed responsive testing to ensure cross-device compatibility

Sample Code Snippet

<div class="icon-box">
  <i class="fas fa-clock"></i>
  <div>Time Sheets</div>
</div>

// FullCalendar initialization
document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      {
        title: 'Team Standup',
        start: new Date()
      }
    ]
  });
  calendar.render();
});

🧠 Key Challenges & Solutions
Challenge: Differentiating document categories visually
Solution: Created a harmonious yet high-contrast color palette

Challenge: Calendar integration without backend support
Solution: Used client-side event management via FullCalendar.js

Challenge: Balancing feature richness with visual simplicity
Solution: Adopted a consistent card-based layout and spacing system

Thank you for checking out my project! Feedback is always welcome. 😊