This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
PulseHub is a modern corporate intranet dashboard built with React, TypeScript, and Tailwind CSS. I originally created it during a hackathon in July 2025 — pushed 4 commits, deployed it to Vercel, and then completely abandoned it for 10 months.
For this challenge, I picked it back up and transformed it from a rough prototype into a polished, production-quality app. The key addition is Team Pulse — an original mood check-in feature where employees tap an emoji to share how they're feeling, with real-time team sentiment visualization. It's the feature that gives "PulseHub" its name.
The app features drag-and-drop dashboard widgets, a live chat system, gamification with achievements and leaderboards, smart search, dark mode, and PWA support — all wrapped in a glassmorphism design language with smooth animations.
Demo
🔗 Live app: pulsehub-intranet.vercel.app
💻 GitHub: github.com/vinobc/pulsehub-intranet
Pick a persona (Sarah the Manager, Alex the Engineer, or Jordan the New Hire) to explore different dashboard views. Try the dark mode toggle, drag widgets to reorder, check in your mood on Team Pulse, and send a message in Live Chat.
Before → After highlights:
| Area | Before | After |
|---|---|---|
| Login screen | Plain white cards, no personality | Glassmorphism cards with gradient blobs, staggered animations |
| Header | Basic white bar | Sticky glass navbar with gradient logo, online status dot |
| Dashboard | Flat unstyled widgets | Animated cards with icon badges, hover lift, color-coded data |
| Chat | Plain text messages | iMessage-style blue/gray bubbles with send arrow |
| New feature | None | Team Pulse mood check-in with sentiment visualization |
Before:
After:
The Comeback Story
Where it was: A hackathon rush job with 4 commits. The app worked but nobody would want to use it — flat styling, no animations, desktop-only, hardcoded everything.
What I changed:
I redesigned 7 components from scratch:
LoginScreen — Added glassmorphism cards, gradient background with blurred decorative blobs, skill tags as colored pills, staggered entrance animations, and hover ring effects.
App.tsx (Header + Welcome Banner) — Built a sticky glass-effect navbar with backdrop blur, a gradient PulseHub logo, and a full-width gradient welcome banner with time-aware greetings ("Good morning/afternoon/evening").
Dashboard — Every widget now has an icon badge in a colored rounded square, staggered fade-in-and-slide-up load animations, hover lift effects, and consistent rounded-2xl card design. Tasks have interactive checkboxes with priority dots. Calendar has color-coded event bars.
ActivityFeed — Rounded avatars, colored action verbs, live/offline indicator with pulse animation, and a polished empty state.
LiveChat — Your messages appear as blue bubbles on the right (like iMessage), others' messages are gray on the left. Send button is now an arrow icon. Added channel label and clear button.
GamificationDashboard — Wrapped in a card with icon badge, replaced the underline tab navigation with pill-style toggle buttons.
Team Pulse (NEW) — The original feature. A mood check-in widget where you pick from 5 emoji moods (🔥 On Fire → 😩 Struggling), optionally add a note, and share your pulse. Shows an animated color distribution bar, team sentiment summary, and expandable recent check-ins.
The key insight: I didn't add a dozen features. I made the existing ones feel good. Animations, hover states, consistent spacing, and thoughtful empty states made the app feel 10x more professional.
My Experience with GitHub Copilot
Copilot was my pair programmer throughout:
Animation patterns — When redesigning dashboard widgets, Copilot suggested the staggered animation approach using useEffect with setTimeout delays indexed to the widget position. The fade-in-and-slide-up effect on widget load was its suggestion.
Tailwind utility discovery — Copilot kept suggesting classes I'd never used: backdrop-blur-xl, ring-2 ring-blue-400, shadow-blue-500/25, animate-pulse. These small details elevated the entire design.
Component scaffolding — For Team Pulse, I described the mood selector and distribution bar I wanted. Copilot scaffolded the state management, mood calculation logic, and the animated bar component in minutes. I refined the design, but the skeleton came together fast.
Dark mode consistency — Getting dark mode right across 7+ components is tedious. Copilot auto-suggested dark: variants as I typed, keeping the palette consistent without a style guide.
What worked: Copilot excels at iteration — "add hover effects to this card" or "make this progress bar animate on mount." It accelerates the polish phase significantly.
vinobc
/
pulsehub-intranet
Modern intranet homepage for Frontend Challenge: Office Edition - React TypeScript PWA with real-time collaboration and gamification
🚀 PulseHub - Modern Intranet Homepage
Frontend Challenge: Office Edition submission for the Holistic Webdev prompt
A cutting-edge intranet solution built with React, TypeScript, and modern web technologies.
🌟 Live Demo
🔗 View Live Demo
📱 PWA: Install directly to your device for the full experience!
📖 Overview
PulseHub is a modern, enterprise-grade intranet homepage designed to revolutionize workplace collaboration. Built as a Progressive Web App, it combines real-time collaboration, gamification, and intelligent features to create the perfect digital workspace.
🎯 Key Features
- 🎲 Drag & Drop Dashboard - Fully customizable widget layout
- 🔍 AI-Powered Search - Smart search with personalized suggestions
- 🏆 Gamification System - Points, badges, achievements, and leaderboards
- 💬 Real-time Collaboration - Live chat, activity feeds, and kudos system
- 📱 Progressive Web App - Offline support, push notifications, installable
- 🌓 Theme System - Dark/light/system theme switching
- 👥 User Personas - Tailored experiences for Manager, Employee, New…
Built with React, TypeScript, Tailwind CSS, and Zustand. Polished with GitHub Copilot.
Top comments (0)