After our school shut down all in-person activity, we were left at home without much to do except wait out the Covid-19 pandemic. We decided that we wanted to use our extra time to build something that could ameliorate the situation for communities.

What it does

Our web application allows users to update when they enter and leave stores, so that the elderly and vulnerable can easily see how many people are at a given store. This allows people to time their visits to stores properly in order to avoid large crowds.

How we built it

We built this project with React and a Firestore database. Our database contains a list of store documents, each of which has a name, current number of people, time last updated, address, and phone number. When the user clicks "Check In" or "Check Out," the number of people increments or decrements, respectively. The time last updated also changes to the current time. The user can also search stores by name to filter the stores that show up on screen, as well as create and delete stores (delete should usually only be used if there is a mistake in the store information entered).

Challenges we ran into

This was the first time either of us built a full-stack application in React. We had difficulties dynamically rendering store components from the database, both when the application loaded and when the user searched for specific stores.

Accomplishments that we're proud of

We're proud that we were able to get all of our target functionalities working: letting the user update when they're in the store, adding and deleting stores, filtering stores by name, and incorporating a responsive GUI.

What we learned

We learned how to read from and write to a Firestore database, as well as effectively use React props and state to achieve our features.

What's next for Covid-19 Store Tracker

Our next steps would be to incorporate notifications to remind the user to check in and check out when they walk into a store, in order to keep the number of people displayed accurate. We could also send notifications when a specific store has fewer than a certain number of people, to encourage users to visit at that time should they need to buy something.

Try It out



css, firestore, html, javascript, react

Devpost Software Identifier