batList - A watchlist extension for YouTube using ReactJS, Firebase, and YouTube API.

batList - A watchlist extension for YouTube using ReactJS, Firebase, and YouTube API.

batList helps you add your favorite videos to your watch list which can be accessed anytime without opening youtube.

Zuber Dunge
ยทApr 15, 2022ยท

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

Hey there ๐Ÿ‘‹

I'm Zuber. I hope you are doing well. I'm a frontEnd developer, obsessed with ReactJS and CSS, leveling up my game every day.

It's been months since I wrote my last blog and now I'm back with something very exciting, at least for me.

This blog is more about a project that is different from the rest of my projects and my journey of building it. This time I have tried my hands on building my very own chrome extension - BatList, a chrome extension for YouTube. I hope you all find it interesting too.

2.png

Let's start with a basic question,

What was the need for this extension? ๐Ÿ’ก

I spend most of my time in front of the laptop, coding something. And while coding I listen to songs, well almost all the developers out there do. And I play on youtube and sometimes I want a specific song that I saved to watch later on youtube along with many other videos, and it gets hard to find that one, and I end up searching that on youtube directly. Being a lazy person, I keep all videos in the watch later playlist, and my watch later playlist is filled with tutorials, songs, trailers, standup videos, poetry, storytelling videos, etc. So I decided to create something that'll help me, and I came up with this extension idea, That'll help people like me.

What is batList? What exactly does batList do? Why to use it ? What makes it special? โšก

It's basically for reducing human efforts. When you add a video to YouTube Playlist, you've to open YouTube, then go to that Playlist, and scroll down until you find the video because you don't have a search option there. But on the other hand, with batList, you can access videos anytime from any website or tab with a single click, you don't have to open YouTube first. And with batList you can search for a video from YouTube and add that to the list in the extension itself or you can just start playing it in a new tab!

You can search in your list and click on it, it'll open that video in the New tab. Easy af. And one more thing, on batList there's a special button as "Play a random song", it'll play a song from a few popular Playlists. And sometimes, a beautiful song is all we need.

Features ๐ŸŒŸ

1๏ธโƒฃ Add video to list with one click โ„๏ธ

  • Watching a video on YouTube, open the extension, and add the video to the list in one click!

2๏ธโƒฃ Search on YouTube in the extension itself ๐Ÿ”Ž

  • You can search for any video and add that to the list or play that in a new tab using our extension.

3๏ธโƒฃ Search in the list ๐Ÿ”Ž

  • You can also, search videos from your curated list as well, so you don't have to scroll and search for a particular video.

4๏ธโƒฃ Play a random song ๐ŸŽถ

  • Bored? Wanna hear something new, something random? Click on the Play a random song button, and we will play something for you, who knows maybe your new favorite song is waiting for you?

5๏ธโƒฃ Desktop Notification ๐Ÿ””

  • We will send you a desktop notification whenever you play a song from the list.

6๏ธโƒฃ Authentication using Firebase ๐Ÿ”ฅ

  • You can sign up using your email address, auth is done by firebase.

7๏ธโƒฃ Firestore for storing the data ๐ŸŒ†

  • To store user lists, we are using firestore by firebase.

    p.s. your data is completely safe with us.

8๏ธโƒฃ Login as a Guest

  • When you click on the login as a guest button, you'll be registered with a unique email address and a unique password, and that'll create a unique database for your list, if you accidentally log out, that email and password will be already in the input fields of the login form so that you don't lose your list.

How to use โ“

Getting started ๐Ÿš€

  • Sign In using your email, or as a guest.

5.png

Adding video to the list โ˜‘๏ธ

  • You can search for videos or go to youtube and open a video and add that to the list as well.

4.png

Watch now โ–ถ๏ธ

  • On click of watch now, that video will open in a new tab.

1.png

Delete unwanted videos ๐Ÿ—‘๏ธ

  • You can delete videos from the list with the delete icon.

Tech Stack ๐Ÿ’ป

  • ReactJS, Context.
  • Firebase and Firestore
  • YouTubeAPI
  • CSS for making it beautiful

Learnings โœจ

I've never created an extension before, and this was a great experience, got to know about many new things. And this was the first time I worked with firebase and firestore as well, and firebase is awesome I must say. Learned about notifications (sending notifications to users), YouTubeAPI, and navigator.onLine to check if the user is connected to the internet or not.

Problems I faced ๐Ÿ˜ฉ

As this was my first time I created the extension using manifest v2 and it was working locally but when I was trying to upload it to the chrome store, I got to know that they're not accepting v2 extensions anymore, then I had to make changes according to v3, Which was kinda confusing but with the help of documentation and stackoverflow I did it.

What's next for batList? ๐Ÿš€

We will be adding a few more features in our extension, like sorting the list by ascending or descending order, or filtering the list. and In the near future, you'll be able to access your youtube playlist directly in the extension itself and maybe background play who knows?

Here's the Chrome store Link : batList ๐ŸŒป

Here's the GitHub Link : batList gitHub ๐Ÿ’ซ

Here's the producthunt link : batList - watchList for YouTube - A watchList extension for YouTube | Product Hunt

Here's Demo Video Link : youtube.com/watch?v=Ea3mu3Aoc38

I hope this extension will be useful for y'all <3, and yes it'll be really helpful if you can give some feedback/suggestions, Let me know in the comments section.

That's it for today, I'll be back with another blog or project, Take care and be nice to everyone. <3

Thank you, have a beautiful life ahead โค๏ธ

byeeee!!

Did you find this article valuable?

Support Zuber Dunge by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this