With the new school year fast approaching, many of us are looking for new ways to study and meet new people, especially after the last few months of schooling were disrupted by covid.

Often, group study sessions are unproductive and hard to schedule. We hoped to solve these problems with our application which pairs users based on subject interests and availability.

What it does

  • creates profiles for users to display information such:
    • Subject interests
    • Subjects that need improvement
    • Availability on a weekly basis
  • Matches users based on subject interest and availability in hopes of more productive study sessions
  • Allows users to meet new people

How we built it

Initial UI was drawn up using Figma (project link), which allowed us to better visualize all of the components we wanted for our app, and gave us a guideline to creating a visually appealing layout

Afterwards, this was used as a reference for what components were needed, and HTML pages were created for each of the major components.

The boxy appearance of the web app is mainly due to the use of bootstrap, which made building the website faster than using traditional HTML

The database and authentication were both handled by Google Firebase. Relying on this single dependency for key components of the project, as well as hosting the project through Firebase, greatly streamlined the development of this web app.

Challenges we ran into

Initially, we hoped to implement all of the features we had initially mapped out, but realistically, with the timeline, it was impossible for two people to make every component fully functional.

Initially, we hoped that there would be a program that could effectively convert Figma designs into code, but there were authentication issues while trying to convert the design into React components, and attempts to convert the code to HTML left us with long lists of code with confusing class names and ID tags. This may have been due to the fact that the design was created with an appearance in mind rather than functionality, so the best course of action to take here was to simply use the design as a reference.

Bootstrap is a little fickle to work with, and I lacked experience with JQuery, which made it difficult to implement fully interactive elements.

Accomplishments that we're proud of

Both of us were able to integrate our work relatively seamlessly, and we were able to get the most important aspects of the web app up and running.

A while back, we had purchased some game assets and were pleased with how well they worked in web development.

This project was kept relatively well organized, and that was thanks to properly naming files and variables. In the future, it would be ideal if we could continue to maintain such an organized and efficient workflow

What we learned

Often, when searching documentation, it’s tempting to open the first link and just use that as the solution. While trying to build a collapsing navBar, the first documentation I found was for a premium feature on a bootstrap framework. After doing a little more searching, I was able to implement the feature I wanted with just HTML, CSS, and JS.

Something else that was pleasantly surprising was the amount of code that could be reused. Many of the features we wanted to implement had different functions but had the same logic behind them. In the future, this knowledge will be useful for creating more applications with modular code

What's next for Study Tinder

  • planning group events
  • Adding a calendar feature
    • Ability to add assignments and tests to help keep better track of them
  • Homepage with a dashboard to give users a snapshot of new events and messages
  • Chat service
Share this project: