Project in Ruby with React frontend

6 min readOct 17, 2021

This was my first ever full-stack project that I have built, taking care of both sides of creating a web app, it was quite challenging at first trying to connect the dots and working with my first backend project with Ruby but the outcome as always outweighs the challenges that occur, and that’s the life of a Software Engineer.

For this project, I decided to make a Netflix clone, the idea of being able to create a clone of a bigger webpage like Netflix, was quite a challenge. It sounded really exciting and challenging to me, As exciting as the frontend may sound but this blog post is geared more towards the backend in Ruby and how the dots are connected with the frontend in React.

Let’s get started,

To build a Netflix Clone web app, I needed information about the movies and shows & for that, I used the API from https://www.themoviedb.org/. It has a collection of data on different categories of movies and shows and it is free!!. For purposes of my project, I wanted to have that data pulled in from my backend server and not directly from the API, so here’s when the show began. My first task was to have the data of all different categories I wanted in my project SEEDED into my database Model. but before I got there I needed the model structure of my classes, tables in my database, and then store the data into those tables and then get the data from there.

once I had the corresponding links for JSON API data from the moviedb API, I looked at the data and I picked the things I would need to include and store in my database based on that, now I needed to create my models

Since I had different categories like these that I could use

NetflixOriginal: “/discover/tv?api_key=#{API_KEY}&with_network=213”Trending: “/trending/all/week?api_key=#{API_KEY}&language=en-us”TopRated: “/movie/top_rated?api_key=#{API_KEY}&language=en-US&page=1”Action: “/discover/movie?api_key=#{API_KEY}&with_genres=28”Comedy: “/discover/movie?api_key=#{API_KEY}&with_genres=35”Horror: “/discover/movie?api_key=#{API_KEY}&with_genres=27”Romance: “/discover/movie?api_key=#{API_KEY}&with_genres=10749”,Documentary: “/discover/movie?api_key=#{API_KEY}&with_genres=99”

I had to create a separate model for each category and their corresponding tables in the database, also I wanted to have a few of my features that Netflix doesn’t have, to be included in the project like being able to add comments and look at the movie or show details. Those were added features. Each of my categories needed to have a model for the comments and those to be stored in the database and then create one to many relationships between all the categories and their comments.

class NetflixOriginal < ActiveRecord::Basehas_many :netflix_original_commentsend//Schema for the corresponding table create_table “netflix_originals”, force: :cascade do |t|
t.string “poster_path”
t.string “backdrop_path”
t.string “overview”
t.string “original_name”
t.string “original_title”
t.string “title”
t.string “name”end

class NetflixOriginalComment < ActiveRecord::Basebelongs_to :netflix_originalend//Schema for the corresponding tablecreate_table “netflix_original_comments”, force: :cascade do |t|
t.string “comment”
t.integer “likes”
t.integer “netflix_original_id”
t.datetime “created_at”, precision: 6, null: false
t.datetime “updated_at”, precision: 6, null: false
endThe highlighted bold code is the foreign key that was used as one movie or show in the Netflix originals category can have many comments

and this same applied to the rest of the models for all other categories.

The next step was to store the data in the tables and for that, I had to use the seeds file in the database folder where I had the migrations for creating the tables. In the seeds file, I used three gems- pry, rest-client, JSON

first, I created a hash to fetch all the categories paths as I was going to attach that to my localhost:9292/

