I Built an Office Intranet with 100+ Features

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

What I Built

Remember those clunky office intranets from the early 2000s? The ones that looked like they were designed by someone who thought "user experience" was a type of office furniture? Well, I decided to build the complete opposite.

Meet Lumino - an office intranet that actually makes you want to check your company dashboard. I'm talking about a fully customizable workspace with drag-and-drop widgets, real-time search across everything, and enough features to make your head spin (in a good way).

Here's the kicker: I built this entire thing with just React, Tailwind CSS, and shadcn/ui. No complex backend, no enterprise frameworks, no selling your soul to corporate software vendors. Just modern web tech doing what it does best.

The goal was simple: create an intranet that doesn't suck. Turns out, that's harder than it sounds when you end up building 100+ features along the way.

Demo

🚀 Live Demo

📁 Source Code

Journey

How I Accidentally Built a Mini-Enterprise Platform

This started innocently enough. "I'll just make a nice dashboard with a few widgets," I thought. "How hard could it be?"

Famous last words.

What began as a weekend project spiraled into something that would make enterprise software developers weep with joy (or envy). Here's what happened when I couldn't stop adding "just one more feature":

The Widget Wonderland (8 Interactive Dashboards)

Each widget became its own mini-application:

• Welcome Widget: Because saying "Good morning, Sarah" hits different when it knows the weather and your schedule
• Quick Actions: 9 color-coded buttons that actually do things (not just look pretty)
• Company News: A social feed where Karen from HR can finally get the engagement her cat photos deserve
• Task Board: Started as a simple list, ended up as a full Kanban system because... why not?
• Team Widget: Live status indicators so you know if Dave is actually "in a meeting" or just avoiding emails
• Calendar: Events that you can actually interact with (revolutionary, I know)
• Analytics: Charts that respond when you click them (take that, static dashboards!)
• Recognition Feed: Because everyone needs more workplace validation

The Dialog Dimension (22 Modal Universes)

This is where things got... ambitious. Each dialog is basically a separate app:

The Employee Directory isn't just a list - it's a full contact management system with search, filters, and organizational charts. The HR Portal has everything from payroll to performance reviews. The Task Modal transforms into a complete project management suite.

I may have gotten carried away when I realized I could build an entire Time Tracking System inside a modal. And don't get me started on the Knowledge Base dialog that became its own mini-Wikipedia.

The Search System That Actually Works

You know what's broken about most enterprise software? Search. You type "John" and get results about printer toner from 2019.

So I built a search system that doesn't hate its users:

• Hit ⌘K (or Ctrl+K for the Windows folks) and search everything
• Fuzzy matching powered by Fuse.js because typos are human
• Real-time indexing that updates as you work
• Results grouped by type with actual helpful previews
• Works on mobile without making you want to throw your phone

The Drag-and-Drop That Doesn't Drop the Ball

Building a customizable dashboard sounds simple until you realize users will try to break everything. My drag-and-drop system:

• Prevents widgets from overlapping (because chaos isn't productive)
• Provides visual feedback that actually makes sense
• Remembers your layout so you don't have to rebuild it every day
• Works on touch devices without fighting you
• Includes satisfying animations because life's too short for boring interfaces

Technical Stuff (For the Code Nerds)

State Management Without the Headache: Three Zustand stores handle everything. No Redux boilerplate, no context hell, just clean state that makes sense.

Performance That Doesn't Tank: Debounced search, memoized components, and smart re-renders keep everything smooth even with 100+ features running.

Accessibility That Actually Exists: Full keyboard navigation, proper ARIA labels, and color contrast that won't strain your eyes during late-night deadline crunches.

Responsive Design That Responds: The same interface works on your 4K monitor and your phone. The drag-and-drop becomes touch-friendly, dialogs stack properly, and nothing breaks when you resize your browser window like a maniac.

The Moment I Realized I'd Gone Too Far

It was 2 AM, and I was implementing emoji reactions for the recognition feed. That's when it hit me: I'd built an enterprise platform that people might actually enjoy using.

The search system alone indexes content from 8 different widgets. The task management system rivals tools that charge $50/month per user. The employee directory has features that HR departments dream about.

And it all started with "let me just add a weather widget."

What I Actually Learned

Building 100+ features taught me that good software isn't about feature count - it's about how features work together. The search system becomes powerful when every widget feeds into it. Task management becomes useful when it integrates with team status. Recognition feeds become engaging when they connect to real profiles.

Also, modern web development is genuinely amazing. React hooks, Tailwind utilities, and shadcn components let you build enterprise-grade UIs faster than ever. No jQuery spaghetti, no CSS nightmares, just clean code that does cool things.

The Stack That Saved My Sanity

• React 18: Because hooks make everything better
• Tailwind CSS: Utility classes that don't make you cry
• shadcn/ui: Components that look professional out of the box
• Framer Motion: Animations that don't suck
• Zustand: State management for humans
• Fuse.js: Search that finds what you actually want
• React Beautiful DnD: Drag-and-drop that feels magical

The Verdict

I set out to build a simple intranet and accidentally created a digital workspace that makes office software fun. Yes, fun. I know that sounds impossible, but here we are.

The best part? It's all built with standard web technologies. No proprietary platforms, no vendor lock-in, no sacrificing your firstborn to enterprise licensing agreements.

Sometimes the best way to solve a problem is to completely ignore how it's "supposed" to be done and just build something that works.

Want to see what happens when you give a developer too much creative freedom? Check out the demo. Your productivity (and your sanity) will thank you.

---

P.S. - Yes, I know I got carried away. No, I'm not sorry. Yes, the source code is available. No, I don't know why I thought adding a wellness tracker was necessary. Yes, it works anyway.