# Introducing Classroom: Learning with YouTube Made Exciting

Hello, beautiful people! It gives me great joy to introduce **Classroom**, where learning with YouTube has been made more exciting than ever.

First, let me thank [ReactPlay](https://reactplay.io/) and [Nhost](https://nhost.io/) for hosting this hackathon.

## Idea

YouTube is my go-to resource when I'm trying to learn something new. Through YouTube, I have learned a lot over the years. However, YouTube recommendations are very distracting and click-baiting. Sometimes I spend mindless hours scrolling through YouTube, watching random videos suggested by the website.

I prefer taking notes when watching important YouTube content, such as coding courses, tech presentations, and others. I switch back and forth between my code editor, YouTube and my notes frequently, especially when watching a coding tutorial. 

To make it simpler and more productive, I came up with the idea of developing an app that allows me to take notes, watch videos, code, and be distraction-free, all within a single app.  

## Classroom Walkthrough

Start learning  - [https://learnwithclassroom.vercel.app](https://learnwithclassroom.vercel.app)

Link to the repo - [https://github.com/GeekyChakri/Classroom](https://github.com/GeekyChakri/Classroom)

Here's a quick video demo of Classroom:

%[https://www.youtube.com/watch?v=uqX2yAVLC5A]

Sign-up/Login using your GitHub account.


![Blog1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435445447/nMipDvCA7.png align="left")

**Search**


![Blog2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435459173/k_S52mxvQ.png align="left")


**Search Results**

![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435526194/eF2w-5zI-.png align="left")

**Channel**

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435571245/XcDbvnpHh.png align="left")


**Playlist**


![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435591470/fT_h-5EwE.png align="left")


Take notes as you watch the video.

![BlogNotes.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435620131/ri-ZxZtW3.png align="left")

Watch and code.

![BlogEditor.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435645205/ONH5Bhr01.png align="left")

Your saved notes are accessible here.

![BlogNotes2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435659107/bOQFLOSHC.png align="left")

## Tech Stack

-  NextJS

- Typescript

- Tailwind

- Nhost

- Vercel


It was fun working on this project. First time building an app with Nhost, and I'm in love with this platform. Incredible features and great DX. I highly recommend you give it a try.

Thank you for reading the article. Please let me know your feedback in the comments section. Till then, be happy and stay safe.


Happy Coding 🚀