How I build a single page application with Ruby API backend and JS frontend from scratch
After I’ve finally deployed my app in Heroku, I decided to write a blog to go over my very first JS project. Hopefully it gives you an idea on how to start with your project.
My initial idea was to make a to-do app, but as I was told by my instructor that every time we make a to-do list app or a weather app, a koala dies somewhere. To save the koala, I decided to build a restaurant review app instead. It’s a single page application that allows a user to create, read, delete, update reviews of restaurants.
Setting Up the project
This app uses a Rails API back-end and JavaScript frontend. I followed this repo to setup my rails backend and frontend. Note: It’s important to have the frontend and backend in two different separate repos if you want to deploy the app after you finish the project. Check this article if you need a quick review with the rails commands such as rails g controller, rails g model, etc.
I included the active_model_serializers gem to my Gemfile, since rails serializers helps the app send data appropriately. The next step is to run bundle install and spring stop to install the gem.
gem 'active_model_serializers', '~> 0.10.0'To use rails serializer , run the following command:
`rails g serializer <serializer name matching model>`This will build out a serializer for a particular model. A folder call serializers will be generated inside of the app folder. My restaurant serializer looks like following:
class RestaurantSerializer < ActiveModel::Serializerattributes :id, :name, :cuisines, :like, :web_img, :web_url, :addresshas_many :commentsend
With Rails Serializer, you can decide which attributes to send to the API. I included has_many :comments, because I want to be able see the comments through the restaurants.
Seed the data
I used an api called Zomato. It’s a restaurant api you can use for free after you signup an account with them, the limitation is that they don’t give out the user reviews for free. I used a ruby gem called faker to generate the user names and review contents. If you don’t know what faker gem is, here is an article you can check out.
Writing the routes
I didn’t write all of my routes at once, because I wasn’t sure what I need exactly in the beginning of the project. I added each route when I need it. I started with this route to test if the data are send out properly:
get "/restaurants", to: "restaurants#index"Frontend
In order to connect the frontend and backend, I used the fetch() method to get the data from the rails API, the default URL is http://localhost:3000
Use console.log() here to test if you are getting the response from the api.
Styling
I used CSS Grid to display each restaurant. One thing I learned is how to use nth-child to control the grid-column span. For example, the grid-template-columns is displaying four cards each row, the nth-child(5n) tells the grid to span 2 columns every 5 card. The page layout looks dramatically different.
.resCard:nth-child(5n) {grid-column: span 2;}
Final Thoughts
- This project is fun overall. Building project with vanilla JS gives me a in depth understanding of how JS works.
- Manipulate the DOM with vanilla JS is not easy. I have to think of how to organize my code all the time. When it comes to styling, I had to keep adding div tag to wrap the code, the render function grew to a big chunk after I added the element here and there.
- My project still has a big room for improvement. My todo list for this web is to add the login auth, make the website responsive, improve the like feature, improve the view reviews modal, and add the user profile.
Video Demo(live demo)
I hope this blog gives you an idea on how to start your project, please reach out to me if you have any question.
