Berry

Tell us your Twitter handle and what classes you're taking, and we'll find your friends and acquaintances taking the same classes as you.

Comment

Inspiration

HackIllinois 22 was Neel's first hackathon, so we wanted to build something useful but also simple. A common problem we faced in the online environment of the last 2 years has been making friendships. Connecting with classmates through social media in any form was particularly difficult, as without the excuse of physical vicinity, it is very difficult to justify reaching out to anyone on social media. And especially on places like Instagram and Twitter, it is quite likely that at least a handful of your friends or followers are taking in some of the same classes as you. But more often than not, both parties remain unaware of each other’s enrollment.

But it really helps to know who's in your class, for help with schoolwork, finding friends with similar interests, or just meeting new people. So, we thought we'd make it easy. Just give us your username, tell us what classes you're taking, and we'll tell you everyone in your classes who you follow or who follows you, and now you have an excuse to get to know them better.

What it does

Berry is a web application that allows you to connect you with your mutuals on Twitter. Note that Berry has only been seen to work in our tests on public Twitter accounts. The following flowchart describes the general process to of using the app: Alt text

Target Market

The idea is directed towards students, and as students ourselves from UIUC and UCLA, we wanted to create a place where college students can use their prime source of communication (social media) as a place to easily and quickly find mutuals in the same classes. For college students, by college students.

How we built it

Product Design

Taking a minimalistic approach, our designer Estrella's vision consisted of a smooth gradient coloring with bright colors and making a very pleasant and comfortable user experience. We used technologies like Figma) and Canva to create our design files and source our images. Product Design is a crucial part of our project

We then wrote out the entire web app using JavaScript, HTML and CSS, bootstrapping the project using Create React App. We built our frontend based on the Estrella's Figma wireframes using React.js and CSS, wrote our backend server and core functionality using Node.js and Express.js, with a little Python webscraping from Neel's side, and frontend of our app using React.js

Tech Stack

Our Tech Stack consists of a React.js frontend over a Node.js backend, using Express.js middleware, and a Firebase database. We also used the Twitter API to find users' followers and following.

Development

Throughout hacking, we followed a product software model to help us tackle some of the most important parts of our web app.

P0

  • functioning front end interface with React
  • secure social media usage
  • enter your classes (UIUC only)
  • get followers and following (mutuals)
  • search through course list and mutuals for matches

P1

  • integration with Instagram, Snapchat and Discord
  • course list of UCLA and other colleges

Challenges we ran into

We severely underestimated the complexity of this project. It was not only incredibly frustrating trying to get the APIs to behave correctly, but on top of that, we had technical difficulties, as well as several roadblocks that we could not overcome, which led us to abandoning midway parts of our project on which we had spent lots of effort. Here are some of the aforementioned inconveniences:

  • we originally wanted to build our app to connect users on Instagram. However Instagram's official API did not allow search through followers and following without App Review, which could take 5+ days. Thus, we searched for a workaround, finding this Instagram Web API. But this had several compilation errors. In order to fix those, we had to introduces new scripts to run the app (react-app-rewired instead of react-scripts), and after that, npm started giving installation problems, which we solved by using yarn instead. But after that, the API had CORS errors (which we solved by setting up the server). And lastly, after nearly 24 hours of getting this Instagram Web API to work (and it did work! We were able to extract the usernames of a user's followers and following after having them login), we realized that we would not be able to use it without explicitly requiring the user's password. That is, we would have to see the user's login credentials, which posed major security concerns, and which we simply could not accept. So, after nearly 24 arduous hours of getting this Instagram Web API to work, we had to ditch it, and opted for Twitter instead.
  • we decided to store the classes that a particular user takes in a Firebase Realtime Database, which was great not only because of the ease of access, but also because Firebase allows authentication through Twitter. However, after getting the Twitter API fully up and running (which took several more hours), and also implementing the code to authenticate through Firebase, we found out that this would not work. Our authentication code worked (!), and once the app was running, clicking our then-labeled Connect with Twitter button, a pop up would open asking the user to authorize the connection of our Firebase app to their Twitter account. However, only through a console error did we learn that the Twitter login through Firebase was only available to the Elevated Access tier of the Twitter API, for which we had to submit a review. Not only did Twitter block our submission for unknown reasons, but we realized that we did not have enough time to spend trying to figure this out. So, with about 8 hours of the hackathon left, we had to ditch our Firebase authentication as well, and so were not actually able to properly integrate our firebase database in the end.
  • as we found out only after we had gotten our initial Instagram Web API app up and running on, npm did not have a version that could compile on the M1 Mac, which presented a huge bottleneck for Estrella and Neel, who both have M1 Macs. We did eventually solve it with help from the mentors @AidanG#7040 and @scorphus#1336, who showed us how to run it on a Docker image. We also managed to get it working with yarn.
  • on the frontend side, we wanted our app to consist of 4 web pages, so our user experience could exactly follow the flowchart we began with: choose university, enter Twitter handle, enter courses, get your mutuals. However, we found out that React re-renders when redirected to a new page, and believe me, we know how simple it sounds, we couldn't figure out how to store the user's Twitter handle once they had typed it into the text field (since whenever the page reloaded or was redirected, the App re-rendered and set it back to the empty string that we began with). Unless we stored it, we couldn't use the Twitter API to get their followers and following. The solution was to just put our last 3 steps all on one web page, which was a sad compromise on our part.
  • while Neel was able to write a webscraper to get all of the courses offered by UIUC, we realized we didn't have enough time to do that for UCLA or any other college, so we actually did not implement the UCLA button on Berry's home page
  • despair as we ran into more and more problems, and motivating each other to make sure we could power through.

Accomplishments that we're proud of

  • solving the bottleneck presented by M1 Macs not being able to run npm
  • getting the Instagram API to work, to actually return lists of followers and following (even though we had to ditch it)
  • designing a beautiful and minimalistic interface
  • getting the Twitter API to work and actually successfully extracting the Twitter handles of your followers and following
  • getting the app up and running with the frontend and backend all working together
  • getting the firebase auth working, that was really cool, even though we had to ditch it
  • choosing the name berry (it's a great name)

What we learned

  • how to use the Twitter API
  • don't waste time on the less important things (like choosing a name)
  • how to user Docker
  • how to set up and use a Firestore Realtime Database
  • how to integrate Twitter for Firebase authentication

What's next for Berry

  • writing a neater interface to properly implement the user experience we wanted
  • organizing the list of followers/following that we return by the particular class they have in common with the user
  • making each handle in the list of followers/following is a link to their Twitter page
  • expanding Berry to further social media platforms, in particular, Instagram, Snapchat, and Discord
Share this project:

Updates