Inspiration
Our inspiration for this project came from noticing grocery stores that have set restrictions on the amount of people allowed inside at a time. This has resulted in lines forming outside of the store which may be unsafe. We wanted to create an app that could disperse the crowds and let people safely visit their grocery store.
What it does
Queue Up is a web app that can be used to help consumers virtually queue to enter a grocery store in order to avoid waiting in large groups outside the store. The app takes the user to a Google Map which has markers of all the grocery stores in their area that are currently using Queue Up. Once they select the store they wish to queue in they are taken to a ticket page. Users are prompted to enter their name and phone in order to generate a unique ticket. The app will send them a text with a code that can be entered by the store when it is their turn to enter.
How we built it
Starting off this project we used Github/Git Bash/GitKraken as our version control. Since we were all familiar with Python, we decided to use Flask for our back-end framework. Flask connected our HTML/CSS/JS files in order to create the app seen above. To handle the data of the various grocery store locations, customer names and customer phone numbers we first created a local MySQL database. Once that database was connected, we wanted to move the database up to the cloud. We used Google Cloud SQL as our cloud-base database. Now that the Flask app and database are set we put all the code on to pythonanywhere to get the whole app hosted.
Challenges we ran into
This was our first time building a web app from the ground up and came with its set of challenges. Flask proved to be tricky and we spent time trying to understand how to route pages correctly and what the POST/GET methods purpose was. Google Maps also became a sticking point when we tried to drop specific markers. Maps needed a database of locations to pull from in order to generate the marker, but the nuances of the API's JS had us scratching our heads. At the end of this project we were stuck on getting the app on to a cloud service such as Google, Heroku or Azure, because those services couldn't see our flask application file. In the end we ended up hosting the code to pythonanywhere.
Accomplishments that we're proud of
As stated above, Google Maps was difficult to connect data to and drop markers where we wanted. A huge break through was when the locations in our mySQL DB started to appear on the map and we could move forward in connecting a ticket system to that location. Another breakthrough was when we were able to upload the code on to pythonanywhere and have our database reconnect to the app. We could see our app running completely on a website!
What we learned
Throughout this hackathon we tried many new languages and APIs. Our main technical skills were learning how to use Javascript with the Google Maps API and using Flask for other routing purposes. While we were generally familiar with HTML/CSS, we used new Bootstrap and JS scripts that we had to learn all the nuances of. Some of these scripts involved using Twilio to send texts to a mobile devices out from the webpage, which was the first time any of us had used Twilio. Additionally we learned new SQL queries, and how to tie a Flask app into a MySQL database. After we realized we needed a cloud database, we had to learn Google's way of running a SQL server in the cloud. Git and GitKraken were also tools we were familiar with, but this project helped us be even more comfortable using them.
What's next for Queue Up
We would like to add a time function that lets the user know an estimated time they will have to wait depending on their position. This would help people gauge when they should leave their home to visit the store.
Log in or sign up for Devpost to join the conversation.