Nexatom
Profile page
bonding
Atomic realm - app dev
Diagram

Nexatom

Experience with hop 🐇

Overall, it was really reliable, would definitely use it next time. In our project, we used both Hop channels (for real-time movement) and Hop ignite (for deployment).

Going back in time ⌚

If we were able to go back in time, we wish that we could have worked with hop ignite earlier.

Favorite part of the submission 💖

We enjoyed playing around with the real-time atoms we built and forming different bonds.

Inspiration ✨

Looking at the current marketplace, there are no websites that are focused on real-time bonding with people. Moreover, we find that the overall engagement with real-time interactions is far more than in normal bonding apps without real-time.

What it does ⚛

After signing up with various information that relates to the development and their experience, users (aka. atoms in our applications) are able to enter a real-time lobby that allows them to see other users and enter specific realms related to a specific topic in development: for example, machine learning, app development, etc. Users can view each other’s profiles and when atoms move close to each other they are able to form bonds with each other.

Atoms that are prompted to form a bond can view the other atom’s profile and view recommendations of other atoms that they might want to view. This recommendation is provided by using a custom unsupervised machine learning model that takes various features into account and provides a prediction of 3 to 6 other atoms that you might want to view. After clicking the bond button, the bonds show up on both of the atom’s profiles.

How we built it ⚒

Frontend (next js) Using Next.js and a canvas library called Konva, we were able to create a seamless website design and allow users to move around with their arrow keys. To get started, users fill our a short form in which they input basic sign-up information along with other information that is used by the machine learning model to provide recommendations. Once the atom is created, their profile is now viewable by an id provided by MongoDB. The profile page takes all of the information given and connects to a backend API we created to webscrape data from various developer websites. This data is then displayed on the frontend so that when other users view the atom’s profile they can see if they want to connect. The main feature of the website is a lobby in which users can interact with each other in real-time. When atoms move close enough to each other (calculated using euclidean distance), a circle is shown, meaning that the atoms can bond with each other. Atoms can also enter different realms where they can talk about specific topics and bond.

Backend (py) Using Flask, Numpy, and Beautifulsoup, we were able to create a fast, responsive Python API. This API is hosted on Heroku, with the public dyno being here. Within this API, we have our fast python AI unsupervised recommendation system that used processed user data in a database (using another feature of this API).

Challenges we ran into 🧱

First, we thought of creating a real-time system that allows atoms to move around with their mouse; however, we soon realized that Hop would be too slow with this massive amount of information. Instead, we turned to web sockets. However, after 10 hours of arduous work, we realized that websockets were not going to work out either and we turned back to Hop. This time, we allowed users to move with their keyboard arrow keys (left, right, up, down) so that there would be less frequent updates to the Hop real-time system.

On the backend side, we came to the realization that tensorflow libraries couldn’t be applied to our needs, therefore, we created our own unsupervised recommendation model using the machine learning experience we had. We then had to start from the ground up, thinking about how to convert our features to numbers so that we could use them. From that, another challenge arose - how do we process this data? To overcome this challenge, we coded each feature processing function one by one (remembering to include sigmoid normalization (for the timezones), label mapping, and more.

Accomplishments that we're proud of 💪

We successfully integrated real-time data with an html canvas - at first, we thought that the integration procedure was going to be extremely challenging.
fast, responsive python api.