Shopstik: A Sinatra Portfolio Project

What is “Shopstik?” A simple, friendly Sinatra web app that allows users to create secure personal accounts and create lists, edit, and delete items. This project was exciting in that it is the first web app that I’ve built. Here’s an overview of the project and how it works.

Defining the Functionality and MVC

I spent some time up front on my white board deciding what I wanted my app to do, what level of complexity it should have, and what views I needed.

Models: In the end, I decided on two classes: a User class which would have_many :itemsand an Items class which would belong_to Users. The defined migrations are pictured below.

CreateUsers migration
CreateItems migration

Views: Developed for a CRUD app, there are erb files to support creating new users and items, viewing items in a list, editing single items, and deleting items.

Controllers: There is a Users Controller and Items Controller which inherit from an Application Controller (configuration defined, below).

User Experience

Welcome and error messages: Since Sinatra does not come with flash messages like Rails does, I used the ‘rack-flash3’ gem to have session-based flash messages for user signup and login.

HTML development and Mobile-First: Since many companies take a “mobile first” approach to responsive app and website development, I tried my hand at working with Bootstrap templates as a first attempt. I found good sources of inspiration at This effort resulted in a consistent clean and simple UI, pictured above and below.

For more information about this app visit my Github repository or view this video walkthrough. Thanks for reading!