A high-fidelity digital signage application engineered for the Computer Science Department at KIET University. This system is designed for large-format kiosk displays, featuring a ceremonial "Inauguration Mode" and an automated content cycle that highlights department news, student achievements (Wall of Fame), and upcoming events.
-blue){kind=icon}
- Smart Pre-fetching: The system remains in a "Waiting" state, silently loading all API data (News, Awards, Events) in the background.
- Interactive Launch: Features a "Inaugurate Display" button that activates only when all systems are healthy.
- Visual Effects: Triggers a
canvas-confetticelebration animation upon launch before transitioning to the main content. - Graceful Error Handling: If APIs fail (e.g., 503 Service Unavailable), the launch button transforms into a "Retry" mechanism, preventing the audience from seeing broken data or loading spinners.
The application auto-cycles through four main modules:
- News: Latest department updates with visual context or auto-generated gradients.
- Wall of Fame (Awards): Highlights student achievements (1st, 2nd, 3rd place) with dynamic Gold, Silver, and Bronze theming.
- Events: Displays posters and videos of recent or upcoming events.
- Opportunities: Internship and job opportunity highlights.
- Global State Persistence: Caching logic in
Event.jsxandAward.jsxensures the slideshow remembers its last index when cycling back, rather than resetting to the first slide every time. - Resilient Media Loading: Automatic fallbacks for broken image links, converting Google Drive view links to direct image sources, and fallback gradients if images fail to load.
- Keyboard Control:
NorArrowRight: Next SlidePorArrowLeft: Previous Slide
This project is built using modern frontend tooling for maximum performance and visual fidelity.
- React.js (v18+): Component-based UI library.
- Vite: Next Generation Frontend Tooling for fast HMR and optimized builds.
- Tailwind CSS: Utility-first CSS framework for rapid styling.
- Framer Motion: Production-ready motion library for complex animations (transitions, entering/exiting slides).
- Canvas Confetti: Lightweight confetti animations for the inauguration sequence.
- Axios: Promise-based HTTP client.
- Implementation Note: Uses
Promise.allSettledto ensure the application launches even if specific API endpoints fail, preventing a total system crash.
- Implementation Note: Uses
Follow these steps to set up the project locally.
- Node.js (v16 or higher)
- npm or yarn
git clone [https://github.com/your-username/kiet-display-system.git](https://github.com/your-username/kiet-display-system.git)
cd kiet-display-system