DEV Community: Prateek Kalra

I Built an Office Intranet with 100+ Features

Prateek Kalra — Sun, 27 Jul 2025 21:22:37 +0000

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.

From Lecture Videos to Research PDFs: How I Built My Personal Knowledge Companion

Prateek Kalra — Sun, 27 Jul 2025 08:25:22 +0000

This is a submission for the Algolia MCP Server Challenge

What I Built

Ever felt like you're drowning in digital content? Between lecture recordings, research papers, meeting notes, and that random screenshot you took six months ago with "important info" - finding what you need when you need it feels impossible. That's why I built Prism: an AI-powered personal knowledge companion that transforms your scattered files into a searchable, conversational knowledge base.

Prism isn't just another document manager. It's like having a personal research assistant who's read every file you've ever saved and can instantly recall any detail. Upload any file - PDFs, videos, images, audio recordings - and Prism analyzes it with Google's Gemini 2.5 Pro, indexes it with Algolia's blazing-fast search, and lets you chat with your content using natural language.

The magic happens when you start asking questions. Instead of digging through folders or trying to remember which document contained that brilliant insight, you just ask: "What did my professor say about quantum entanglement in last week's lecture?" or "Compare the marketing strategies across all my competitor research files." Prism searches your entire knowledge base and provides contextual answers, complete with source references.

Demo

Github repository

The Problem That Sparked Prism

The idea for Prism came from a personal pain point. As someone juggling multiple projects, research papers, and learning materials, I found myself constantly frustrated by:

The 3am Panic: Knowing I read something important but having no idea which of the 200 PDFs it was in.
Video Paralysis: Hour-long lecture recordings that I knew contained gold but didn't have time to rewatch.
Context Amnesia: Great insights scattered across documents with no way to connect the dots.
Search Futility: File search that only matches filenames, not the actual content I'm looking for.

Traditional solutions weren't cutting it. Cloud storage gives you a digital filing cabinet, but you still need to remember where you filed things. Note-taking apps require manual effort to organize. What I needed was something that could understand my content as deeply as I do - or better.

How I Utilized the Algolia MCP Server

Here's where Algolia's Model Context Protocol (MCP) server became the hero of this story. MCP is a game-changer for AI applications because it provides a standardized way for AI models to interact with external tools and data sources. The Algolia MCP server specifically gives AI models the superpower of enterprise-grade search.

The Technical Magic

The integration works through two critical MCP tools:

1. saveObject: Every time you upload a file, Prism:

Analyzes it with Gemini 2.5 Pro (extracting themes, summaries, key points).
Structures the analysis with metadata (file type, size, upload date).
Saves it to your Algolia index via MCP.

// Simplified flow
const analysis = await analyzeFileWithGemini(file);
await mcpClient.callTool('saveObject', {
  applicationId: ALGOLIA_APP_ID,
  indexName: 'prism-data',
  requestBody: {
    resourceDetails: analysis.content,
    resourceType: file.type,
    fileName: file.name,
    uploadDate: new Date().toISOString()
  }
});

2. searchSingleIndex: When you ask a question, the magic unfolds:

Extract key terms from your natural language query.
Search your entire knowledge base in milliseconds.
Retrieve the most relevant content.
Provide this context to the AI for a comprehensive answer.

// Every chat query triggers this flow
const searchTerms = extractKeyTerms(userMessage);
const searchResults = await mcpClient.callTool('searchSingleIndex', {
  applicationId: ALGOLIA_APP_ID,
  indexName: 'prism-data',
  requestBody: {
    params: `query=${searchTerms}&hitsPerPage=3`
  }
});

Why Algolia MCP Changes Everything

What makes this integration special isn't just the search speed (though sub-50ms response times are chef's kiss). It's how MCP enables a new paradigm:

Semantic Bridge: Your files aren't just stored; they're understood. The AI analysis creates a semantic layer that Algolia can search.
Context Injection: Every query automatically retrieves relevant context from your knowledge base. The AI doesn't just answer questions - it answers them using YOUR specific content.
Real-time Knowledge Building: As soon as you upload a file, it's instantly searchable and part of your AI's knowledge.
Tool Transparency: You can see exactly when and how Algolia is being used, building trust in the AI's responses.

The Architecture That Makes It Tick

Building Prism required careful orchestration of multiple technologies:

User Interface (React + TypeScript)
     ↓
Backend Orchestrator (Express + MCP Client)
     ↓
   ┌─────────────┬──────────────┐
   │             │              │
