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
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
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
mongodb, node.js, react, socket.io