My first Rails app, Plain Reading

How I built it

September 30, 2021 Ā· Felipe Vogel Ā·

After a year of studying pure Ruby and basic front-end skills, Iā€™ve finally started learning Rails and built my first app: Plain Reading.

Rails is loved for its speed of development, and in that regard it did not disappoint. A month ago I had just finished watching my first Rails tutorial and my app was 0% done. Now, one month later, Iā€™ve built a working, useful app just by working on it a little bit each day, in the time left over from life as an adult with a full-time job. Hereā€™s how I built it.

1. Learn the basics of Rails

I did the free Rails for Beginners course by GoRails. I made sure to build the example app as I went through the course.

2. Choose front-end libraries

Bootstrap would have been an easy choice, especially because itā€™s used in the Rails for Beginners example app.

But instead I chose Pico.css and Shoelace. Why?

But Shoelaceā€™s included themes donā€™t include styling for standard HTML elements (only Shoelace elements), and thatā€™s why Iā€™m also using Pico. Pico is only one of many minimalist or classless CSS themes, but itā€™s my favorite because it looks so good. And unlike most of the others, it has several example pages that can be used for inspiration.

I bashed Bootstrap just now, but to be fair this Pico-and-Shoelace approach has difficulties of its own:

Despite these complications, Pico + Shoelace on the whole feels cleaner than Bootstrap and provides more interesting possibilities for the future.

3. Build the app

I ended up doing this in five stages:

  1. Skeleton site. Build a homepage and basic user management with register and login pages. The GoRails tutorial helped immensely here.
  2. Dropbox connectivity. This took longer than I thought it would, and involved monkey-patching the Dropbox API gem to incorporate (and tweak) an open PR.
  3. Models design. This guide helped. After that was done, finishing up the Settings page was straightforward.
  4. CSV reading list parser. The main back-end component. I made use of a gem that I previously created for a related project, but I added a lot of new features and heavily refactored it along the way, so this stage actually took the longest.
  5. My List page. Finally, the point of the whole thing! This is where items parsed from the CSV are displayed in a pretty way so that you can show your reading list to other people. I adapted the view from my reading page on my blog. I will improve on that soon, but in the meantime itā€™s pretty neat that I can copy over essentially the same ERB file and Stimulus controller from my blog, thanks to my blog being made with Bridgetown. (Hereā€™s more on how I built that.)

4. Deploy it

Iā€™m still ironing out some deployment issues: Dropbox is not connecting in production, my Stimulus JS is not working due to header issuesā€¦ but hey, at least itā€™s now a site on the web.

5. Next improvements

There are some other holes to fill too, partly because toward the end I became slightly obsessed with deploying my first app within a month. So these are coming up next:

Conclusion

As satisfying as it is to build my first app in a month, that is the easy part. The hard part will be learning how to build an app well, because letā€™s be honest, right now my appā€™s code looks like a steaming pile of dog poo to anyone who has real experience in Rails. Rails makes it easy for a newbie to slap together an app with only a vague notion of what Iā€™m doing. Itā€™s a blessing and (increasingly as the app grows) a curse.

Thatā€™s why Iā€™ll buckle down and learn the hard lessons: maintainable architecture, Rails internals, better UX/UI, performance optimization, and codebases to dig into and learn by example. Itā€™s all in my study plan.

Meanwhile I have to start somewhereā€”no beginner can build a well-architected app on their first try, but we improve as we go. Itā€™s hugely encouraging to have built a functioning app in a few weeks, and now Iā€™m more motivated than ever to learn those more serious lessons and use them to improve my little app.

Next on my list: the Ruby on Rails Tutorial and the Rails Guides. Onward!

šŸ‘‰ Newer: Ruby for the self-taught developer šŸ‘ˆ Older: Nand to Tetris šŸš€ Back to top