Once Upon a Chat

Home Page
Wrapped

Inspiration

This past summer, I worked as a summer camp counsellor. All the counsellors communicated on a WhatsApp group chat. The group chat became a special place and in the months into the fall I found myself going back to the group chat to see my favourite moments and relive the group chat. Once upon a chat makes this process easier and more social, instead of scrolling forever the moments are brought to you, and special moments can be shared back to the group chat.

Check it out here: https://uofthacks-qe27mnmkmq-uk.a.run.app/

What it does

Once upon a chat prompts you to import a group chat's history, and then presents a Spotify Wrapped-style series of key moments, history, and statistics about your group chat. Your favourite moments from the chat can be saved to your dashboard or shared back to the group chat for everyone to see.

How we built it

The website was built using next.js with Typescript. On the front end we used a mix of Tailwind and native CSS for styling and used the react-wordcloud library for our word cloud. The back-end routing was handled by next.js, but the accounts, database and authentication were through Firebase.

Challenges we ran into

One of the biggest challenges has been the formatting of the WhatsApp message export. It exports to plain text and the format is ambiguous, so we've had to fight against a loss of information. Another challenge has been the analysis of the data. For example, when creating the word map it was common for a group chat's most common's words to be 'the', 'and' or 'where'. To account for this, we compared word frequency in the group chat to those word's frequencies in the English language as a whole to make the top words meaningful to your group chat.

Accomplishments that we're proud of

We are proud of dockerizing and deploying the app with a full frontend and backend with user login and a real time database. Managing to successfully parse the WhatsApp messages, being a major challenge of ours, is also a proud accomplishment. Another goal we set for ourselves was to bring the feeling of nostalgia and retro-ness into the UI design, and we are very proud of accomplishing this.

What we learned

Many of our members had little experience with next.js and React, and no experience in Firebase and tailwind. The 36 hours were of learning new technologies and those more familiar, teaching others.