UkeChords with Sinatra

(originally published in 2017.05)

Sinatra takes away the stress of building everything from scratch and enables first time web developers like me to get a web app up and running in hours.

Building my first web app using Sinatra gave me a real first taste of how full stack web development was like. The project has taught me so much: password security, forms, MVC convention, databases, connecting front-end and back-end.

​​See the source codes on GitHub. Clone/download the file, run `bundle install` and then `shotgun` to run. Open ‘localhost:9393’ on your browser to use. Easy! There’s also a video walkthrough that I recorded.


  1. SQLite3 — database engine
  2. ActiveRecord — to help ruby app talk with database
  3. bcrypt — to protect user passwords
  4. shotgun — to run the app locally; to build the app and view changes without stopping and restarting the application every time a change is made.
  5. thin — a bundle that combines three gems to support web framework
  6. rack-flash3 — to talk with users of your app
  7. tux — sinatra and tux are good friends! This gem allows developers to perform/test tasks in the terminal directly.

The process

Beginning: People say the scariest moment for developers is staring at a blank sheet. It’s true.

Database and models: The most difficult thing other than building the view and controller files was constructing object relationships and models. UkeChords would have users, songs, chords interacting with each other. I hesitated over has_and_belongs_to_many and has_many_through. I studied carefully the rails guide for ActiveRecord association on types of associations to determine which type made the most sense for my app. I spent an hour drawing out the tables and relationships that the objects would have in my app. It was time well spent.

After I decided which were the most suitable associations for my objects, building models and database tables was easy.

View flow: I loved drafting things out. It came in handy during both the database and model building phase and the web app(views) flow design phase. Drawing out each page/step helped me see how routes interact with one another and foresee where I would experience difficulties.

Styling: I really like Sinatra’s automatic styling file, layout.erb and <%yield%> block. If layout.erb exists in the view folder, Sinatra picks it up and applies to every other view files. So it gives your web app a consistent look throughout different pages. It’s so elegant and effortless! And layout.erb combined with Bootstrap can give your app a great look in no time.

Three things about coding the project has taught me

  1. I am better resistant to failures and mistakes than ever. I think lots of people of my generations are used to the speed of technological progress and expect technologies to ALWAYS WORK and to solve every problem in life. I was that way growing up. The biggest learning curve I had when coding was that things didn’t work until I’ve failed many times. Making mistakes and breaking things used to drive me so mad. Now, I can have the patience to dwell in my own mistakes and work my way through it when nothing works.
  2. Less perfectionist, more development-oriented. Every now and then, I looked at early codes I have written, and I would laugh. But I am also surprised how far I’ve come just by improving and learning a little everyday. I wonder if I criticized myself for every single imperfectness from the beginning, would I come this far? It turns out a development-oriented mindset is key to continuous improvement. I really don’t have to be right the first time. But never give up improving, ever.
  3. People first. Technologies are built by people and for people. It’s not an one-person job. It’s not made for few’s satisfaction. It’s so team-driven. In school, I was taught to stand out as an individual and to take exams and solve problems on my own. It’s coding that taught me the power of teamwork and that this is actually how the world runs. And I am not looking back.

Now I have a better system to organize my ‘ukulele music sheets! I heard Rails is much much more magical and can’t wait to learn more about web development!

Meanwhile, ‘Uke it up with Sinatra!