Over the course of the COVID-19 Pandemic, everyone's lives shifted from joyously socializing and interacting with friends and family to being stuck within the walls of our homes and being limited to essential travel elsewhere. Despite countless Government intervention, the disastrous effect of the pandemic only seems to worsen by the day. However, we believe that hard times can bring out the best in us. As a result, we wanted to develop a tool that encourages people to stay home so that we can return to our normal lives once again and save the lives of our most vulnerable. With the understanding that the most common essential travel is for groceries, we set out to develop an app that makes it easier to work with your friends and family to get necessities without exposing yourself and others to the virus.

Why We Named it Demeter

Demeter is the Goddess of the Harvest and presides over the grains and fertility of the Earth. In these trying times, humanity's tendency to help those around us is on full display. Relationships are tested and life-long friendships are built.

We wanted our project to signify the best in humanity, those who come to the aid of others, those who encourage us to be better, those who will come out stronger. Much like Demeter giving the hope of a full harvest, we wanted to signify that better days are coming soon.

What it does

Demeter is a Web Application accessed through logging into the website or registering as a new user. Once you are logged in, you will see your dashboard, which will allow you to create a new group if you are not already in one or join an existing group.

The meat of this project exists in the groups! Once you are in a group, you can then post items from your grocery list onto one master grocery list for all members of the group to view. Each item has two required fields for "item name" and "quantity" and an optional field for "comments". The list will grow as other members continue to add their items to the list as well. This is the list that the 'grocery picker' will refer to when at the store.

In the group dashboard, there will be a button named "volunteer for pickup", which can be clicked by any member of the group. Once this button is clicked, the group members will be notified that a member of the group is going to the nearest grocery store to purchase groceries.

On the 'grocery picker's' end, as they are purchasing groceries, they can remove purchased items from the list. Once they have purchased all the groceries, they can then deliver everyone's respective groceries to their doorstep! After the groceries are dropped off, the group will be disbanded and a new one can be created for the next grocery adventure!

How we built it

When we set out to make Demeter, we determined 3 key principals to lead us through the frustrating bugs, the sleepless nights and the constant design debates. Simplicity, Efficiency and Scalability.

We wanted Demeter to be simple to design, upgrade and debug. This meant leveraging the magic of Python and Flask to design a REST API for the needed backend endpoints. Furthermore, for a prototype application, the use of SQLite3 encouraged rapid development, testing and debugging.

For the front end, we used jinja2 templates as they integrate perfectly with the Flask backend and base HTML/CSS/JS. This was to limit the system overhead needed to run the application otherwise required by more bulky frameworks like React and Angular. The integration also allowed for concurrent development of both the front-end and back-end.

All these technologies and tools are used by major websites and companies. Netflix, Airbnb, Lyft are all companies using Flask. Netflix also uses vanilla JS for their client-side code and Github also uses vanilla JS. So as we expand Demeter, we are confident that our amazing tech stack will grow with us.

Challenges we ran into

With every team comes it challenges, and it was probably a good thing that HTN is online otherwise we may have punched each other! Nonetheless, our goal from the start was to play to our strengths to maximize our productivity. However, no development process is ever perfect, and we faced challenges but overcame them over the past few days.

A significant challenged we faced was figuring out how to assign tasks. Avi and Rishi being a strong full-stack developers, whereas Adshayan and Varun are stronger back-end developers. However Avi and Varun came into the hackathon with no knowledge of Flask, whereas Rishi and Adshayan have a strong Flask background, and insisted we built our project with Flask as it's easy to build a project on the fly.

It took a few hours to figure out what tasks we will all be doing but at the end everything seemed to have worked out great, with Adshayan taking lead on the back-end and Varun providing his Django knowledge to work on the logic, Avi taking lead on the Front-End with Rishi taking responsibility for integration of both ends.

Another smaller but crucial challenge we faced was on the back-end, figuring out our API endpoint design, what endpoints we need, don't need, how the logic will flow, how to set-up the relational database etc. This took hours to have a solid plan up and running, but with pure grit and motivation we were able to push through this challenge and many others. In the end we were able to make an incredible application with some amazing technologies and a great team!

What we learned

We came into Hack the North with a mindset to learn, absorb and network. All the workshops throughout the "Gear Up" period gave us a chance to do exactly that. Regardless of a win, we wanted to be proud of everything we learned, and after 36 hours of intense coding we are extremely proud of the challenges we surmounted and the amazing people we met in Hack the North 2021.

For Avi, Rishi and Varun, this was their first ever Hackathon, and for Adshayan this was his first ever MLH Hackathon. This was one of the key reasons why we learned so much. Planning out a project in a timed environment, learning effective and quick communication strategies, mastering our knowledge of using Git, and most importantly, learning how to work as a team. We now have a deep understanding on how important the management and planning contributes to the overall success of a project.

On the technical end, we all got to learn a lot about Flask and front-end design/development. Although Adshayan and Rishi had prior experience, they learned how to put together projects more efficiently and worked on a project quite different from what they had done before. For Avi and Varun, with their first exposure to Flask, they learned how amazing this framework is, with its endless possibilities. Furthermore, we all had a go at some form of design and development for front-end. Although, we may all have pulled some hair out in the process, learning how much care has to be put in a user interface meant to be simple gave us all a newfound respect for the UI/UX design of websites we visit.

What's next for Demeter

You better keep your eye on this project because we have a lot of ideas planned that we were not able to implement in this Hackathon!

We plan on refining our back-end logic to optimize database usage, add more endpoints and add much more functionality. We also plan on improving the front-end design to make it as welcoming and user-friendly as we possibly can. But most importantly, two API integrations are something we definitely have coming soon.

First one is using the Google Maps API to allow users to view their nearest grocery stores, get directions to the store, and even use the API to plan out the optimal route for the runner to deliver groceries. Second being using the Facebook Messenger API to allow group members to be able to communicate with each other and the runner while they're a part of the group.

We have a lot coming, and this is not the end of Demeter, stay tuned!

Share this project: