This content originally appeared on DEV Community and was authored by Veldrine Evelia Kaharwa
This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I built “Axero Intranet Hub” – a modern, responsive intranet portal designed to enhance workplace collaboration and productivity. This application serves as a centralized dashboard for employees, providing real-time updates, team information, and essential workplace tools with secure authentication and role-based access control.
The intranet hub features:
- User Authentication System with role-based access control and admin capabilities
- Interactive Dashboard with real-time metrics and announcements
- Team Spotlights to recognize employee achievements with detailed profiles
- Calendar System with event management capabilities
- Employee Directory with detailed contact information and interactive profiles
- Device Management System for tracking company equipment
- Communication Hub with real-time chat functionality
- Weather Widget using OpenWeatherMap API and geolocation for real-time local conditions
- Activity Feed showing recent company activities
- Enhanced Search with clickable results across all content types
- Resource Portal with HR, IT, Knowledge Base, and Cafeteria sections
- Dark/Light Mode Toggle for user preference
- Keyboard Shortcuts for improved productivity
- Admin Panel for system management and user administration
The application uses IndexedDB for client-side data persistence, allowing users to add events, manage devices, and send messages that persist between sessions. Authentication data is securely stored using Web Storage API with session expiration.
Demo
Journey
Developing the Axero Intranet Hub was both challenging and rewarding. Here’s a glimpse into my process:
Design Philosophy
I wanted to create an intranet that feels modern and intuitive while providing genuine utility. I focused on:
- User Experience: Clean layout with intuitive navigation and smooth animations
- Functionality: Real working features rather than just visual mockups
- Responsiveness: Adapts seamlessly to different screen sizes
- Accessibility: Keyboard navigation, proper contrast, and semantic HTML
Technical Implementation
The application is built using vanilla JavaScript, HTML, and CSS without external frameworks or libraries. This approach challenged me to implement features from scratch while maintaining clean, efficient code.
Key technical achievements include:
- Authentication System: Implemented secure login with role-based access control
- Client-side Database: Utilized IndexedDB for persistent data storage
- Component Architecture: Created modular, reusable UI components
- Real-time Updates: Simulated real-time data changes with timed intervals
- Theme System: Built a comprehensive dark/light mode with smooth transitions
- External API Integration: Connected to OpenWeatherMap API for real-time weather data
- Geolocation Services: Used browser’s Geolocation API for location-aware features
- Interactive Search: Implemented cross-application search with clickable results
Challenges Overcome
The project presented several challenges that I successfully addressed:
- Authentication Without Backend: Implemented secure client-side authentication with token expiration and role-based permissions
- Data Management: Created a structured IndexedDB schema with multiple object stores and CRUD operations
- API Integration: Handled API requests with proper error handling and fallbacks for offline operation
- User Experience: Designed intuitive interfaces for complex features like device management and calendar systems
- Performance Optimization: Ensured smooth animations and transitions even with real-time data updates
What I Learned
This project deepened my understanding of:
- Modern CSS techniques (CSS variables, grid layouts, animations)
- Client-side database management with IndexedDB
- JavaScript promises and async/await patterns
- Authentication and authorization principles
- External API integration and error handling
- Geolocation and browser APIs
- Accessibility considerations for enterprise applications
I’m particularly proud of the comprehensive authentication system with role-based access control, the interactive search functionality, and the real-time weather widget with geolocation support.
License
This project is licensed under the MIT License – see the LICENSE file for details.
This content originally appeared on DEV Community and was authored by Veldrine Evelia Kaharwa