Inspiration
On popular social media platforms, a polling trend has been spreading, encouraging groups of friends to create surveys that ask various “most likely to” questions. Our group of 15 sleep-deprived friends loves reviewing the results, and it always brings around uproarious laughter and heated debate. The only downside is the arduous process of creating these forms manually. Inspired by our experiences and the famous BeReal, we’ve created Not That Deep: a daily reminder that life doesn’t have to be so serious all the time.
What It Does
Every day, the app will share an AI-generated question that encourages connection between friends that is both lighthearted and low-commitment. This way you can share that quick connection even during the most busy of times. The question is in the style of “Who is most likely to…?” and players will get to vote for one of their friends (other users). After voting, the number of votes your friends got will be revealed, helping new friends to get to know each other better quickly and have an insight into what impressions you left on your friends.
There are 2 categories of questions—funny and flattering—one of which will be chosen randomly every day. As participants answer throughout the day, the polls will update and be displayed in our beautiful fisherman-style UI. We hope our questions bring you and your loved ones a good laugh. And if they don’t, it’s really not that deep.
How We Built It
Backend
We created our own API using Python, Flask, and REST principles. This way functions could be easily called by the front end when creating the user interface and team roles were optimized. To test our API, we employed Postman’s many methods and transferred information back and forth in the JSON format. We also connected multiple devices to the server through Ngrok. Most important of all, we generated most-likely-to questions by calling OpenAI’s API and implementing GPT into our program. We gave GPT prompts that would produce either funny or flattering most-likely-to questions depending on the random selection of the day.
Frontend
We started off by trying several different themes and designs for the UI webpage using Figma and eventually decided on an ocean theme with a blue-toning color palette.
We used React to update pages in response to user actions and data changes. We also communicated with the backend by calling our own backend API to send and retrieve data. In terms of UI, CSS was the star of the show, we defined classes and wrapping objects with css properties and made our UI look more dynamic by having water animation and winning spin display.
Challenges
One of our team members was out of province and working with us completely remotely. This was challenging because response time for project discussions was less immediate than if we were all under the same roof. Under the time constraint of a hackathon, this added to the pressure of completing the project on time. This situation was out of our control, yet we made it work. Calls were scheduled throughout the day and, during periods that we knew would require frequent communication, we worked independently with the video meeting running so we could reach each other with ease. We also agreed to dedicate the entire duration of the hackathon to our project. This meant limiting external commitments as if we were participating in person.
On a more technical note, we experienced networking issues with Ngrok that often prevented us from connecting multiple devices to the server. We found ourselves rebooting frequently to remedy this problem but soon accepted it was an inefficient and inconsistent solution. Additionally, there were various proxy issues. At this point, the backend development was nearly complete, so we decided to host locally and it sped up our testing process dramatically. We learned that, under tight time constraints, compromises will have to be made to ensure the completion of a successful project. But this is certainly not the end! We hope to deploy Not That Deep so that it can be enjoyed by everyone everywhere.
Accomplishments
We successfully called from an external API for the first time AND implemented AI into our design to enhance the user experience. We had never used APIs in the past, so it is with great delight that we present Not That Deep with question generation supported by OpenAI’s GPT.
We are also happy to share that this is our first big React project! We learned so much about component states and how to pass data onto children using props. We successfully used lifecycle methods to differentiate component behaviors between our answering and waiting phases. The answering phase means you have yet to vote, and the waiting phase means you’ve already voted and can now view results (you can’t vote again).
What We Learned
We learned how to create APIs! This was our very first time working with such interfaces and we learned so much about the REST architectural style and how to implement it into our design. By creating methods that manage phase changes, user data, and game logic, we are able to receive and respond to requests, transmitting information in the JSON format.
We also learned how to use CSS for styling pages. Web dev is still very new to our team, yet we managed to bring our site to life with water animations, a bobbing sailboat, spinning shapes, and hover effects.
What’s Next
Crowns and Clowns
We plan to award different trophies to winners of the daily question. For example, winners of a flattering question will obtain a crown while winners of a funny question will obtain a clown. These crowns and clowns will be collected over time and displayed to represent player scores.
Multiple friend groups
We meet different people from different parts of our lives! The future of Not That Deep will include the option for users to be members of multiple friend groups. This way everyone gets a share of the fun without the awkwardness of having to mingle with strangers who don’t know each other.
Invite option / Group code
To support the above-mentioned functionality regarding various groups, Not That Deep will introduce an invite option or group access code to verify users’ authorization to join a group and prevent unwelcome guests.
More secure login
To secure user accounts and ensure fair voting, Not That Deep will implement passwords on top of the current username system.
Custom questions
Inside jokes are what make friend groups so unique. Soon you’ll be able to keep the memories alive by entering custom questions into Not That Deep after the “Who’s most likely to…” question starter.
Seasonal UI themes
Holidays are our favorite and we can’t wait to introduce new color and design themes throughout the year. From Valentine’s Day to the Lunar New Year, watch as backgrounds and floating elements change to reflect the festivities.
Log in or sign up for Devpost to join the conversation.