Gemini 2.5    Moonshot v1    Algolia MCP
(Analysis)    (Chat AI)      (Search/Storage)

Key Technical Decisions

Multi-Modal AI Strategy: Gemini 2.5 Pro for file analysis (it handles images, videos, audio brilliantly) and Moonshot v1 for conversational AI (great at tool calling and streaming).
Streaming Everything: Real-time responses make the difference between a tool that feels alive vs one that feels like waiting for dial-up internet.
MCP as the Backbone: Instead of building custom integrations, MCP provides a standardized, extensible way to connect AI with tools.
Client-Side Analysis: Files are analyzed directly in the browser before saving results, keeping your data private while leveraging cloud search.

Key Takeaways

The Development Journey
Building Prism was a masterclass in modern AI application development. Here are the big lessons:

1. MCP is the Future of AI Integration
The Model Context Protocol isn't just another API - it's a paradigm shift. Instead of hardcoding integrations, MCP lets you:

Connect AI to any tool through a standard protocol.
See exactly what tools are doing (no black box).
Extend functionality without touching core code.

The Algolia MCP server specifically showed me how powerful specialized tools become when AI can use them natively.

2. Streaming Changes User Perception
Early versions waited for complete responses. Users thought it was broken. Adding streaming responses transformed the experience - suddenly the AI felt responsive and alive. The technical complexity was worth every millisecond of perceived performance gain.

3. Context is King, but Retrieval is Emperor
Having a knowledge base is useless if you can't retrieve the right information at the right time. Algolia's search capabilities, exposed through MCP, made the difference between "neat demo" and "tool I use every day."

Technical Challenges Conquered

Challenge 1: Multi-Modal File Handling

Problem: Supporting everything from PDFs to videos to audio files.
Solution: Gemini 2.5 Pro's multi-modal capabilities + type-specific processing pipelines.
Learning: One AI model that handles multiple formats beats multiple specialized models.

Challenge 2: Real-Time Search Integration

Problem: Making search feel instant and natural within chat.
Solution: Automatic query extraction + Algolia MCP's sub-50ms search.
Learning: Users don't want to write search queries - extract intent from natural language.

Challenge 3: MCP Server Management

Problem: Keeping MCP connections stable and monitoring tool usage.
Solution: Built comprehensive status monitoring and automatic reconnection.
Learning: Transparency builds trust - show users when tools are working.

What Surprised Me

File Analysis Quality: Gemini's ability to extract meaningful insights from a blurry photo of whiteboard notes blew my mind.
Search Context Magic: Often, Algolia found connections I'd forgotten about. Asking about a concept brought up notes from months ago that I'd never have found manually.
Tool Calling Patterns: Moonshot AI's ability to decide when to search vs when to answer directly created surprisingly natural conversations.

Beyond Personal Use: The Bigger Picture

While I built Prism for personal knowledge management, the architecture scales beautifully:

Small Teams: Shared knowledge bases with role-based access.
Researchers: Citation tracking and cross-paper analysis.
Students: Lecture transcription and study material organization.
Content Creators: Asset management and idea connection.

The Algolia MCP integration means search performance doesn't degrade as your knowledge base grows from hundreds to millions of documents.

What's Next?

Prism is just the beginning. The roadmap includes:

Collaborative Knowledge: Share specific collections with teammates.
Smart Notifications: "Hey, this new paper relates to your research from last month".
Knowledge Graphs: Visualize connections between your content.
More MCP Tools: Integration with other MCP servers for expanded capabilities.

Try It Yourself

The beauty of open source is that you can take Prism and make it your own. Maybe you want to:

Add support for specific file formats.
Integrate with your favorite note-taking app.
Build team collaboration features.
Create specialized analysis for your field.

The MCP architecture makes it surprisingly easy to extend.

Special thanks to the Algolia team for making search accessible through MCP, and to the broader MCP community for showing us what's possible when we give AI the right tools.

Tech Stack: React, TypeScript, Express.js, Google Gemini 2.5 Pro, Moonshot v1, Algolia MCP, Tailwind CSS
License: MIT
Status: Actively maintained and accepting contributions!

Office Culture Through the Decades: A Pure CSS Time Machine 🕰️

Prateek Kalra — Sun, 20 Jul 2025 20:13:10 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

🎯 Inspiration

Eight decades of office evolution compressed into a single, interactive experience. From the cigarette smoke of Mad Men boardrooms to the Zoom fatigue of our hybrid era, office culture has transformed dramatically. I wanted to capture not just the visual changes - the shift from typewriters to laptops, rotary phones to video calls - but the cultural heartbeat of each decade.

The inspiration struck me: what if you could literally travel through time and witness how our relationship with work, technology, and each other has evolved? Every coffee machine tells a story. Every communication device reflects a revolution. Every desk setup reveals the values of its era.

This isn't just CSS art - it's digital archaeology.

🚀 Demo

🎯 Live Demo - Experience all 8 decades
📂 View the code

🛠️ Journey

🎨 The Creative Challenge

Building this project meant becoming a historian, designer, and engineer all at once. I spent weeks researching authentic office elements from each decade - from the exact shade of IBM amber monitors to the precise button layout of 1960s touch-tone phones.

The biggest challenge? Making it all work with zero JavaScript. This is pure HTML and CSS proving that modern CSS can create complex, interactive experiences without a single line of JS.

🏗️ Technical Architecture

The Layout System

I designed a "bento-style" grid layout with 6 distinct office zones surrounding a central timeline:

Office wall: Clocks and motivational posters that reflect each era's values
Workstation: The evolution from manual typewriters to MacBooks
Communication: From rotary phones to Zoom calls
Storage: Filing cabinets morphing into smart lockers
Coffee Break: Percolators evolving into artisanal espresso machines
Desk Decor: Personal touches that tell the story of changing work culture

📅 The Decades

🕴️ 1950s – Mad Men Era

"TEAMWORK BUILDS TOMORROW"

Traditional office clock
Manual typewriter
Rotary phone

🚀 1960s – Space Age

"THINK DIFFERENT"

Atomic clock
Electric typewriter
Touch-tone phone

🌼 1970s – Groovy Office

"POWER COMES FROM WITHIN"

Harvest gold clock
Computer terminal
Earth tones

📈 1980s – Power Decade

"SUCCESS NEVER SLEEPS"

Digital LED clock
IBM PC
The rise of personal computing

🌐 1990s – Dot-Com Boom

"THINK GLOBAL. WORK LOCAL."

Windows interface
Email
The internet arrives

📱 2000s – Millennium Office

"KEEP CALM AND LOG ON"

LCD monitors
BlackBerry
Wireless everything

🚧 2010s – Startup Era

"HUSTLE. ITERATE. REPEAT."

MacBooks
Slack chats
Startup culture

🏠 2020s – Hybrid Era

"WORK FROM ANYWHERE. SUCCEED EVERYWHERE."

Remote work
Zoom meetings
Smart devices

🏆 What I'm Most Proud Of

Historical Accuracy: Every element is period-authentic, from color palettes to typography to technology progression.
Pure CSS Complexity: 8 decades × 6 zones × multiple elements = hundreds of carefully orchestrated transitions, all without JavaScript.
Smooth Animations: 3-5 second morphing transitions that feel cinematic, not jarring.
Cultural Storytelling: It's not just about technology—it's about how we've changed as humans in our relationship with work.
Performance: Under 100KB total file size while delivering a premium, interactive experience.

🧪 Technical Innovations

CSS-Only Timeline Navigation: Used radio buttons with advanced selectors to create decade switching without JavaScript.
Morphing Elements: Objects don't just fade in/out—they actually transform shape, color, and function using clip-path and complex transitions.
Responsive Storytelling: The layout adapts to mobile while maintaining the narrative flow.
Period-Accurate Details: Custom fonts, authentic color schemes, and even era-appropriate motivational quotes.

🔮 What's Next

This project opened my eyes to CSS's storytelling potential. I'm planning:

Sound integration using Web Audio API
Extended timeline (1940s office culture? 2030s predictions?)
Character animations showing how people dressed and moved
International variations (Japanese vs. American office culture)

📚 Lessons Learned

CSS is incredibly powerful when you think architecturally. This project taught me that with careful planning, CSS can create experiences that rival JavaScript-heavy applications.
Research makes art – The weeks spent studying office history made each element authentic and meaningful.
Constraints breed creativity – The "no JavaScript" rule forced innovative CSS solutions I never would have discovered otherwise.

👉 Try the demo and let me know:

Which decade resonates most with your work experience? I'd love to hear about the office elements that brought back memories or made you think about how far we've come!

View the complete source code on GitHub – MIT Licensed

#frontendchallenge #css #webdev #office #animation #design