LED Display System
Overview
A full‑stack CMS that lets teams curate slides (images, videos, KPI graphs, celebrations, announcements) and broadcast them to LED screens across the office. Changes sync in <1s over Socket.IO and the display view auto‑updates in fullscreen.
A real‑time LED signage CMS for offices — React + TypeScript + Node + Socket.IO
💻 Tech Stack:
- React 19, TypeScript,
- Tailwind, Zustand,
- React Query, Swiper, Node.js, Express, TypeORM, PostgreSQL,
- Socket.IO, JWT
✍️ Problem
Operations and HR needed a single source of truth to push announcements, celebrate employees, and display live KPIs on multiple wall‑mounted LED screens. Existing workflows were manual (USB, PowerPoint loops), slow, and error‑prone.
Solution
A web app with:
Admin to create slides (image, video, text, docs, events, graphs, escalations), manage durations, and reorder via drag‑and‑drop.
Home to activate/deactivate slides and preview the playlist.
Display (kiosk mode) that stays in fullscreen and listens for real‑time updates. No operator needed.
Real‑time architecture: Admin/Home → persist to DB → broadcast via Socket.IO → Display refreshes almost instantly.
Highlights
<1s live sync across all connected displays (Socket.IO)
Multiple slide types: Images, Videos (MP4), News, Events (birthdays/anniversaries), Documents (PDF/Excel/PPT), Rich Text, Graphs (team performance), Escalations (tickets)
Smooth playback: Per‑slide durations, transitions (fade, slide, cube, flip, cards, coverflow)
Safety: JWT auth, protected routes, validated uploads, role‑based access
Ops‑friendly: Media library, live preview, responsive for any LED size
- Real-Time Updates: Socket.IO provides instant sync across network (<1s)
- Multiple Slide Types: Images, videos, news, events, documents, graphs, and rich text
- Live Data: Employee celebrations, escalations, and performance metrics
- Responsive Design: Optimized for LED screens of any size
- Smooth Transitions: Multiple effect options (fade, slide, cube, flip, cards)
- Auto-Play Slideshow: Individual slide durations with smooth playback
- Drag & Drop: Intuitive slide reordering
- Live Preview: See changes before publishing
- Rich Text Editor: Create formatted content with images and links
- Media Library: Centralized file management
- Instant Sync: Changes appear on displays within 1-2 seconds
- JWT Authentication: Secure user login
- Protected Routes: Role-based access control
- Session Management: Multi-device support
- Secure File Upload: Validated and sanitized uploads