Study Together

Figma concept design
Figma concept design

Inspiration

I and many of my friends have fallen victim to frequent bouts of procrastination. Before the pandemic, we would hold study sessions to hold each other accountable. However, given the current circumstances, group study sessions are no longer possible. Holding them online through normal means like Discord or Zoom just doesn't do enough, as we never know whether or not our friends are studying.

When it comes to productivity, there are a variety of apps that aim to push the user away from procrastination. These apps usually hold a reward for the user when they are able to be productive for a certain amount of time. However, these apps are missing a social aspect that makes study groups so special. Our solution is to develop an app that encourages productivity while retaining the social aspect of group studying, allowing members of the group to call out those who are not focusing on their work.

What it does

The app allows you to create study sessions that your friends can join with a unique 5 character code. When the group studies together, a tree sprouts. When one or more group members exit the app (i.e. procrastinate by using other applications), the tree stops growing. When that happens, other group members can notify the slacker to rejoin the session and get back to studying.

While studying, group members can tune into live streams of lofi hiphop music from YouTube.

We weren't able to fully implement all of the app's features. While we got the basic systems down for the app like user authentication, group creation, and group joining, the problem we ran into was keeping track of group progress in realtime. This will be explained later in the post.

How we built it

We used Flutter for the frontend and Figma for prototyping the UI design. Since Firebase integrates easily with Flutter, we used Firebase as both the database and user authentication system.

We attempted to use Node.JS for backend and external API calls (YouTube API, Beatcaps API).

Challenges we ran into

Due to time constraints, we couldn't fully implement the external APIs. We also had trouble with listening to Firebase using NodeJS, which was vital for keeping track of each respective group's plant growth.

Accomplishments that we're proud of

We wanted to use a popular Flutter development pattern, so we did some research and learned about the Flutter BLoC pattern, which separates business logic from UI, and enhances scalability of the application. This was the first time we developed a fullstack application using this pattern, so we were pretty proud of how much we accomplished in such a short amount of time with only two members.

We were also proud of using Figma to design UI before actually implementing it into the app. We've never designed UI before, especially using an application like Figma. We did hours of searching online for different UI designs and incorporating those design techniques into our UI. While it isn't perfect, we're still very proud of it, and hope to improve on it next time.

Cameron is proud that he learned some backend development using Node as well as some JavaScript syntax.

We're also very proud of the art, which was drawn by our informal third member, Geoffrey Wang, our go-to artist (more of his work can be found here: https://www.instagram.com/geo0o0o0o/).

What we learned

We learned that having a small team really puts the pressure on all members when it comes to developing a product in a short amount of time. While we did not finish the application in time, we did learn how valuable it is to have other members working with you.

What's next for Study Together

We found that the BLoC pattern makes it really easy to redesign a lot of our internal systems, so revamping the app to make it more robust would most likely be the immediate next step. Following that, we plan on fully implementing all of its features.