Recipe App - The Process

Note: This is a Heroku app, so it will take a while to load.

Visit the Website »

Overview of the Project

In my advanced information design class, we learned how to code front-end code within a model view controller (MVC) specifically Ruby on Rails. We followed tutorials for creating the app and then we redesigned the application using HTML and CSS.

Tools Used

  • Ruby on Rails
  • Amazon Web Services
  • Heroku
  • GitHub

My Design

Main Challenges

Adaptability/Consistency: This issue involves the ability of the applications design to adjust with the user. I noticed this problem while testing the application myself. Initially in the application, if the user entered a long description of their recipe, the recipe box on the home page would break structure and the text would push up over the image. The main challenge was figuring out how to fix this.

Tutorial Videos

I followed the instructions in the videos from my professor to install Ruby on Rails and create the recipe application. Following these videos took up the majority of the time spent on this short project and was the main focus, because I was learning a completely new software while using new tools including GitHub. After completing the application and its design, I followed additional tutorial videos to upload the application to Heroku and connect it to Amazon Web Services.

The Basic Application


The original recipe app, after I initially created it, was bare bones. The limited design of the application was strictly for getting the app up and running. The original app's design is pictured below.


Original Home


Original Individual Recipe


In order to begin improving the design, I brainstormed different options. I decided to keep the design of this recipe application minimal as I knew I would not have as much time to create it and I was still learning how to implement HTML and CSS within Ruby on Rails.

My Process

  • Create low-fidelity wireframes to brainstorm

Home Page

For the home page, I decided to add a hero image and include the recipes underneath.

Individual Recipe Page

For the individual recipe page, I decided to use the image the user uploaded as a background image for the title. I listed out the recipe underneath and included the picture the user uploaded at the bottom.


Individual Page Sketch

Creating the Application

After sketching out the design, I started implementing it by changing the HTML and CSS of the application.

This section of code to the right is how I made the recipe boxes on the home page change based on the width of the recipe description text. I used Ruby code within the HTML to call the recipes and change the length of the recipe boxes.


Screenshot of Code

Final Design

Here are some screenshots of the final design.

Note: This is a Heroku app, so it will take a while to load.

Visit the Website »


Individual Recipe Page


Home Page - Recipe Boxes