"Mealswipez" is a web application that uses ingredient filters and a dating app-style swipe interface to deliver recipes to users from the Spoonacular database. Users can login with Facebook and input the ingredients that they have into the app which then dynamically generates recipe cards for the user to swipe through. This was a group final project for Comp 20 - Web Development.

Problem Statement

Create a web application that addresses a relevant problem in your life

Solution

A Dating app-style web application that allows users to quickly swipe through recipes that fit their search criteria

Skills

• Javascript (Frontend)
• Node.JS / Express
• Facebook Login API
• MongoDB
• Design / Branding

Design Process

We knew from the start that we wanted a swipe-away card style interface for the user to curate their recipes. This drove the remainder of the design, resulting in a simple interface styled after a mobile application. Mockups were made in Adobe XD and then implemented into static pages which were then transformed into ejs pages to be dynamically populated by our NodeJS backend. We also knew going in that we wanted to use Heroku for hosting because it pairs nicely with NodeJS.

Features

The core of the application is the homepage where users are able to curate the recipes that fit their ingredients using a simple left or right swipe gesture. Having users authenticate with Facebook allows us to save a user's current card stack, ingredients in their pantry, and their saved recipes for later viewing. This leads to phenominal cross-platform compatability since the user can pick up right where they left off on any device. To implement our database, we chose to use MongoDB since we learned it in class but for a production application we would probably have used a SQL database. Unfortunately, since this was a class project, I cannot release the code and the application has been taken down so as to avoid Spoonacular's API use fees so you'll have to take my word for it when I say the user experience was smooth and intuitive.

Improvements

Given that this was a class project and we were on a tight schedule, there were a few minor features that had to be dropped in favor of a more robust working demo. Had development continued, we would have created an algorithm to find higher-resolution images of a recipe when Spoonacular's were low quality, created an interface for viewing a recipe's steps that matched the branding of the app instead of linking to the external recipe page, and added more robust recipe library curation features for after the user saves a recipe.

Takeaways

Creating an application like this in a group setting was an extremely invaluable experience. There were plenty of merge conflicts and long discussions about the direction in which to take the app but that is what made it a success in my mind. We were able to come together and deliver a working app that didn't sacrifice any core features on an extremely tight deadline, and it looked good too!