timeslot
Timeslot is a spiritual successor to deadair that enhances the viewing experience through improved UI/UX design, expanded functionality, and a seamless companion browser extension for ease of use.
Description
Timeslot is a spiritual successor to deadair, improving on many aspects of the original project. The idea came from wanting to expand on the original concept - while deadair allowed users to create their own TV stations from YouTube videos, Timeslot takes it further by adding more features and improving the overall experience.
The main improvements include a completely redesigned UI that's more intuitive and visually appealing, better channel management with more flexible scheduling options, and enhanced video playback controls. One of the biggest additions is a companion browser extension that lets users quickly add videos to their stations while browsing YouTube, making content curation much more seamless.
The project maintains the core concept of letting users create and share their own TV-like stations , but makes it much more accessible and feature-rich. Users can still create scheduled programming and now have more control over how their stations run and look Being able to create a minute by minute schedule for their stations. The companion extension was a direct response to user feedback from deadair, where adding videos was one of the main pain points, now it can be done directly from youtube.
The main improvements include a completely redesigned UI that's more intuitive and visually appealing, better channel management with more flexible scheduling options, and enhanced video playback controls. One of the biggest additions is a companion browser extension that lets users quickly add videos to their stations while browsing YouTube, making content curation much more seamless.
The project maintains the core concept of letting users create and share their own TV-like stations , but makes it much more accessible and feature-rich. Users can still create scheduled programming and now have more control over how their stations run and look Being able to create a minute by minute schedule for their stations. The companion extension was a direct response to user feedback from deadair, where adding videos was one of the main pain points, now it can be done directly from youtube.
Technologies
For this project I used Next.js with the app router and tRPC for the backend. The frontend was built using React with Tailwind for styling. I used the YouTube API to fetch video information and manage playlists, similar to the original deadair project but with improvements to the data fetching and caching strategy.
Authentication was handled through Google OAuth, allowing users to sign in with their Google accounts. Using arcticjs and oslo to handle the authentication flow which made it a breeze.
The database was once again hosted with Turso and the project was deployed on Vercel, I find this to be one of the easiest stacks to deploy and manage, no more than a few clicks and it's done. Being able to continualy deploy and test the project on Vercel allows for an extremely fast feedback loop which means I can iterate faster and fix bugs faster.
The companion extension was built using wxt, it's a great way to build chrome extensions, it's easy to set up and it's very powerful. Hot reloading makes it a 10x better experience, I'm quite impressed with how easy it was to develop and deploy the extension. Integration with the main application was done by allowing users to create an API key the can then use to authenticate requests to the extension.
Authentication was handled through Google OAuth, allowing users to sign in with their Google accounts. Using arcticjs and oslo to handle the authentication flow which made it a breeze.
The database was once again hosted with Turso and the project was deployed on Vercel, I find this to be one of the easiest stacks to deploy and manage, no more than a few clicks and it's done. Being able to continualy deploy and test the project on Vercel allows for an extremely fast feedback loop which means I can iterate faster and fix bugs faster.
The companion extension was built using wxt, it's a great way to build chrome extensions, it's easy to set up and it's very powerful. Hot reloading makes it a 10x better experience, I'm quite impressed with how easy it was to develop and deploy the extension. Integration with the main application was done by allowing users to create an API key the can then use to authenticate requests to the extension.
Things Learned
This project is in some way a capstone for this last year for me, It shows how much I've grown during this last 12 months, considering when I finished deadair, I looked back at the original code for deadair to check how I had implemented some of the features and I was appalled at how much I had improved (Something I have talked about in Lessons from redoing projects).
I did learn new things that I'd never done before, particularly the extension, I had created some simple extensions before but nothing like this, using wxt a great experience compared to how I'd done it on previous projects.
Something interesting I learned was to optimize database queries for reads, I didn't really think of this until I deployed the project and noticed that turso said I had generated 100.000 reads in a couple of minutes, I had no idea that the project was being used that much, I had to optimize the queries to reduce the number of reads, I'm glad I learned this, it's a good lesson and I'll keep it in mind for future projects. I think deploying earlier and simply iterating over the project would have meant I could have fixed this issue earlier and saved myself a lot of headaches.
I also learned there is not a single decent Scheduler component for React, search for it and you'll see what I mean there are a bunch of options, none of them work, and the ones that look promising are paid. There is no way I'm paying for a component. I almost called off the project because I couldn't find a decent scheduler component but after trying a bunch of them and being disappointed I decided to implement it myself purely out of spite for people trying to profit out of a React component.
I did learn new things that I'd never done before, particularly the extension, I had created some simple extensions before but nothing like this, using wxt a great experience compared to how I'd done it on previous projects.
Something interesting I learned was to optimize database queries for reads, I didn't really think of this until I deployed the project and noticed that turso said I had generated 100.000 reads in a couple of minutes, I had no idea that the project was being used that much, I had to optimize the queries to reduce the number of reads, I'm glad I learned this, it's a good lesson and I'll keep it in mind for future projects. I think deploying earlier and simply iterating over the project would have meant I could have fixed this issue earlier and saved myself a lot of headaches.
I also learned there is not a single decent Scheduler component for React, search for it and you'll see what I mean there are a bunch of options, none of them work, and the ones that look promising are paid. There is no way I'm paying for a component. I almost called off the project because I couldn't find a decent scheduler component but after trying a bunch of them and being disappointed I decided to implement it myself purely out of spite for people trying to profit out of a React component.
Things I Would Do Differently
I came into the projecy with the idea of possibly making a paid/pro version of the project, but working through the features I realized that there wasn't something that I would like to strip the free version of, so I decided to keep it free and open source as it should be. If anything I would have liked to have deployed the project earlier and simply iterated over it while testing on a staging environment instead of doing in on my machien since I would have caught a lot of bugs and issues earlier.
Gallery
