shoop

Logo

Inspiration

As COVID-19 cases are increasing and shelter-in-places have no end in sight, we are forced to stay at home and avoid contact with people as much as possible. As purchasing food and clothes are a necessity, we are required to make that dangerous trek to the grocery store or mall whether we want to or not. For college students or working adults with housemates, who may not necessarily be well acquainted with each other, different house members may visit the same grocery stores multiple times a week, leading to a higher exposure to COVID-19. Thus, having one person in a household run errands at one store is more efficient and safer for the entire household.

What it does

Our website allows roommates to add grocery items they are in need of and label them by priority, including urgently by today, tomorrow, or later this week. They can also note if the item is a personal item, such as razors, or a communal item, like toilet paper. The newly added item will be displayed on the left, sorted by store, showing its name and quantity along with previously added items.

How we built it

We began building shoop by creating a mobile and web prototype using Figma. After reviewing the interfaces of existing shopping list services, we compiled a list of user requirements, sketched our wireframes, and begun prototyping on Figma. Once we were satisfied with our mockup, we then implemented our web app using HTML, CSS, JavaScript, and Google Firebase. We used HTML and CSS to build and stylize the basic components, such as the form and shopping list components. Using JavaScript to deploy Google Firebase for the backend, users can POST and GET new items on their communal shopping list.

Challenges we ran into

A challenge we faced while implementing the front-end of the website was deciding whether to use a framework like React.js. Although in the end we decided not to, we realized using a framework would have helped us implement the dynamic aspects of our site more easily. We also struggled with deploying Firebase to support our backend. Despite Google having extensive documentation, it was difficult to comb through all the information to find what we were looking for.

Accomplishments that we're proud of

This was the first time the both of us worked on front end web development. As we live in California on the west cost, we are both proud for waking up early and staying committed to the entire duration of this hackathon!

What we learned

We learned foundational aspects of web development. For Eunice, she became more familiar with CSS and better at determining whether plain HTML/CSS/JS or a front-end framework like React.js would be more appropriate and efficient for a project. For Caitlyn, she also got more experience with HTML/CSS and learned a lot about the capabilities and complexities of Google's APIs.

What's next for shoppy

In the future, we hope to add a feature that can rotate and track which roommate has the responsibility to go grocery shopping for a given week or month. We also hope to implement a splitting cost feature that will calculate a roommate's costs based on the expenses of the household's communal items and the items they requested for themselves. As a web app, we would aim to have the shopping list dynamically update as new items are put in. Eventually, we'd like to convert our designs from Figma to a mobile app.