Sinatra: Building a Natural Hair Subscription Web App

Ifeoluwa Akinremi Wade
4 min readJul 21, 2021

So, I’ve made it to the second Flatiron project. I am going to build a CRUD, MVC app using Sinatra. The project requires:

  1. ActiveRecord with Sinatra.
  2. Multiple models.
  3. At least one has_many relationship on a User model and one belongs_to relationship on another model.
  4. User accounts — users must be able to sign up, sign in, and sign out.
  5. Validation on uniqueness of user login attribute (username or email).
  6. User to have the ability to create, read, update and destroy the resource that belongs_to user.
  7. Users can edit and delete only their own resources — not resources created by other users.
  8. Validation of user input so bad data cannot be persisted to the database.

Sinatra project: HaiRx

Let me briefly introduce my web app to you: HaiRx is a natural hair product subscription web app that will give black women convenient access to hair products. I wish there was such a thing around for me 9 years ago.

Anyway, on to the technical aspect of my project.

Gem Install Corneal

My instructor put us on to a gem called Corneal that was actually built by a Flatiron student, Brian Emory. Let me tell you, it came in handy!

https://github.com/thebrianemory/corneal

It cut down the time and stress it would have taken me to set up the appropriate workspace to get started on the project. It even provided a layout.erb and CSS! It had the whole Sinatra MVC set up all ready for use

Corneal installation/directory generation

My Sinatra project directory built by Corneal gem

The Actual Code

I had a hate-hate relationship with Sinatra while building this project. I had a hard time comprehending Sinatra RESTful Routes. However, in retrospect, I think deep down I actually enjoyed learning about RESTful Routes. The following diagram really saved my life towards the latter part of the project:

It didn’t become enjoyable for me until I got to the edit, patch and delete portion of my Subscription controller. But that’s probably because I was at the end of building my project 😜. On a serious note, I found the hidden input field aspect of PATCH and DELETE most interesting.

Hidden input field: A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.

The edit and delete action, with hidden input field included, were the most straight forward to code, in my opnion.

--

--