Make a Web App in 30 Minutes (or less) with Ruby on Rails

It’s not a lie. Ruby on Rails is truly the magical unicorn, the pot of gold at the end of the rainbow, the elusive feeling of Nirvana you’ve been searching for all your life. Too much? Fine, I’ll stop. But what if I told you that I can create my own fully functional web app from scratch in about half an hour? (or less, depending on how many times you get distracted)

With the help of Rails, anything is possible. I want to make a web app for my latest business venture, Cat Café. Cat Café is a place in which cats can go for brunch and get served and worshipped by humans. Keep in mind this is a belongs-to/has-many relationship. The cat is a client who has many staff waiting on her/him and the server belongs to one cat.

Let’s get started by creating a new Rails app.

Next, we should set up our controllers, models, migration tables, view directories, and routes. Whoa, whoa. Hold up. It sounds like a lot to do, right? That’s where Rails comes in. By doing “rails g resource,” all these files are automatically generated for us. Rails does the majority of the hard, repetitive work. That way, us developers can instead devote our time focused on the content of our app and ensuring it works the way we desire.

Let’s check our migration tables and routes file to make sure everything is correct.

Looks great! Don’t forget we need to set up the relationships between the Cat and Server models.

Next step is to go to our Cats Controller file and set up the methods we want in our our app.

The CEO of Cat Café (me) will be able to see all the cat clientele (index), each cat’s personal profile(show), add new cat clients (new, create), edit an existing cat’s information(edit, update), and delete a cat client(destroy).

Similarly for the Servers Controller file:

I will be able to view all my current staff (index), see a staff member’s profile (show), hire new staff (new, create), edit the current staff’s info (edit, update), and fire a staff member (destroy).

We need to create the view files for each controller.

The “index” pages will display a list of all the cat clients and staff members.

We added a link_to so the user can click on a cat’s name and get redirected to the cat’s “show” page. The button_to will redirect us to the “new” page to add a new cat.
Similarly, the link_to will redirect us to the server’s “show” page. The button_to will redirect us to the “new” page to add a new server.

The “edit” and “new” forms will be the same for each model.

Collection select allows us to have a dropdown menu with all the cats’ names.

The “show” pages for the cat and the staff member are presented as their profiles and will thus show information about them.

We added a button_to on the “show” page, so we can edit or delete the cat’s profile.
Similarly, the button_to on the “show” page will redirect us to edit or delete the server’s profile.

Now that we got the chunk of our coding done, let’s go to the seeds.rb file and create some seeds so we have data to display on the app.

Avengers Assemble

It’s almost time to launch our app! Before we do so, we first have to create a database.

rails db:create

Next, run our migrations.

rails db:migrate

Then, run our seeds.

rails db:seed

Finally, let’s fire up the rails server! ⚡️💥

rails s

Go to the browser and enter localhost:3000/servers.

Servers index page

Woohoo! It works! 🍾🎈 This is the index page that displays all of the servers working in Cat Café. We can also click on each staff member’s name to view their individual profiles.

Server show page

In each staff profile, we can find out who their current cat client is, edit the profile, or fire them (which deletes their profile). We can also click on the cat’s name to view their profile as well.

Cat’s show page

On the cat’s show page, we can view their info, see who works for them, edit their profile, and delete it. We can also click on their staff’s name to view their profile.

Cheshire decided he was bored of eating the avocado tuna toast at our café and he no longer wants to be a client here. Let’s delete his profile.

As you can see, after deleting Cheshire’s profile, we are redirected to the Cats index page. We no longer see Cheshire on the list.

Sad to see him go, but Cat Café is the hottest place on the East Coast right now. We have a new customer already! Let’s add Oliver to our clientele.

After we created Oliver, we are redirected to his profile (“show” page).

More customers mean we need more staff ASAP! Let’s hire another server.

Once we added a new server, we were redirected to their profile.

Since Tony no longer has a cat client, we need to edit his profile and assign him another cat to wait on.

Marie got added on to Tony’s client list.

Tony was heartbroken by Cheshire leaving, so much that it affected his work performance. Sorry, but it’s time for us to let Tony go.

I don’t make the rules. Marvel does.

There we have it! A fully operational web app that can perform basic CRUD (create, read, update, delete) functions! Yes, visually, it is minimal with no styling. I promised you a working app, not a beautiful one. That’s what CSS is for!

Girl coder. Empire State of mind. 💅🌆