This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
What I Built
I built https://1988-in.vercel.app/ for my kids.
1988.in is a television that lives in the browser. You accept a short station notice, press the glass, and the set comes on already in the middle of a programme. Bollywood is on 001. Cricket is on 002. Jungle Book, Shaktimaan, and the other Doordarshan-era shows are in the guide under DD Era, next to nature, food, sport, and quieter channels you can leave running. Nobody picks “what to watch next.” The channel is simply on.
That is the problem it solves. Streaming apps ask for an account, a search, and a decision. A television asks you to sit down. Channel, volume, and mute stay in that browser, including changes made from a paired phone. Turn the set on again and you are back on the same channel, mid-broadcast.
When I handed it over, they said: “Interesting”
Demo
On a laptop, open the TV, accept the notice, and press power. Open Channels and search “Ramayan” or the DD Era tag. On a phone on the same page, choose Connect remote, scan the QR code, and change the channel. The picture stays on the computer. The phone only sends the button press.
Code
https://github.com/tusharv/positive-player
The lineup is src/data/channels.ts. The broadcast clock is src/lib/broadcastClock.ts. The television state lives in one Pinia store, src/stores/tv.ts. The phone speaks a small WebSocket protocol. Video bytes go straight to YouTube.
How I Built It
The set is a Vue 3 single-page app: Vite, Pinia, Vue Router. YouTube’s IFrame Player paints the picture. YouTube Data API v3 fills the guide from each channel’s public uploads playlist. A Vercel function at /remote-ws relays the phone. The same relay runs as a small Node process for local development and self-hosting.
Each channel is a playlist id, not a search. A default YouTube project allows 100 search calls a day, which a hundred-channel lineup would burn in one flip-through. Playlist and video lookups sit in the ordinary quota, and a catalog younger than seven days stays in the browser.
The illusion of a broadcast is a clock. Durations in the catalog are summed into a loop. The UTC second, modulo that loop, picks the video and how many seconds into it you join. Two people who turn on the same channel in the same second join the same moment. When a video ends or will not embed, that id is dropped for the rest of the tab and the clock runs again.
The phone never touches YouTube. The TV shows a QR code and an eight-character pairing code. One phone pairs to one set. The desktop sends its real state back, so a channel change on the glass shows up on the phone, and a channel change on the phone shows up on the glass. Sessions live in memory, invitations expire, and a disconnect gives the desktop two minutes to return.
I built it with Cursor, from a written spec through to the Samsung TV fix in 0.4.1. On those sets, YouTube draws on a separate hardware plane, so a full-screen scanline layer hides the picture while the sound keeps playing. The player detects that and turns the glass effects off. That was a coding agent helping me write a website. The running programme does not call a model.
Why Does Open Innovation Matter?
The part a family actually touches is open because it is a web page.
There is no account on 1988.in. Power, channel, and volume stay in the browser that is sitting in the room. The remote is another browser tab. Pairing credentials stay in that tab. A closed streaming app would have put the lineup, the history, and the remote behind a login on someone else’s server. Here the lineup is a file in the repository. The schedule is arithmetic on UTC, so there is no programme database to run, pay for, or lose. Video stays on YouTube, which is the closed piece, and the television around it can be read, changed, and self-hosted.
What that made possible is a set you can leave on for someone who does not want another app. They press the glass. Something is already playing. They pass the phone across the sofa.
My Agent Session
The design spec and the implementation notes are in the repository under docs/superpowers/ and docs/architecture.md. [Add a DevRelay embed here if you export this session. Otherwise delete this section.]
Top comments (0)