How to create an app like Netflix.
React allows us to build tons of web applications and in this article, we will be making a mini Netflix in a few steps. So let us get started.
Getting started.
Before starting the project, make sure you have nodejs and command-line tool for React already installed in your local machine. Enter the following command in the terminal to make a scaffold react project.
Npx create-react-app mini-netflix
The next step is to navigate into our project with any code editor of choice. Now, navigate to public/index.html and use the following link to add bootstrap to the project for styling purposes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Installing dependencies.
To install the dependencies, first, we have to see check the functionality of our mini-netflix.
In our project, we will be creating the frontend which will be fetching videos from the video server and displaying the frontend. Along with this, we will be implementing navigation for our mini netflix. Install the dependencies with the following command.
npm install react-router-dom axios cloudinary-react
Creating the components.
Let us create the components for our mini netflix. First of all, we will be creating a navbar for making our application look nicer. Create a new file Nav.js and enter the following code.
Nav.js
import React, { Component } from 'react';
import { Link } from 'react-router';
import '../App.css';
class Nav extends Component {
render() {
return (
<nav className="navbar navbar-default">
<div className="navbar-header">
<Link className="navbar-brand" to="/">MiniNetflix</Link>
</div>
<ul className="nav navbar-nav">
<li>
<Link to="/">All Videos</Link>
</li>
<li>
<Link to="/upload">Upload Videos</Link> : ''
</li>
</ul>
<ul className="nav navbar-nav navbar-right">
</ul>
</nav>
);
}
}
export default Nav;
To upload the videos, we have the Upload.js component.
Upload.js
import React, { Component } from 'react';
import { Link } from 'react-router';
import Nav from './Nav';
class Upload extends Component {
render() {
return (
<div>
<Nav />
<h3 className="text-center">Upload Your 20-second Video in a Jiffy</h3>
<hr/>
<div className="col-sm-12">
<div className="jumbotron text-center">
<button className="btn btn-lg btn-info"> Upload Video</button>
</div>
</div>
</div>
);
}
}
export default Upload;
Now, we need the screen where all of our videos will be shown. Let us create a new component called Display.js and add the following code to it.
import React, { Component } from 'react';
import { Link } from 'react-router';
import Nav from './Nav';
import { CloudinaryContext, Transformation, Video } from 'cloudinary-react';
import axios from 'axios';
class Display extends Component {
state = { videos: [] };
getVideos() {
axios.get('http://res.cloudinary.com/<cloud-name>/video/list/miniflix.json')
.then(res => {
console.log(res.data.resources);
this.setState({ videos: res.data.resources});
});
}
componentDidMount() {
this.getVideos();
}
render() {
const { videos } = this.state;
return (
<div>
<Nav />
<h3 className="text-center"> Latest Videos on Miniflix </h3>
<hr/>
<div className="col-sm-12">
<CloudinaryContext cloudName="<cloud-name>">
{ videos.map((data, index) => (
<div className="col-sm-4" key={index}>
<div className="embed-responsive embed-responsive-4by3">
<Video publicId={data.public_id} width="300" height="300" controls></Video>
</div>
<div> Created at {data.created_at} </div>
</div>
))
}
</CloudinaryContext>
</div>
</div>
);
}
}
export default Display;
We have wrapped the component with the CloudinaryContext component which will help us display the uploaded videos to the frontend.
Make sure the App.js has the code as follows with the proper routes.
import React from 'react';
import Display from './components/Display';
import { Router, Route, browserHistory } from 'react-router';
const App = () => {
return (
<div className="container">
<Router history={browserHistory}>
<Route path="/" component={Display}/>
<Route path="/upload" component={Upload} />
</Router>
</div>
)
}
export default App.
Uploading the videos
In this project, we are using Cloudinary for uploading and fetching the video. You are free to use the cloud provider of your choice. Let us import cloudinary upload widget by importing the following script in index.html
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
With this added, we update our upload.js as follows.
uploadWidget = () => {
window.cloudinary.openUploadWidget(
{ cloud_name: 'cloud_name',
upload_preset: '<unsigned-preset>',
tags: ['miniflix'],
sources: ['local', 'url', 'facebook', 'image_search']
},
function(error, result) {
console.log("This is the result of the last upload", result);
});
}
//new function to open the widget on button click.
And inside the render function,
<button className="btn btn-lg btn-info" onClick={this.uploadWidget}> Upload Video</button>
//binding the event to function.Let us run the app and see the output.
Main View.
The upload component:
The upload Widget.
After uploading some videos.
Conclusion.
So, in this tutorial, we have seen how we can make a mini Netflix with react and other packages. There are tons of cloud providers that you can use; the logic for the frontend remains the same. Hope this blog must have added value in your knowledge
What’s the biggest thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us at info@jalantechnologies.com. We hope our assistance will help!
