Komi Intro 1: "Grocery shopping in a pandemic... we know it's tough."
Komi Intro 2: "Avoiding people can be hard, but we got you."
Komi Intro 3: "Komi lets you quickly find the best times to buy groceries, when stores are least busy."
Komi Intro 4: "Filter by favourites or distance // Stay in the loop with the 3 levels: 'Not Busy', 'A Bit Busy', and 'Very Busy'."
Komi: Let Komi protect you on your next grocery trip.
Komi Homepage (1/2)
Komi Homepage (2/2)
The Inspiration Behind Komi
Unfortunately, one of the biggest challenges throughout this COVID-19 pandemic has been avoiding people every time we step outside our door; what used to be walk in the park has become a hike through a winding labyrinth of people. Many outdoor social activities have been restricted or modified when necessary, including in-person school and recreational sports, but there is one activity that just can't be avoided: grocery shopping. No matter how bad the pandemic gets, everyone everywhere will always have to eat. In times where we need to minimize contact with others, grocery shopping routinely poses a threat to our health as well as that of others. So, our team created a simple and easy-to-use app that helps people avoid each other in hopes that will help minimize the spread of COVID-19 and reduce the risk of buying body fuel.
What Does Komi Do?
Komi essentially acts as a smart search engine that displays the busyness of stores nearby using data collected from Google Maps's Popularity Times feature. Komi retrieves all of the supermarkets and grocery stores within a specified radius of the user and lists them by busyness, with "Not Busy" being the least busy (shown when the store is at very low capacity) and "Very Busy" being the busiest (shown when the store is about as busy as it gets), all complete with colour coding to allow easy differentiation. Users can also star specific stores that they visit often or want to save, which can be filtered for right on the main search page. The radius within which to search for stores can also be changed, and there is also a search function to find a specific store.
How Did We Do It?
Before the hackathon, we brainstormed some ideas (aided by ConceptBoard), but ended up choosing the grocery store one we have now, as we believed it has the most potential and would be a worthy challenge. We also used Figma to visualize the UI/UX before diving into the coding. Other visual details such as the logo and other illustrated elements were created with the help of Adobe Illustrator and Canva.
During the bulk of the hackathon, we completed tasks individually or in pairs, always knowing that we could ask our teammates for support when needed. On front-end/middle-end, we polished design and data implementation, and in the back-end we worked on data extraction and organization. We also filmed and assembled a promotional video explaining our app and concept. Of course, we stayed up until 4 or 5 o'clock each morning.
Challenges we ran into
We ran into many problems along the way; here are some noteworthy examples:
- We could not figure out how to have our data in FlatList change in display when the actual data changed. Eventually, we figured out we had to implement a state and state change listener, but it took us a while to figure out the technicalities.
- Since the Google Places API only allowed a limited number of requests for its trial package, we chose to retrieve and store data manually since it wouldn't be reasonable to make actual calls to the database in the Komi prototype.
- For the welcome screen horizontal pages, the dimensions looked different on all our team members’ phones, so we needed to find a way to scale accordingly. By the end, we figured out we could import Dimension and use that to find screen width and height.
- Fonts were causing us difficulties when importing them
- Some icons and visual components were low resolution, so we needed to download the SVG files from Figma
- We were unfamiliar with flexBoxes, so it was difficult at first to align UI elements in the way we had originally visualized in Figma.
Accomplishments that we're proud of
Each and every one of our team members had zero experience in mobile app development or in React Native. Yet, in less than 36 hours, even with 5 hours of skimming the language beforehand, we were able to design, build, and polish a mobile app. Not only is Komi functional, relevant, and efficient, it is a project brimming with potential for growth and it can be expanded in a variety of directions.
Furthermore, as a team who has previously collaborated for one other hackathon (which was the first hackathon for half of the team, and the second one for the other half), we can proudly say that this one went much more smoothly. We have developed our teamwork skills when working under pressure. Some of us even switched roles (front end to back end and vice versa), yet we still adapted quickly to effectively complete the project.
What we learned
- Creating a mobile application using React Native
- Designing a mobile app (especially in comparison to web app design and development)
- Making API queries and fetching useful data from the internet
- Using Figma to plan out the interface and to organize the project
- Installing Echo in the project and using it to reference our mobile app interface
- Creating animations and logos using creative software
What's next for Komi - Your Grocery Shopping Helper
- Komi could be upgraded to predict when a location will be busiest at some point in the future to help users plan ahead using the Popularity Times data from Google Maps
- More location types such as parks and restaurants could also be added into the database to expand Komi’s applicability and appeal
- The user experience could be upgraded as well by adding an interactive map and user reviews
- Partnerships with local businesses could help increase exposure of smaller businesses while simultaneously helping users find great alternatives
- Post-pandemic, people could continue to take advantage of our app. For instance, it can help introverts with avoiding crowded stores, or busy parents by avoiding long line-ups.