Inspiration College life often involves juggling fragmented tools for tracking lectures, mid-sem exam deadlines, focus sessions, and revision notes. We wanted to eliminate tab-switching and turn any standard 1080p TV screen or monitor into an executive, distraction-free command center. Inspired by smart TV interfaces like Fire OS, Campus Dash TV brings key student utilities together into a single ambient display.
What it does Campus Dash TV is a glassmorphic student dashboard optimized for 1080p TV displays and desktop setups. Key features include: Spatial D-Pad Navigation: Native remote control navigation mapping (ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Enter) across a 3x2 grid layout. Executive Theme Engine: Switch between four visual modes (Amber, Slate Navy, OLED Black, and Midnight Cyan) instantly using key shortcuts or menu toggles. Focus Studio: A Pomodoro productivity timer paired with a procedural Web Audio ambient rain sound generator. Academic Trackers: CSJMU lecture attendance calculation, exam countdown timers, a student task hub, and interactive C Programming flashcards. Hands-Free AI Voice Assistant: Voice query support powered by the Web Speech API and Gemini integration for real-time schedule and academic answers.
How we built it Frontend: Built with modern HTML5, CSS3 glassmorphism techniques, CSS Grid/Flexbox, Web Speech API (SpeechRecognition and SpeechSynthesis), and Web Audio API for procedural sound generation. Backend: Node.js with Express 5 serving static client assets and exposing RESTful API endpoints for dynamic student data. Deployment & Hosting: Managed via Git version control and hosted live on Render with automated build pipelines.
Challenges we ran into Spatial Focus Management: Mapping smooth D-pad remote inputs across card elements so keyboard or remote focus moves naturally without relying on a traditional mouse cursor. LLM Latency & API Resilience: Handling peak network traffic delays and rate limits during voice queries, requiring backend prompt optimization and client-side fallback responses. Express 5 SPA Routing: Structuring wildcard fallback routes to serve single-page client assets cleanly in Express 5 / Node environments.
Accomplishments that we're proud of Designing an ambient dashboard interface that looks and feels like a native Fire OS television application. Generating procedural ambient rain audio purely in code via the browser's Web Audio API without relying on external media files. Delivering sub-second AI voice interaction with synced screen overlays and spoken text-to-speech audio.
What we learned Gained hands-on experience structuring modern Express 5 servers and managing SPA deployments on Render. Mastered spatial accessibility patterns for TV remotes and non-traditional pointer inputs. Learned practical strategies for API timeout handling, response capping, and fallback architectures for real-time voice applications.
What's next for Campus Dash TV University LMS Integration: Syncing attendance, assignment deadlines, and exam schedules directly with college portals like Canvas, Moodle, or CSJMU systems. Virtual Mobile Remote: Allowing students to use their smartphones as a touch remote or trackpad over local Wi-Fi. Custom Widget Hub: Enabling students to pin custom widgets (such as campus weather, shuttle schedules, or dining hall menus) directly to their dashboard.
Built With
- ai-assistant
- css3
- express.js
- fire-os
- gemini-api
- html5
- javascript
- node.js
- render
- smart-tv
- student-productivity
- web-audio-api
- web-speech-api
Log in or sign up for Devpost to join the conversation.