ScholarMode

A learning platform for YouTube.

Comment

Inspiration

Lectures, tutorials and video lessons are becoming the norm. These days every student learns online in some form or another. But the tools for learning from videos don't exist, so instead we expect students to passively watch the video and understand everything they need.

This isn't how we should learn. We can only understand something by engaging with content, asking questions and helping others. That's why we've developed ScholarMode.

What it does

ScholarMode is here to make learning on YouTube easier. We’ve designed a voted Q&A section right next to every video, so now students can ask any questions that pop up. Our voting system sorts all the best questions and answers to the top, giving every video a list of the best questions & answers for everyone to learn from. Plus we've made it really easy to sign in and join the discussion by simply linking your Google account. Users get rewarded straight away with a dashboard that showcases all their stats with questions they've asked, replied to or voted on.

It's a simple way to make learning from videos more approachable.

How we built it

We injected react into a chrome-extension while using MongoDB, Node.js, and express.js as our backend. By using the MERN stack we managed to build a scalable and fast application right on top of YouTube.

In order to authenticate users, the extension uses Google OAuth2 to request an access token to fetch the user profile and save it on MongoDB.

With Javascript we managed to inject two components within different existing nodes on YouTube's DOM and also communicate with our backend by retrieving data and rendering dynamic content.

The extension's popup page displays user info with an easy-to-read dashboard that's logged in to their Google account with OAuth.

We needed a text editor that was highly flexible and easy to configure. Slate.js had all the functionality with a variety of categories to achieve our goals.

Challenges we ran into

Authentication was our first hurdle in this 4 day sprint, it took about 3 days to come up with a fix but our back-end team was ruthless and geniuses, so we powered through to complete the rest of the app.

Other common bugs we dealt with included:

  • Triggering text editor events, and sending/retrieving JSON from the database
  • Communication issues from naming conventions between backend and front-end
  • Finding a way to listen to changes in chrome storage
  • Passing data between components rendered in different parts of the DOM

Accomplishments that we're proud of

We solved many difficult challenges during this hackathon, one of our problems consisted of nesting replies and rendering accurately to the DOM. Our solution involved recursion where we mapped over array of replies while dynamically changing the props.

What we learned

Communication between front-end and backend is crucial, we've understood the importance of defining clear naming conventions before writing code.

Planning was another key element to progressing quickly and achieving our objectives, while eliminating misunderstandings. We used Figma to design each component on the front-end and collaborated on Trello to prioritize and divide tasks easily.

What's next for ScholarMode

We believe this platform could really improve learning for students. There are loads of ways to make YouTube more productive but we're keen on developing a filtered video search to prevent wasting time looking for great content. Content creators could give viewers access to in-built tests & resources to validate learning on the platform. Another tool for teachers could be a dashboard to display all their lesson statistics and showcase which students ask the best questions or give the best replies.

This form of ScholarMode is only beta and we're excited to see where this evolves too.

Built With

Share this project:

Updates