Authors

Inspiration

As the world retreats into the isolation of quarantine amid the ongoing crisis, people find themselves with a lot of spare time on their hands. Boredom breeds creativity and the once abandoned arts, crafts and instruments of yesteryear now find their way back into our lives. The 21st century way of learning or improving oneself is with a simple Google search of "How to _____" and clicking the first relevant website or youtube video. It can be a lonely and difficult experience, especially during quarantine, with only yourself to rely on should you run into any trouble. Thus, we want to connect people who are going through the same journeys and difficulties to share their experiences and help one another.

What it does

It is a browser extension where users first login to their Google accounts. When they watch a video or visit a particular website, they can click a button on our extension which will open a chatroom specific to that video/website where they can talk, discuss and share with other people consuming the same content as you.

How we built it

There are 4 parts to this project: chrome-extension, frontend-client, backend-server, database. The chrome-extension will allow the users to login using their Google sign-on. The chat-room, name and avatar of the user will be stored into the respective cookies in the browser. We built the front-end of the chatroom with React used Socket.io to communicate with our back-end server which was built with node.js and express. Also we have a database hosted on MongoDB atlas to store detail of our users, rooms and messages received. Upon receiving the message from the client, the server will store the message in the database. There will also to api requests from our client to the server to retrieve older messages for each room.

Challenges we ran into

We ran into a lot of challenges in understanding google's authentication APIs, REST APIs and async code in Javascript. The challenging part for the client side was using socket.io with React to communicate with the server. We integrated our app with a mongodb database on atlas using mongoose. It was challenging at first learning how to use a cloud database, as well as learning to write async mongoose code that works with the rest of the code.

Accomplishments that we're proud of

We are proud of being able to complete the task (for the most part) in this hackathon. We learnt a lot about web applications.  We are happy that we managed to get the database up and running despite some initial hurdles and that it hardly impacted performance of the real-time chat app.

What we learned

We worked extensively with the Javascript, We learnt a lot more about cloud services, as well as writing code with async await in Javascript.

What's next for learning-extension

We would like to add features that facilitate learning, namely a useful resources tab where users can share and pin things they find.

Try It out

Hackathons

Technologies

mongodb, node.js, react, socket.io

Devpost Software Identifier

255721