Observe, A comprehensive solution to online tutoring.

{ Observe } is a node.js / express back-end, react front end chatroom learning tool that is free to sign up for and easy to use, it's as simple as logging into quilldev.tech, logging with google, and chatting on subjects you would like to discuss or need help with!


Observe was based on a shared desire between myself and Michael to make building connections easier in an education space. To make it as easy as possible to interact with others we decided to design a low barrier to entry learning environment that would allow anyone to instantly connect with other like minded people via our application.

What it does

Observe is a web-based application that allows a user to sign in through google Oauth, and immediately be able to join publicly hosted chat rooms, or create and interact with their own personal private chatroom's (locket by 8 digit keys). Observe has features such as free private chat rooms, public discussion rooms for general school subjects, ability to favorite rooms so you can easily access them via your dashboard later, and the ability to add friends to keep up with on their own observe experiences. Observe also has a build in command system that allows you to access information directly from the chatroom, typing /help in any of the Observe chats gives you information about these commands and how to use them. Current built in chat systems include a dictionary, and a periodic table search up.

How we built it

Our primary tools of the trade were

  • node.js
  • react
  • express.js
  • socket.io
  • mongodb

Further Elaboration

Observe is split between a client, server, and separate API, the client is the main user workspace and is build using primarily the React framework and React-Bootstrap for styling. Our back end server is build using express.js for managing API services, MongoDB (accessed via monk and varying middle ware) for storing persistent information such as friend lists, chat logs, friend requests, and chat room data ids/data. Our chat system extends our HTTP server and is using socket.io on the server, and socket.io-client in the browser to be able to send chat messages and update them in real time. I am self hosting the server for deployment (it runs on my home server). The website uses cloud flare DNS so all resources and details are sent over HTTPS.

Challenges we ran into

The primary challenges we ran into while creating Observe were honestly ones to do with styling, neither I nor my partner had used react so it took us a little bit to get going but we seemed to settle in to the framework (sort of) after a little while. We both still definitely have way more to learn when it comes to front end development! Another issue I kept running into was with Google's OAuth because for a long time it really didn't like the way I was hosting the server, alas it was eventually beaten into submission and worked over HTTPS on quilldev.tech.

Accomplishments that we're proud of

I and my partner were both incredibly proud of how quickly we came together on an idea we agreed upon and settled into frameworks to make our goal possible. I am particularly proud of the back end engineering I did for making an "infinitely scaling" chatroom service that generates room keys, all while not mixing chat messages with one another. I am also very proud of the friend list and chat room "favorite" system. My partner and I also both worked on the chat room protocols with socket.io and are extremely impressed with how quickly messages are sent/processed/drawn in the system having very low latency/delay.

What we learned

We learned a lot about JSX and React, and I learned that I love socket.io and will probably choose it far more often in the future when developing my projects. My partner particularly learned a crazy amount of front end development techniques and even got his hands dirty in the back end for a little bit. All in all participating was an incredibly enriching experience for both of us and we would love to participate in similar ventures in the future.

What's next for Observe

I myself will definitely look into continuing development on Observe because I am extremely proud of how it turned out in such a short amount of time. There were also a lot of things in the project I would live to fix/refactor because by god there are some dodgy-hacks things in there. But I guess that's why they call it a hackathon.

Built With

Share this project: