Gmail Wrapped

Home Page
Sign Up Page
Profile Page
Main Page (Loading)
Main Page
Search Example
Summarized Email Example
Gmail Wrapped Logo
Figma Design Layout

Inspiration

As full-time students, it gets frustrating opening up Gmail to hundreds of unread content every day – we can only imagine what Professors might receive on their end. Taking this into account, we were driven to make accessing important emails easier and faster for all Gmail users. Taking inspiration from Spotify’s annual “Spotify Wrapped,” we got started on an application that would “wrap” together these important emails.

What it does

To get started with Gmail Wrapped, you’ll be required to create an account. This will ensure that all your data is protected and visible to you only. With your account, you can sync up multiple Gmail addresses using a one-time authentication for each one you want to connect. Gmail Wrapped accesses all your emails only after your consent. From there, you can create your own categories of emails that you want to see by going to your profile and adding keywords to the “keywords” section. For example, as students, we’d want to see emails that fall under “internship acceptance.” It’s all up to you how you want to categorize your emails! Gmail Wrapped uses AI to filter through your emails using your keywords and adds them to your new organized inbox. You can also ban keywords to filter out spam. The organized emails will show on the main page for you to access either by opening up each category container or by searching for a specific word in the search bar. If reading through emails gets too tiring, we also implemented a “summarize” feature so that you can still get the email info you need, just in a quicker way. Now, you're all set to go. Happy reading!

How we built it

We decided to use ReactJS for the frontend. Our front-end developers used Figma to lay out our base design before getting started, making sure that we could keep track of every element we wanted to implement in our application. For the backend, we utilized GmailAPI as well as OpenAPI to filter through all emails using personal keywords. We also used Firebase on the frontend for the authentication factor.

Challenges we ran into

Our team had never worked with GmailAPI nor User Tokens before, so learning this was a difficult starting point. After continuing to play around with it and becoming familiar, we were able to successfully implement the data into the application as intended.

In addition, our front-end developers were new to ReactJS, but our back-end developers were pretty familiar with it. After some quick teamwork in teaching and learning, they figured it out fairly quickly and got the ball rolling to make the application aesthetic and user-friendly.

Accomplishments that we're proud of

After connecting the back-end and front-end, we were extremely proud to see the UI working in a seamless and aesthetically pleasing manner. The interface offers positive engagement with its simplicity and effectiveness in its design, so it was great to see it all together for the first time. At the end of it, we found ourselves a lot closer with one another than when we started. With our teamwork, we were able to navigate through our challenges by assisting one another where we could and ensuring that everyone had a memorable part in the project where we could all learn from each other.

What we learned

As mentioned before, our front-end developers learned how to use ReactJS for the very first time with this project. Our back-end developers expanded their API knowledge by implementing GmailAPI and User Tokens for the first time. For the entire team, we found ourselves becoming more familiar with how to use Git, especially with pushing commits and merging branches, so that we could combine all our efforts!

What's next for Gmail Wrapped

Apart from having a “summarizing” feature that wraps up the info in an email for you, we also want to implement a “reply” and “delete” feature so that you can respond and remove emails on the same application. This would make the application more operable and convenient for users. For even more convenience, a future implementation would also be to push the application to be accessible on mobile devices as well. Finally, though its name right now is “Gmail Wrapped,” our team would love to expand the application to apply to all email providers so that you can get more efficiency and seamless management out of all your email addresses!