requests = {fetchNetflixOriginal: “/discover/tv?api_key=#{API_KEY}&with_network=213”,
fetchTrending: “/trending/all/week?api_key=#{API_KEY}&language=en-us”,
fetchTopRated: “/movie/top_rated?api_key=#{API_KEY}&language=en-US&page=1”,
fetchAction: “/discover/movie?api_key=#{API_KEY}&with_genres=28”,
fetchComedy: “/discover/movie?api_key=#{API_KEY}&with_genres=35”,
fetchHorror: “/discover/movie?api_key=#{API_KEY}&with_genres=27”,
fetchRomance: “/discover/movie?api_key=#{API_KEY}&with_genres=10749”,
fetchDocumentary: “/discover/movie?api_key=#{API_KEY}&with_genres=99”,}


//iterated over the hash to get the data neededrequests.each do |key,value|
 response=RestClient.get “#{baseURL}#{value}”
 response_hash=JSON.parse(response) results=response_hash.map do |key2,value2|
  if(key2==”results”)
  value2
  end
 end get_data=results[1]// once the data was collected, then iterated over the data array to store information in the database get_data.each do |mov|
  class_name_array=    [NetflixOriginal,Trending,TopRated,Action,Comedy,Horror,Romance,Docu  mentary]  class_name_array.map do |c|
   if(c==Kernel.const_get(key.slice(5,16))) 
#this here took the hash key name for eg - fetchNetflixOriginal AND        #slice it to only NetflixOriginal    c.create(
   poster_path:mov[“poster_path”],
   backdrop_path:mov[“backdrop_path”],
   overview:mov[“overview”],
   original_name:mov[“original_name”],
   name:mov[“name”],
   original_title:mov[“original_title”],
   title:mov[“title”]
   )
   end
  end
 end
end

Following the steps below I was able to seed data using the ActiveRecord .create method and store them into their respective tables with bundle exec rake db:seed in the terminal

This worked perfectly for me as I wanted to keep code as DRY as possible and still be able to create all the object instances in one go for all categories.

now, I had the data stored in databases and I no longer needed the API links in my frontend app instead I used the links I created in the database in my

class ApplicationController < Sinatra::Baseset :default_content_type, ‘application/json’# Add your routes hereget “/netflix_originals” do
 NetflixOriginal.all.to_json
endget “/netflix_originals/:id” do
 movie = NetflixOriginal.find(params[:id])
 movie.to_json
endget “/netflix_original_comments” do
 NetflixOriginalComment.all.to_json
endpost “/netflix_original_comments” do
 NetflixOriginalComment.create(
  comment: params[:comment],
  likes:params[:likes],
  netflix_original_id: params[:mov_id]
  ).to_json

endpatch “/netflix_original_comments/:id” do
 movie = NetflixOriginalComment.find(params[:id])
 movie.update(
 likes:params[:likes]
 )
 movie.to_json
end

I created to get, post, patch links as needed in my project, once I had the links set up for all the categories it was time to fetch data from my react app and create the Routes using Browser Router

const requests = {
fetchTrending: `http://localhost:9292/trending`,
fetchNetflixOriginals: `http://localhost:9292/netflix_originals`,
fetchTopRated: `http://localhost:9292/top_rated`,
fetchActionMovies: `http://localhost:9292/action`,
fetchComedyMovies: `http://localhost:9292/comedy`,
fetchHorrorMovies: `http://localhost:9292/horror`,
fetchRomanceMovies: `http://localhost:9292/romance`,
fetchDocumentaries: `http://localhost:9292/documentaries`,
}

Now, I was able to use my server hosted on localhost:9292 and then passed these requests through the <Route> to the component to fetch data for each category using fetch request

useEffect(() => {//here fetchUrl is the URL of requests being passed down from the //<Route> to the component where the fetch request for a specific //category is being made for eg- requests.fetchTrendingfetch(`${fetchUrl}`) 
.then(resp => resp.json())
.then(data => setMovies(data))
}, [fetchUrl])

Similarly, the fetch requests were made to post the comments, add a like button, get the comments

This project was such that there can be a whole different blog for the frontend but I will add some pictures to show how it looks. Most of my frontend layout was followed through a tutorial on Youtube Channel called Clever Programming for a Netflix Clone, it is a very informative and cool tutorial, learned great tips on CSS, and then I added more of my features that don’t exist in Netflix app like adding comments option to each movie as added reviews section, likes to those comments and movie details page.

This was a really fun and challenging project for me, and I learned a lot through the process of building a backend and connecting it with the frontend. This project has not come to an end for me yet as I want to add a lot more features to it. This project is completed to meet the requirements and to fit into time limitation with the Project deadline with Flatiron School but I am excited and thrilled to see what I would learn in Rails in my next phase

stay tuned for more :)

Project in Ruby with React frontend

Written by Saloni Mehta