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

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.

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.

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.

Watch now ▶️

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

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?

Links 🔗

Here's the Chrome store Link : batList 🌻

Here's the GitHub Link : batList gitHub 💫

Here's the producthunt link :

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!!