DEV Community


Building a Web Application with Sinatra

nicklevenson profile image nicklevenson Updated on ・2 min read

Welcome to Recipe Freak, my first web application.
Alt Text

My first web app, built in Sinatra, allows users to create, share, and do other fun things with recipes. It's essentially a social media for recipes.

A video walkthrough can be found here:

This is my second Flatiron School project, and my first web application. I started my app with the gem 'corneal' which gave a very convenient template for a Sinatra/ActiveRecord based, application. From there, I tweaked things to what I wanted. I began by outlining my application, defining all the models and their relationships. It was tough to decide what should be attributes and what should be separate models, but I figured that making more models would give me more flexibility down the road. Though they weren't perfect at first, the relationships ended up being as follows:

User: -has_many :recipes, has_many :likes

Recipe: -belongs_to :user, belongs_to :cuisine, has_many :steps, :has_many likes, :has_many bags

Cuisine: has-many :recipes

Ingredients: belongs_to :recipe

Steps: belongs_to :recipe

Likes: belongs_to :recipe, belongs_to :user

Bag(for a feature of adding a recipe to a grocery list): belongs_to :recipe, belongs_to :user

Once the relationships were created, it was time to create database migrations to fit these models. After that, it was time to work on views and controllers. I didn't feel like working on migrations or controllers was that difficult, but the views proved to be an excellent challenge.

Using erb files was liberating since I could embed ruby code and send instance variables from the controllers to the views. I also included a few JavaScript functions for the front end to manipulate the DOM. I had to let the user dynamically add and delete ingredients, as well as adjust serving sizes for recipes. JavaScript was my only viable option for this. I also spent a long time with CSS styling, which was surprisingly difficult. I am sure once I start digging into CSS/JS fundamentals it will become more intuitive to organize my html elements for styling and DOM manipulation.

I learned so much from this project. having learned the concepts of http and routing, MVC, user authentication, good object oriented design, and more - the past few weeks have been a tsunami of information. However, I am understanding it more everyday. I ended up pushing my app to Heroku, which was the most exciting part of the project. I am so excited for the future and projects to come.

If you're interested in checking out the code, view it on github here

Discussion (0)

Editor guide