deadair
Deadair is a new way to watch youtube in the background. It allows you to create channels with set schedules that run throughout the week, allowing you to hop in and out of the constant stream of content, just like a TV channel would. It also allows you to create your own channels and share them with your friends.
Description
The idea for this project came from an actual problem I had, I like watching youtube videos in the background while I work or do other things but I don't like the idea of having to constantly switch context to find a new video to watch. I also like having the background noise like a TV would before going to sleep, but found no real way to do this with youtube. So I decided to create a website that would allow me to do this.
A big part of the inspiration from this project also came from a post I saw in Hacker News about a guy who created his own TV Channel with a Raspberry Pi and a bunch of movies and videos he had downloaded. I thought this was a great idea and wanted to create something similar but leveraging the power of the internet, allowing anyone to create their own channel and share it with their friends. I decided to stick to youtube since it's the biggest video platform and has a lot of content, and it's where I watch most of videos.
The project is live and hosted on deadair.aornum.xyz but it is not mobile responsive so I only recommend using it on a desktop. It's free to use without having to create an account, but if you want to create your own channels you'll have to create an account, which is made easy by using google social sign in. Once you create an account you can create your own channels and share them with your friends. You can also create a channel with a schedule, allowing you to create a channel that runs your favorite videos in a set schedule, just like a TV channel.
A big part of the inspiration from this project also came from a post I saw in Hacker News about a guy who created his own TV Channel with a Raspberry Pi and a bunch of movies and videos he had downloaded. I thought this was a great idea and wanted to create something similar but leveraging the power of the internet, allowing anyone to create their own channel and share it with their friends. I decided to stick to youtube since it's the biggest video platform and has a lot of content, and it's where I watch most of videos.
The project is live and hosted on deadair.aornum.xyz but it is not mobile responsive so I only recommend using it on a desktop. It's free to use without having to create an account, but if you want to create your own channels you'll have to create an account, which is made easy by using google social sign in. Once you create an account you can create your own channels and share them with your friends. You can also create a channel with a schedule, allowing you to create a channel that runs your favorite videos in a set schedule, just like a TV channel.
Technologies
For this project I decided to use SvelteKit, it's what I like the most as of late and I wanted to try it out in a bigger project. I also used Tailwind for styling, I've been using it for a while now and I really like it, I had some preconceptions about it but I've come to really like it. I also express as my backend framework, I've been using it for a while now and I'm very comfortable with it. I also used Typescript for the backend, with a Sqlite database for simplicity.
When it comes to new techonologies for me, I decided to give Kysely a try, it's a new SQL query builder for Typescript that I've been wanting to try out for a while now. And this project seemed like a good fit for it. I used the google API's to fetch videos based on their URL or a given playlist ID. I also used the youtube API library to fetch metadata from youtube videos, like the thumbnail and the duration, those are saved into the database and used to display the videos in the channel. Users can create their own channels where they can add videos and set a schedule for them to run on.
It was also my first time using the imgur API, I used it to upload the channel thumbnails. Surprisingly it was very easy to use and I was able to get it working in no time. And considering they don't have pricing plans it's a great option for small projects like this one.
When it comes to new techonologies for me, I decided to give Kysely a try, it's a new SQL query builder for Typescript that I've been wanting to try out for a while now. And this project seemed like a good fit for it. I used the google API's to fetch videos based on their URL or a given playlist ID. I also used the youtube API library to fetch metadata from youtube videos, like the thumbnail and the duration, those are saved into the database and used to display the videos in the channel. Users can create their own channels where they can add videos and set a schedule for them to run on.
It was also my first time using the imgur API, I used it to upload the channel thumbnails. Surprisingly it was very easy to use and I was able to get it working in no time. And considering they don't have pricing plans it's a great option for small projects like this one.
Things Learned
This project allowed me to learn more about Google API's, I had used them before but never in a project of this scale. I also learned more about the Youtube API and how to use it to fetch videos and playlists. One of the most important things I learned was how to use the Google OAuth API to allow users to sign in with their google account. I had never done this before but I always wanted to learn how to do it since it makes the barrier to entry for users much lower.
I also used websockets for the first time, I used them to create a live chat for each channel. I used the socket.io library for this and it was very easy to use, except for the deploy part, since I'm using a reverse proxy to host the website I had to configure it to allow websockets to work. I also had to configure the server to allow websockets to work, which was a bit of a pain but I was able to get it working in the end.
I also used websockets for the first time, I used them to create a live chat for each channel. I used the socket.io library for this and it was very easy to use, except for the deploy part, since I'm using a reverse proxy to host the website I had to configure it to allow websockets to work. I also had to configure the server to allow websockets to work, which was a bit of a pain but I was able to get it working in the end.
Things I Would Do Differently
I don't have much to say here, I'm pretty happy with how the project turned out. I would probably try to make it more mobile friendly, as of now it is responsive but some user actions are not available on mobile, such as editing channel schedules since it heavily relies on drag and drop. I would also like to add more features to the channels, like the ability to add a description and tags to them.
I would like to add more features such as making collaborative channels, where multiple users can add videos to the channel. I would also like to add a way to search for channels and videos, like trending channels so people can find new channels to watch. I might add these later on but for now I'm pretty happy with how it turned out. Probably will come back to the project after finishing my next project or so and add some of these features since I really like the idea of the project and am already using it daily.
I would like to add more features such as making collaborative channels, where multiple users can add videos to the channel. I would also like to add a way to search for channels and videos, like trending channels so people can find new channels to watch. I might add these later on but for now I'm pretty happy with how it turned out. Probably will come back to the project after finishing my next project or so and add some of these features since I really like the idea of the project and am already using it daily.
Gallery
