As a team of four first-year students, we wanted to create an app that first-years will find helpful in their transition into college. During our first two weeks at Brown, social interactions with our peers were pretty bland. Due to the quarantine spurred by COVID-19, virtual conversations never went beyond these couple questions: “What’s your name?”, “Where’re you from?”, “What’re you planning to concentrate in?”. Occasionally, social media was exchanged, but even then it was difficult to stay in touch online and set up a meeting in person without it being awkward. For our hack, we wanted to find a way for Brown students to easily connect with one another in person and engage in activities that will lead to more meaningful conversations and new friendships.

What it does

OurCampus is a web app where you can meet new people on your campus through activities that you love. Users that know an activity they’d like to do with others can post new events that other users can join. If you’re just looking to meet people, you can browse existing events and find an activity you might enjoy! Once an event has reached the target number of participants, a text message is sent to every group member containing each participant’s phone number, so the event logistics can be easily communicated.

Although OurCampus can be used to organize formal, well-thought-out events, we envision it to be used for casual, impromptu hangouts where you can meet new members of your campus community. Whether it’s going to get ice cream or studying for an upcoming exam, you’ll never have to do it alone.

How we built it

The frontend website is designed using Figma and built using React.js and Redux.js. We take advantage of Materialize CSS for styling, icons, and out-of-the-box components. The backend is supported by Firebase. Specifically, we use Firebase Firestore as a database and Firebase Functions to deploy cloud functions. We use MonkeyLearn to create a machine-learning-powered API that takes in the description of an event and predicts its category. Finally, we use Twilio to programmatically send text notifications to event participants as events are finalized.

Challenges we ran into

As with any project, building OurCampus came with its fair share of challenges. After coming up with the idea for the application, we were immediately faced with the question of how to minimize the vectors for misuse and abuse. We wanted to face this question earlier rather than later so that OurCampus could be built with a clear and direct vision. To overcome this, we thought about how our app could be used to exclude others, facilitate violent activity, or spread hate to others, and refactored our idea to make it very hard to do so (the only data accessible to other users is the phone numbers of those in their full event groups). At the same time, we wanted to make the app as user friendly as possible. Designing an app which was both inclusive and intuitive was one of our greatest challenges, but by the end of the hack we had managed to do just that.

Some other challenges we faced were associated with the remote aspect to this hackathon. Communicating solely through Discord and Zoom obviously made staying on the same page as one another much more difficult than if we were all in the same room. However, we soon acclimated to a virtual hackathon environment through periodic group meetings and check-ins and managed to develop a productive and collaborative workflow.

The challenges we faced along the way of building OurCampus have no doubt made us better programmers. Because of them, we have learned about the importance of thorough planning in advance, prioritizing the needs of our users, and working in a remote environment. We are very happy to have learned so much all the while creating a fun application we hope students will love.

Accomplishments that we're proud of

This project featured many accomplishments to create a final product we are all proud of. For some of us, this was our first time using React or even our first time creating an application. After many meetings deliberating the focus of our project, we finally came up with an idea for a useful application which would connect those around us. This breakthrough was the launch point for our success, and one that we are very proud of.

In pursuit of making our service accessible to every user, creating a simple, one-page interface for the core application is very gratifying to us. When we began designing the layout of our application, we had many different webpages for the different features of our application. Over time, we were able to merge the functionalities of these pages together, resulting in the final product that is OurCampus.

Finally, it was very rewarding to dig into new APIs such as Twilio and MonkeyLearn, and be able to fully incorporate them into our application so OurCampus reached its full potential. The ability to automatically send text messages to all event members using Twilio and use machine learning to categorize new events using MonkeyLearn helped create an app that requires minimal involvement from the user to achieve the end goal -- meeting new people. All in all, we are all very pleased with the work we put in over the last 24 hours and couldn’t be happier to present OurCampus.

What we learned

As first-year students, we are all relatively new to hackathons and full-stack projects like OurCampus, so it comes as no surprise that we learned a great deal in a variety of areas. For most of us, this was our very first time using React, Firebase, and Redux. Over the course of the hackathon, we picked up a lot of knowledge in using these three tools to create powerful applications. Also, OurCampus includes several APIs and tools we were previously new to. Some examples include: Twilio, MonkeyLearn, and Materialize CSS. This project helped us gain skills to use these tools and others like them.

Additionally, along with the challenges of working remotely, our entire group learned a lot about virtual team-building and collaboration. Although most of us in our group have never even met each other in person before, this experience helped teach us how to build strong bonds virtually in a short amount of time. We also learned to find a productive online workflow. Throughout the hackathon, we found ourselves becoming increasingly organized and having a consistent understanding of each other's work.

Hack@Brown2021 was a huge learning experience for our entire team. We are all very thankful that we participated in this event as we all feel more mature and experienced as programmers and, just as importantly, as teammates.

What's next for OurCampus

We believe big things are in store for OurCampus, both in terms of functionality and in terms of scale.

We are proud of our ability to use Twilio to connect people in events through text, but we have plans to streamline the logistics of event planning even more. Instead of texting group event members each other’s phone numbers, we plan to automatically generate group chats that every member of the event is included in, and text links to those group chats using Twilio. We are undecided about whether to implement our own group chat software or use another API, but we believe this addition will allow users to feel extremely safe using the app, as their phone number is completely hidden from other users.

Although we initially intended for this app to be used for just Brown University students, we see potential to scale this app to many other universities. Using Google Authentication, we can confirm that each person joining the app belongs to the campus they claim to be on, and then direct the user to a unique OurCampus page for their university. At the end of the day, we are extraordinarily proud of our work so far building OurCampus, and see so much room to grow!

Built With

Share this project: