We were inspired to create Q... after hearing of our parents' struggles waiting in long lines to get groceries for our families in the midst of the COVID-19 global pandemic. Despite the spacing strategy that stores currently use, physically waiting in line still puts customers at risk of infection because there is still a chance of infection even with the moderate distancing. With this in mind, we set out to create something that would mitigate this problem.
What it does
Q... is an application that uses the Google Cloud APIs and creates a virtual line up so that customers can wait from the safety of their cars. By providing customers with an option to remotely add themselves to a queue, we can make it easier for people to maintain social distance in this challenging time. On our web application, customers would be able to compare the capacity of multiple stores and join and leave a queue with a personalized BloackStack ID. Store managers would be able to better control the number of people they let in the store.
How I built it
Q... is built using both React and Blockstack. The individual user logins and IDs were created by integrating Blockstack with our React application so that users could maintain the privacy of their locations while also giving us a way to count individual customers. The functionalities and visual aspects of the application were made using React js and implement the Google Places API from the Google Cloud APIs library to retrieve a JSON file containing the resulting information from the user's store search. The Google Maps API is then used to create an interactive visual map of the user's desired stores. Once the JSON file has been retrieved, the application displays the store name and then stores the unique address of the user's store if it hasn't been already previously stored by a different user and creates a new virtual queue for the store. If the unique address has already been stored, then the user will simply add themself to the line-up at the selected store and then remove themselves from the queue when they enter the store.
Challenges we ran into
- Our team was quite new to React so we ran into the challenge of having to learn a large portion of the language as we went on creating the application.
- Our team had never used Blockstack before so at first, we didn't know how to use it with the React portion of the application.
- We ran into some trouble when making HTTP requests and with the Google Cloud API keys.
Accomplishments that we are proud of
We are very proud that we were able to significantly enhance our knowledge of React and web application development. We are also proud that we were able to successfully use Blockstack, as we had viewed using it as a seemingly impossible task when we first started the project due to its novelty to us. However, the accomplishment that we are the proudest of is that we were able to create something that can actually help keep people safe and have a positive impact on the world around us.
What we learned
- Programming with React
What's next for Q...
In the future, we plan on adding more features as well as adjusting our application according to the changing conditions. Looking into the future, when strict social distancing policies are no longer held in place, yet it is still important to maintain social distancing to decrease the risk of a second spike, Q... could make it easier for stores and essential services to maintain social distancing measures and keep everyone safe. ...