Clove

We are Clove - A personalized recipe-sharing social media platform with weekly meal planning and automatic cart creation functionality.
The home dashboard. You can search for and view recipes, look up accounts, and plan ahead on meals out.
Viewing the details of a recipe to add it.
Looking up channels or popular accounts for their recipes. Clicking on any account gives a pop-up with their recipes.
Populating the dashboard with recipes for the week using the add functionality.
Checking out through the preferred grocer or getting a pdf list of ingredients for personal use.
This is the kroger authentication page which connects your kroger account to Clove.
This page shows if the process of adding items to the cart was a success or not and then redirects to the grocer's page for secure checkout.
This was our initial UI design. Of course, as we progressed our layout evolved to meet user convenience.
This was our initial back-end plan, and with the help of Lambda functions and Dynamo DB, we made it very adaptive to any form of data input.

Inspiration

Clove was inspired by an issue shared by all its members: grocery shopping is too tedious. The process of finding a recipe, hunting for the hundreds of ingredients and commuting to multiple stores - especially during a pandemic such as now - is a pain for anybody. We aimed for a simple, but impactful solution. By integrating a social-media platform for recipe sharing with an automated grocery compiler in a user-friendly web app, we felt that we could meet the needs of those who just don’t have the time to spare for long grocery trips and inefficient meal-planning or those who simply look for a new culinary adventure every day. With a goal to create an application with a touch of playfulness and powerful functionality, we envisioned Clove as an all-around user-friendly web application for day-to-day convenience.

What it does

Clove serves to fulfill one task: make grocery shopping easier. Biding by this mentality, Clove brings meal planning and the joy of finding new recipes together in an intuitive interface. Users can use Clove to discover exciting recipes while Clove works behind the scenes to create a shopping cart around the ingredients used in your recipes. Clove also takes your list and automatically searches for the products you need in order to make your grocery shopping simple and efficient. Clove takes the tedious job of compiling a list of groceries and transforms it into an enjoyable task as numerous features simplify the job at hand while providing an elegant UI.

How we built it

Clove was built on a variety of technologies. Initially, front-end design was done on Figma, focusing on the major parts of the app. From there, our team split up front-end work and back-end work amongst ourselves. The Front-end was built primarily off React, MaterialUI, and CSS with data storage in Redux. This front-end was then set to communicate with the backend, running multiple services such as DynamoDB and Lambda. The line also blurred between front-end and back-end integration as we included authentication technologies through AWS Cognito/the Amplify Framework. Communication was done through JQuery and XMLHttpRequest, both of which helped facilitate multiple HTTPS requests. In order to achieve the automated cart functionality, we integrated our recipe-finding and weekly-planning services with the public-access API’s created by grocery companies such as Kroger and Walmart.

Challenges we ran into

Clove ran into a few challenges working with the AWS API. Our team was mostly new to using AWS so we saw a steep learning curve that took some time away from functionality. The React development process was especially slow at first due to some issues with project setup in the beginning, however, as we progressed, we soon gained momentum. In addition to that, we struggled with the grocer APIs. The documentation was clean and easy to read, but our lack of professional development experience made it a little difficult to understand the reasoning behind and the usage of certain important features. We lost a large amount of time in trying to explore some very new territory and argued about giving up that functionality, but ultimately decided that we would keep trying as exploring new territory is what a hackathon is all about! :) Eventually we were able to figure out how to use the APIs and it turned out even better than we expected. With cooperation and teamwork between all our members, we were able to turn difficult situations into memorable ones.

Accomplishments that we are proud of

Clove was actually the first time a few of us encountered/actively used technologies like DynamoDB and Lambda and that quickly became a fulfilling experience in itself. Furthermore, considering the time span, it was both stressful and exciting to learn these technologies to get to development as soon as possible.while retaining the information for later use. The UI design aspect in particular shined in our project which was an equally pride-worthy moment. In addition to that, we were very, very happy to get the API functionality down for adding automatic cart functionality to our app. It was a struggle, but the fun and worry in pulling something off at the very, very last second was an amazing experience for us all.

What we learned

As a team, we undeniably learned many new things about newer technologies that shaped the course of our project. Outside of our code, we learned more about the time constraint and the importance of planning/sticking to the plan. We saw ourselves drifting towards more ambitious goals, but learning to stick to the essentials and create something that simply works was a great learning. In essence, we learned the importance of making a product that is impressive, scalable, and dynamic in order to maximise effectiveness. In terms of technologies, we learned how to use a multitude of new APIs, we learned how to use AWS Lambda functions, Dynamo DB, and S3 alongside github pages in order to host our web application and store data in the back end. Alongside that, as we were starting to run out of time, our front-end developers worked with a lot of back-end and vice versa - so it served as a chance for everyone to explore something new and out of their comfort zones.

What's next for Clove

Clove definitely has the capacity to go much further than it is now in the form of integrations, sophisticated data-storage, and further tweaking. Integrations wise, we were looking to have a more privatized database based on authentication tokens to provide a more personal experience. Data storage wise, we were looking to separate the stores for users and recipes to create a more centralized feed that could provide recipeed based on your interests. Also, we can add extra user functionality that makes it easier for users to find recipes and add them to their planner. On top of that, we were only able to access the public APIs so we are looking into how we could integrate our current product with restricted-access APIs of companies such as Instacart in order to further develop Clove’s ease of use and functionality.