Sinatra Web Application

For my first Sinatra project, I created a Content Management System Web Application for users and their collection of Analog Synthesizers.

For this application, I used the Sinatra framework with the MVC (Model-View-Controller) paradigm. Sinatra is a Domain Specific Language Web Framework that is Rack based. The MVC paradigm is a software design pattern that divides your application into groups of files that have specific jobs. The Models contain the logic of the web application that can manipulate your data. The Views are the front-end where the user interacts directly. These are .erb files (embedded Ruby) that can contain HTML, CSS and javascript. The Controllers are the ‘go-between’ for the Models. These files relay data from the browser to the application, and from the application to the browser. They contain routes that receive HTTP requests from the browser such as GET, POST, PATCH and DELETE. The ‘requests’ can be sent to Models to run code on them, then render the .erb (View) files for the user.

Active Record

Active Record is an Object Relational Mapping system (ORM). It allows software engineers to easily access and manipulate data in a database without having to know SQL. Active Record allows us to do a tremendous amount of work in a short period of time. There are many functions of Active Record, but for my application I stuck to the basics. CRUD

CRUD is an acronym for Create, Read, Update and Delete. Active Record has methods built in to allow an application to read and manipulate data stored in the database tables.


The file structure I used based on MVC is as follows:

First you’ll notice that there are multiple files for models, views and controllers. The reason for this is to separate specific ‘tasks’ into their own file to make your code easier to understand and debug.


user.rb is primarily used for validation and declaring the has_many association to :analog_synthesizers

analog_synthesizer.rb like user.rb it is used for validation and declaring the belongs_to association to :users.


There are several .erb files that are organized under 3 directories; analog_synthesizers, users and sessions. the .erb file names are self explanatory.

The layout.erb file is in the root of the views directory. This file is used to add common elements that are used across multiple pages in your application. Such as, navigation, headers, footers etc.


The analog_synthesizer_controller.rb contains the routes that are specific to Analog Synthesizers, such as “/analog_synthesizers/new” and “/analog_synthesizers/:id”.

The application_controller.rb contains the route to the ‘Home page’ as well as helpers and some settings, such as enabling sessions and setting the session_secret.

I also created a sessions_controller.rb for routes such as “/login” and “/logout”.

Last of the controllers is users_controller.rb, and as you probably have already figured out, this file contains routes specific to Users.


The config directory contains the environment.rb file that has multiple uses. It contains database connection information as well as a list of required files for your application to use.


This directory contains the database (in our case sqlite3), schema.rb which contains the schema of the database and a directory named migrate which contains the multiple migration files which are used for creating, adding and changing the database schema. Each file is time stamped, so can rollback any changes you made.


The public directory contains subdirectories for images, stylesheets for CSS files and favicon.ico which is the icon for the tab in your browser.

Remaining files in the root directory

.gitignore - Contains a list of files you do NOT want uploaded to Github. - Is a Rack file that contains a list of your controllers and the run command for you application as well as many other things.

Gemfile - Contains a list of all the Gems my application depends on.

Rakefile - Part of the Rake Gem. This allows you to add tasks like commands to run Pry or make backups of your database for example. - Self explanatory. I used it for adding instructions for running my application such as run bundle install.

I hope this made sense as to what and why I created this file structure for building my Analog Synthesizer CMS.

Thank you,

Joe McPartland




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CopyrightChapter 19: RefactoringChapter 20: Agile Methods*9_g89ZdDYEb_AS5OJYxT4A.jpeg

Best Practices for Versioning REST APIs

11.8 Deriving Team Standards for TDD

How to Build a Custom WordPress Theme from Scratch

Software development principles to be embraced daily

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joe McPartland

Joe McPartland

More from Medium

What is AWS DevOps and Tools You Need to Develop a Production-Grade Web App

Application Frameworks Blog(Week 1,2)

GIT and GITHUB Training Course

Automate Web and Mobile Test Cases