Loco Libs

Yesterday I finished my first full stack app as part of Flatiron School’s Software Engineering Program. In this phase, we learned about Ruby and SQL. Like my previous projects, I wanted to make something that is simple and fun to use. Given that I have such fond childhood memories of Mad Libs, I settled on a Mad Libs spin-off called Loco Libs.

Mad Libs are a ‘phrasal’ word game in which a player thinks up words or phrases based on descriptions for each. These words or phrases are then placed into a pre-generated story. The lack of coherence and the occasional unexpected fit of player input and story can be an almost endless source of entertainment for kids (and sometimes, adults!).

First, I found a free API that provides randomized stories with associated word/phrase descriptions as an array of objects. Once I tested it using Insomnia, I set up the front end using React and CSS. I took this opportunity to make full use of React Hooks to simplify my code and React Router to simulate a more traditional online user experience.

I really enjoyed React this time around, especially now that it is starting to feel a little like second nature. I continued to build on my understanding of the container pattern and enjoyed creating ‘pure’, concise presentational components. Hooks definitely simplified my code… almost to the point that I though I must be missing something. It was a great feeling to have. I also continued building.

A really interesting part of this project was setting up a backend server using Ruby, Active Record and Rack. While I’ve worked with my fair share of databases, including building one from scratch using MS Access (way back in the day) for the Portland VA Healthcare System and co-managing a classified database that was shared among “The Five Eyes” nations in my previous life working for the National Security Agency, I had certainly never worked without the convenience of a graphical user interface. This seemed like a whole new animal.

The setup was simpler than I thought it would be, due to the use of Active Record, an object relational management system that allows us to create objects that carry both database data and the logic that works on it. It connects Ruby objects to database tables and records, and bypasses the need to write SQL code (which was a little unfortunate because I enjoyed SQL).

With the help of Rack (a Ruby server interface), I used the custom server to enable app users to save and delete their stories, or view all stories. After using the descriptive prompts to fill words and phrases, the app ‘zips’ user input with the story, fetched at random from the external API. React saves the user and the finished story in separate tables, which have a 1-to-many relationship. On the backend I built out the functionality to save and view all user input (words and phrases) in a words table, which which the user table has a ‘one-to-many, through’ relationship.

Like in previous projects, I used CSS for styling. It’s just so much fun. For my next project, I might use React Bootstrap but until then, I’ll continue my exploration into CSS.

Looking forward to Phase 4!

Brinton