-
-
ZotConfessions
-
Software Used
Inspiration
UCI Connections is an essential aspect of the UCI Community. It provides laughter, news, unpopular opinions, and most importantly, confessions. However, due to the sheer popularity, number of submissions, and the inefficiency of an administrator manually filtering out undesired confessions, UCI Connections is two months backlogged. This means that if you were to submit a confession right now, it would likely show up on the UCI Connections page around two months later. With our love for UCI Confessions and values upheld by UCI’s inclusion and diversity, we decided that we would love to make a more efficient method to post these confessions to connect UCI students while sustaining UCI’s morals.
What it does
ZotConfessions is a centralized method of posting confessions, rather than through the multitude of direct messaging and Google form methods that make it tedious and efficient to order and filter out. With a simple yet impactful interface, users can easily spill their confessions anonymously which automatically is sent to our servers, eliminating the need for manually finding submitted confessions. Users are welcome to submit more than one confession if desired.
Once the submissions are sent to our servers, we use Google APIs, specifically Perspective, to automate the process of filtering out comments that violate UCI’s values. Confessions are given a percentage rating by a machine learning algorithm of toxicity, and if a confession is approved, it will automatically be stored in a log of submitted confessions. Additionally, an automatic image is formed with the use of the Pillow library, which mimics the current image format on the UCI Confessions page. Confessions submitted through our app are scaled to fill the image space and have a number corresponding to each submission. The image is then ready to be saved and posted for all UCI students to see.
How we built it
Frontend: With the use of Figma, we originally designed ZotConfessions as a website using React where students can submit their confessions. However, we realized that students would be more willing to use an app, resulting in us changing our approach to creating an app with the use of React Native. We wanted our app to be as simple as possible, resulting in us designing three screens: the home screen, confession screen, and submission screen.
Backend: On the backend, we built it by first allowing the program to handle user input. The text the user entered on the frontend will go through our Ngrok server which is then caught by routing code in our backend. From there, the code will take the body of that request, which stores the data that we want to use, and then sends that into our Google Cloud API, Perspective. This API takes in our data, which is a block of text, and uses an ML based algorithm to analyze the text and deems whether or not the text is inappropriate. The API determines this by returning a probability of people that would recognize the comment as containing a certain attribute (“Toxicity”). If it is deemed inappropriate, the user’s message will not be displayed on the Internet. If the user’s message passes the API test then it will go into a text reader that will convert the user’s message into a formatted image. A counter is also established to track the number of confessions that are in the CSV file and thus displayed to users.
Challenges we ran into
A challenge we ran into was the designing of the screen on React Native, as our components were unscaled and located in unwanted areas of the screen. To improve this issue, we were extensively with flex to scale our components with different screen sizes and ensure that they are located in the desired locations.
A big challenge was trying to connect the frontend parts of our project to our backend. Since we were creating a mobile app using React Native in the frontend and Python Flask in the backend we could not resort to standard methods of using HTML as React Native did not support this. Eventually, we solved this problem by sending fetch requests from our JavaScript frontend to an Ngrok server hosted on the internet which was received by Python Flask in the backend.
Accomplishments that we're proud of
We are proud of the fact that we were able to build an app that is based on user input, automatically turning their words into images. With all of us being beginners, in terms of doing a Hackathon, we are proud we were able to just complete a working program using completely new technologies in such a short time frame, which challenged each of us to the max.
What we learned
We learned so much while creating this project, individually and as a team! Consisting of all beginner hackers, we are proud to be ambitious in learning and implementing new technologies throughout this hackathon to grow as hackers and as engineers. On the frontend side, this involved tackling UI/UX design through Figma, leveraging Expo Go, and countless developer tools in React Native to perfect our final design. For the backend side, we utilized Flask, Pillow, Textwrap, Google Cloud: Perspective, and Ngrok to ensure seamless integration with the app, an accurate machine learning algorithm to filter out toxic words/phrases, and a well-mimicked image of the current UCI Confessions Instagram page.
On the other hand, we learned invaluable experience on how to work as a team with a time limit. This involves a Gantt chart to prioritize and schedule deadlines, constant communication with each other, and adapting to solve unprecedented issues and implement new ideas. Furthermore, the team was able to learn Github for the first time, giving us the chance to share and integrate code from the frontend and backend for the very first time. Overall, this hackathon was the perfect opportunity to learn and implement new software, work with other programmers, and have efficient time management.
What's next for ZotConfessions
We would love to improve the scalability of ZotConfessions as UCI Connections is one of the most popular Instagram pages present on UCI right now. Storing data through the use of Google Cloud will not only ensure reliability in handling large amounts of data, it allows for easier data accessibility for multiple administrators as well as data security. We would also like to find a way to automate the posting process on Instagram for simplicity and efficiency, but we are currently limited to Instagram Terms and Services.
Another prospect is for our program to more closely mimic the current UCI confessions page images. Due to the time crunch and our prioritization of having a working program over a perfect design, we decided to set up a layout that could be improved and redesigned in the future.
We also want to have a max character limit, because there is only so much that the image can produce right now. If a user types more than 500 characters, right now, the text would continue printing, off of the image. Another feature we want to implement is a feature that can detect multiple submissions, that are saying the same thing. An example is if someone sends the same message one hundred times. Right now, the program does not handle that case, but in the future, there is room to fix that bug.
Log in or sign up for Devpost to join the conversation.