Building a Digital Signage Content Management System: A Challenge and a Journey
Recently, I completed an exciting code challenge for a media company specializing in digital kiosks. The task? To create a Digital Signage Content Management System that connects a web application with a desktop display app using WebSockets for communication.
The Project Overview
The challenge required building a system with the following core features:
Web Dashboard Features
- A simple content creation interface using Fabric.js to add text, images, and basic layouts.
- Content preview functionality.
- Optional content scheduling capabilities.
- A content list with status indicators (e.g., draft, posted).
- Basic content organization using folders or categories.
- Device status monitoring for the connected display app.
Electron Display Application
- Full-screen content display with support for text and images.
- Manual sync button with a status indicator.
- An auto-sync toggle option for seamless updates.
- Offline content playback for reliability.
- System tray controls for managing the app.
- A connection status indicator for the WebSocket server.
- Basic error notifications.
Offline Capabilities
- Local content storage for offline playback.
- Content caching to ensure smooth operation without an internet connection.
- Automatic content synchronization when the connection is restored.
- Offline status indicators for visibility.
Tackling the Implementation
The first major challenge I faced was designing the implementation. I restarted the project multiple times, initially focusing on the Electron app. However, after much research and experimentation, I realized that starting with the web app and then connecting it to the Electron display app was a better choice. This allowed me to establish the core functionality of content management before tackling the communication layer with WebSockets.
For this project I chose Next.js due to its better integration with Vercel, making it incredibly easy to deploy and scale the app.
Learning Fabric.js and Electron from Scratch
One of the biggest hurdles was learning Fabric.js and Electron, two tools I had never used before:
- Fabric.js: This powerful canvas library enabled the creation of interactive content like text, images, and shapes. However, its documentation was not very beginner-friendly, so I spent significant time watching tutorials and experimenting with examples.
- Electron: I appreciated Electron's well-documented "Quick Start" guide, which allowed me to quickly build the desktop application. It helped me understand how to wrap a web app into a desktop environment and implement offline features.
The WebSocket Challenge
The WebSocket feature was particularly tricky. I successfully built a WebSocket server that enabled the Electron app to replicate the web app's content. However, real-time updates between the two apps proved to be a challenge. While I couldn't get it working perfectly for this version, I plan to revisit and improve it to achieve full real-time synchronization.
Lessons Learned
This project was both challenging and rewarding. I gained valuable experience in:
- Building web dashboards with complex canvas interactions using Fabric.js.
- Creating a cross-platform desktop app with Electron.
- Implementing offline-first features and handling content synchronization.
- Using WebSockets for communication between a web app and a desktop app.
- Deploying modern applications using Next.js and Vercel.
While I submitted the project, I’m excited to improve it further, add the missing features, and optimize the real-time capabilities.
Check Out the Project
If you're curious, here’s where you can see the project live or contribute to its development:
- Deployed Web App: https://signage-content-web-app.vercel.app/
- GitHub Repository: https://github.com/HTSagara/signage-content-app
I’m making this project open-source and would love for developers to collaborate, explore, and enhance it. Whether you're interested in improving the real-time features, optimizing the Electron app, or adding new functionality, your contributions are welcome!
Final Thoughts
This project challenged me to step out of my comfort zone and explore new tools, frameworks, and design approaches. It reminded me that development is an iterative process filled with learning opportunities. I look forward to continuing this project, improving it over time, and sharing updates along the way. 🚀
Top comments (0)