It goes without saying that Covid has led to vast changes in the way people conduct their everyday lives. As a result, even tasks as mundane as grocery shopping or going out for food take on a considerable amount of risk. Until now, consumers seeking to minimize that risk have had few options to increase safety during their shopping beyond wearing a mask and practicing social distancing. In addition, those seeking to avoid unsafe businesses and busy times of day have only been able to do so by guessing an appropriate time, or by having an unpleasant first-hand experience. With Pollen, we sought to take the guessing game out of safe shopping by crowdsourcing user data about the busyness and covid safety of businesses. By allowing users to rate safety, line wait times and upload images of store conditions, Pollen makes businesses more accountable, and consumers more safe. Even with the current pandemic, there are still plenty of people who have to be a “busy bee,” but with Pollen that becomes just a little bit easier.

What it does

Pollen is a mobile optimized web app that helps protect consumers from the COVID-19 pandemic. Pollen allows users to rate Covid safety, busyness, and share images of store-conditions. Users are able to rate overall safety and wait times on a sliding scale from 1 to 5, with those scores then being averaged and displayed to inform future users. In addition, we leverage Google Firebase to facilitate uploading images to a gallery, which then displays the 3 most recently uploaded images. This gives users an-up-to-date visual indication of store safety, and allows them to participate in keeping their community safe.

How we built it

Pollen’s front end was built using vanilla HTML, JavaScript, and CSS. The website is composed of two main pages, a search bar/query page listing local businesses, and a business-specific page which allows users to rate Covid safety and busyness using HTML input sliders and the ability to upload images using a gallery. The gallery itself was built in HTML and Javascript, and updates through Google Firebase to display the 3 most recently uploaded photos. The backend was composed of HTML, JavaScript, and a variety of Google firebase features.

For the back end, we wanted a way to store ratings and images in a reliable and easily accessible manner. After looking into different options, such as GCP bucket, GCP Cloud SQL, and Google Firebase, we decided to go with Firebase because of it’s lightning fast real time updates. We then dug through various documentations and Youtube Videos to build out functionalities that allow users to upload star ratings and images, and display the new average ratings and new images immediately on Pollen.

Challenges we ran into

The main challenge our team faced was the broad mix of experience of our members. Believe it or not, two of our members had never used HTML or CSS for a project before, much less pushed a project to git-hub or worked to merge front-end and back-end project files. Because of this, the entire time we were working we were also learning on-the-spot. However, the experience also pushed us to optimize our team work and our more experienced members did an incredible job of relating their experience to the newer participants.

Looking back, if we could revisit this project with more experience in front-end frameworks and various API’s, we could probably create a more technically complex result but we were very excited to build out the MVP version of Pollen in 36 hours.

On the back end, both team members got to experience using Google Firebase for the first time, and one of the team members learned how to use JavaScript for the first time. To get familiarized with Javascript and the Firebase framework, we watched many Youtube videos, consulted with hackSC mentors, and did lots of experimenting ourselves. A specific issue we ran into was figuring out how to allow the user to upload an image and update our image carousel with the 3 most recent pictures in real-time. To retrieve the most recent pictures from Firebase every time a user uploaded a picture, we tried using an array storing the recent images and using metadata, but settled on using the .limitToLast() function which satisfied our needs.

In addition, one member working on the backend had never experienced integrating the backend with the front end before, so navigating how to merge both pieces of code to form a complete web app posed a challenge. However, with patience, encouragement, and help from other teammates, we were able to combine our pieces of work to form our final product!

Accomplishments that we're proud of

The real question here is if there’s anything we’re not proud of! Despite having new hackers on the team and learning new frameworks and programming languages for our project, we were able to effectively synergize and finish a functional, useful product. In creating this we’ve provided our local community with the foundations of a tool that will hopefully reduce risk and ease the stresses of those trying to be Covid safe. Furthermore, every one of our members was able to learn a variety of new techniques for web-development, and will no-doubt be able to carry that experience into our future careers.

What we learned

Because 3 of our members were first-time hackers, there was a lot of room to learn new techniques. For our newer hackers, some of the most prominent learning experiences included learning how to build HTML and CSS documents, as well as integrating JavaScript functions into the overall HTML files. Our more experienced hackers worked with Firebase for the first time. Also, learning about best practices to use Github in a highly collaborative fashion to avoid merge conflicts (stoked that we had no merge conflicts) and figuring out how to work as a team to create a functioning product was a huge learning experience for us all.

What's next for Pollen

Pollen can be expanded so that it is useful to customers even after the COVID-19 pandemic ends. Currently, Pollen displays how busy a business is continually, meaning users have the information to avoid large lines and crowded stores. However, in the future we could potentially use the Google Places API to automate location additions, as well as utilize tracking data to better represent statistics on store busyness. With the right permissions, only users near a close vicinity of the stores will be able to add ratings or upload images to ensure that all of the data displayed on Pollen are legit. Additionally, businesses could be judged on other parameters in the future, such as service or cleanliness. The service also has immense potential for monetization, as businesses could promote themselves to customers much in the same way that they do on search engines and apps like Waze. Security also has huge potential for improvement, potentially use computer vision technologies to filter out any inappropriate images, and more.

Share this project: