Skip to the main content
love4heroes

love4heroes

An app to express our gratitude to frontline workers using warm messages. Made for uOttaHack 4

––– views
- - -

Team of 4


Short Explanation

This app was created as a team for uOttaHack, Canada in 36 hours. When thinking about how we could make a difference within local communities impacted by Covid-19, what came to mind are our frontline workers. Our doctors, nurses, grocery store workers, and Covid-19 testing volunteers, who have tirelessly been putting themselves and their families on the line. They are the backbone and heartbeat of our society during these past 10 months and counting. We want them to feel the appreciation and gratitude they deserve. With this app, we hope to bring moments of positivity and joy to those difficult and trying moments of our frontline workers.

Project Goals

This project was made so the user is able to create a card and can save the card as a link, then the user can send the link to their loved frontline workers. The frontline workers can also see all of the cards on the "Warm Messages" Board.

Tech Stack Used

This project was built using Next.js, Tailwindcss, SWR, and Firebase. Personally, I think using these stacks is a great choice due to the lack of time and for simplicity. We only use the firebase for the firestore because it is simple to configure. Next.js is also a great choice because we can mix and match the rendering type that we are using. For the dynamic content such as rendering the card's data from firestore, we use client-side rendering and utilizing SWR to cache the data.

ss1
ss2
ss3
ss4

Spotlight

First Hackathon With 12 Hour Time-Zone Difference & Tight Time

In this project, I collaborated with 3 other teams that live in America. It's quite a challenge for me to fit in into their timezone so we can still work together. Also, there are only 36 hours to finish a functioning full-stack application.

team

Consideration for UX

We incorporated a library to simulate flipping cards, but sometimes the user didn't open it while editing. So we decided to make a UX improvement by opening it when user starts filling out the form.

love4heroesux

The Problems and How I Deal With It

During this project the largest problem is time management because we need to map out everything we need on the website, then develop it in just a short time. So during the creation of the application, we divide the project into little parts so it is still manageable.

There is also a tricky part when I was building a like button. I need to get the latest data on the likes from the database, then increment it. Also, I need to make a condition where each person can only like once. In the end, it was successful by utilizing local storage to store the state.

likebutton

Lessons Learned

After this project, I felt more comfortable working with firebase. Before, it seems jarring to set up firebase and firestore connection. But turns out it was not that hard, also Next.js has a built-in API route so I can implement SWR caching without the use of another library.

Because the rest of my team is American, I actually get to practice my English in this project. It was definitely harder explaining a code with another language 😁.