{"id":21574,"date":"2017-08-14T20:24:21","date_gmt":"2017-08-14T20:24:21","guid":{"rendered":"http:\/\/build_a_miniflix_in_10_minutes"},"modified":"2025-04-14T14:50:40","modified_gmt":"2025-04-14T21:50:40","slug":"build_a_miniflix_in_10_minutes","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","title":{"rendered":"Build A Miniflix in 10 Minutes"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.<\/p>\n<p>Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?<\/p>\n<p>In this tutorial, we\u2019ll quickly build out a <strong>Mini Netflix<\/strong> in 10 minutes. In fact, I think we might build it less time.<\/p>\n<h2>MVP Challenge<\/h2>\n<p>An excited entrepreneur just approached you to build a <a href=\"https:\/\/cloudinary.com\/guides\/video\/video-as-a-service\">video service<\/a>. A service where users can quickly upload short videos and share on twitter for their friends to view. Let\u2019s list out the features of this app.<\/p>\n<h2>Features<\/h2>\n<ul>\n<li>Users should be able to sign up and log in.<\/li>\n<li>Registered\/Logged-in users should be able to upload short videos of about 20 &#8211; 30 seconds.<\/li>\n<li>Registered\/Non-registered users should be able to view all uploaded videos on the platform on a dashboard.<\/li>\n<li>Users should be able to share any of the videos on twitter.<\/li>\n<\/ul>\n<p>Now, here\u2019s the catch! <strong>T\u2019challa<\/strong> of <strong>Wakanda<\/strong> wants to invest in some startups today, so the entrepreneur needs to demo the MVP of the video service in 10 minutes from now.<\/p>\n<p><video\n      controls\n      muted\n      preload=\"none\"\n      class=\"c-transformed-asset c-transformed-asset--video\"\n      poster=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/v1497373918\/T_challay.jpg\"\n      \n    >\n      <source src=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/vc_h265\/v1497373918\/T_challay.mp4\" type=\"video\/mp4; codecs=hevc\">\n<source src=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/vc_vp9\/v1497373918\/T_challay.webm\" type=\"video\/webm; codecs=vp9\">\n<source src=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/vc_auto\/v1497373918\/T_challay.mp4\" type=\"video\/mp4\">\n<source src=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/vc_auto\/v1497373918\/T_challay.webm\" type=\"video\/webm\">\n    <\/video><\/p>\n<p>I know you are screaming your heart right now. It\u2019s totally okay to cry and let the world know about your problems and challenges, but after much ado shedding tears, will the app be ready in 8 minutes? Well, sorry &#8211; tears can\u2019t build an app!<\/p>\n<h2>Solution<\/h2>\n<p>It\u2019s possible to build the MVP our entrepreneur is asking for. Let me show you how! Ready your editor, your command line and anxious fingers. Let\u2019s get to work!!!<\/p>\n<h3>Step 1. Flesh Out The App<\/h3>\n<p>We\u2019ll use React to build out the app. Facebook has a tool, create-react-app that can scaffold a progressive web app out of the box in less than a minute. If you don\u2019t have it installed, please install and run the command below in your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">create-react-app miniflix\ncd miniflix\n<\/code><\/span><\/pre>\n<p>Go ahead and open up <code>public\/index.html<\/code>. Pull in bootstrap and add it just after the link to the favicon.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\u2026\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n\u2026\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Step 2. Set up Authentication &amp; Views<\/h3>\n<p>Go ahead and install the following packages from your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">auth0-js<\/span> <span class=\"hljs-selector-tag\">react-router<\/span><span class=\"hljs-keyword\">@3<\/span>.0.0 jwt-decode axios\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>auth0-js &#8211; For authentication<\/li>\n<li>react-router &#8211; For routing within our app<\/li>\n<li>jwt-decode &#8211; For decoding the JSON Web Token in our app<\/li>\n<li>axios &#8211; For making network requests.<\/li>\n<\/ul>\n<p>Open up your src directory and create a <strong>components<\/strong> and <strong>utils<\/strong> folder. In the utils folder, create a file, <strong>AuthService.js<\/strong> and add the code <a href=\"https:\/\/github.com\/unicodeveloper\/miniflix\/blob\/master\/src\/utils\/AuthService.js\">here<\/a> to it. I explained how to <a href=\"https:\/\/github.com\/auth0-blog\/reactjs-authentication-tutorial\">handle the authentication<\/a> in this tutorial, so check it out to ensure you are on the right track.<\/p>\n<p>We\u2019ll create 4 components in the <strong>components<\/strong> folder. Callback.js, Display.js, Nav.js and Upload.js<\/p>\n<p>The <strong>Callback<\/strong> component basically stores our authentication credentials and redirects back to the upload route in our app.<\/p>\n<p>The <strong>Display<\/strong> component will be dashboard for viewing all videos.<\/p>\n<p>The <strong>Nav<\/strong> component will be the navigation that all pages in the app will share.<\/p>\n<p>The <strong>Upload<\/strong> component will handle uploading of videos by registered users.<\/p>\n<p>Add this piece of code below to <strong>components\/Callback.js<\/strong>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { setIdToken, setAccessToken } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/utils\/AuthService'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Callback<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n componentDidMount() {\n   setAccessToken();\n   setIdToken();\n   <span class=\"hljs-built_in\">window<\/span>.location.href = <span class=\"hljs-string\">\"\/\"<\/span>;\n }\n\n render() {\n   <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">null<\/span>;\n }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Callback;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add this piece of code to <strong>components\/Nav.js<\/strong>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { login, logout, isLoggedIn } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/utils\/AuthService'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/App.css'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Nav<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n  render() {\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar navbar-default\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar-header\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar-brand\"<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>&gt;<\/span>Miniflix<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav navbar-nav\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>&gt;<\/span>All Videos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            {\n             ( isLoggedIn() ) ? <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/upload\"<\/span>&gt;<\/span>Upload Videos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span> :  ''\n            }\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav navbar-nav navbar-right\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n           {\n             (isLoggedIn()) ? ( <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn btn-danger log\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> logout()}&gt;Log out <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span> ) : ( <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn btn-info log\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> login()}&gt;Log In<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span> )\n           }\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Nav;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the <strong>Nav<\/strong> component, you must have observed that we imported a css file. Open the <em>App.css<\/em> file and add this code <a href=\"https:\/\/github.com\/unicodeveloper\/miniflix\/blob\/master\/src\/App.css\">here<\/a> to it.<\/p>\n<p>Add this piece of code to <strong>components\/Display.js<\/strong>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Nav <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/Nav'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { isLoggedIn } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/utils\/AuthService'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'axios'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Display<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n  render() {\n\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Nav<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span> Latest Videos on Miniflix <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">hr<\/span>\/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-sm-12\"<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Display;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add this piece of code to <strong>components\/Upload.js<\/strong>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Nav <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/Nav'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Upload<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n\n  render() {\n\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Nav<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span>Upload Your 20-second Video in a Jiffy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">hr<\/span>\/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-sm-12\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"jumbotron text-center\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn btn-lg btn-info\"<\/span>&gt;<\/span> Upload Video<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Upload;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Lastly, open up <strong>index.js<\/strong> and add replace it with the code <a href=\"https:\/\/github.com\/unicodeveloper\/miniflix\/blob\/master\/src\/index.js\">here<\/a> to set up your routes.<\/p>\n<p>Now, when you run your app with <code>npm start<\/code>, you should have views like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Miniflix1.png\" alt=\"MiniFlix1\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"392\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Miniflix2.png\" alt=\"MiniFlix2\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"416\"\/><\/p>\n<h3>Step 3. Upload Videos<\/h3>\n<p>We need a storage space for the videos our users will upload. <strong>Cloudinary<\/strong> is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, administration, manipulation and delivery. Head over to <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Cloudinary.com<\/a> and create an account for free.<\/p>\n<p>Let\u2019s make use of <a href=\"https:\/\/cloudinary.com\/blog\/introducing_a_complete_and_modern_ui_widget_for_cloud_based_image_uploading\">Cloudinary\u2019s Upload Widget<\/a>. This widget allows you to upload videos or any type of file from your local computer, facebook, dropbox and Google Photos. Wow, very powerful. And the integration is seamless.<\/p>\n<p>Go ahead and reference the cloudinary widget script in your index.html:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/\/widget.cloudinary.com\/global\/all.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Note:<\/strong> You can add it just after the links.<\/p>\n<p>Now in Upload.js, modify the code to look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Nav <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/Nav'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Upload<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n  uploadWidget = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-built_in\">window<\/span>.cloudinary.openUploadWidget(\n      { <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'cloud_name'<\/span>,\n        <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'&lt;unsigned-preset&gt;'<\/span>,\n        <span class=\"hljs-attr\">tags<\/span>: &#91;<span class=\"hljs-string\">'miniflix'<\/span>],\n        <span class=\"hljs-attr\">sources<\/span>: &#91;<span class=\"hljs-string\">'local'<\/span>, <span class=\"hljs-string\">'url'<\/span>, <span class=\"hljs-string\">'google_photos'<\/span>, <span class=\"hljs-string\">'facebook'<\/span>, <span class=\"hljs-string\">'image_search'<\/span>]\n      },\n      <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{\n          <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"This is the result of the last upload\"<\/span>, result);\n      });\n  }\n\n  render() {\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Nav<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span>Upload Your 20-second Video in a Jiffy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">hr<\/span>\/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-sm-12\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"jumbotron text-center\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.uploadWidget}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn btn-lg btn-info\"<\/span>&gt;<\/span> Upload Video<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Upload;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, we added a third argument, <strong>tags<\/strong>. Cloudinary provides this for automatic video tagging. Every video that is uploaded to this app will be automatically tagged, <em><strong>miniflix<\/strong><\/em>. In addition, you can provide as many tags as you want. This feature is very useful when you want to search for videos too!<\/p>\n<p>In the <strong>uploadWidget<\/strong> function, we called the <strong>cloudinary.openUploadWidget<\/strong> function and attached it to the \u201cUpload Video\u201d button. When the user clicks the button, it opens the widget. Replace the cloud_name &amp; upload_preset values with your credentials from <a href=\"https:\/\/cloudinary.com\/users\/login\">Cloudinary dashboard<\/a>.<\/p>\n<p>Sign in to your app, head over to the upload videos route and try uploading a video.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Miniflix3.png\" alt=\"MiniFlix3\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1014\"\/><\/p>\n<p>Upload Widget<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Miniflix4.png\" alt=\"MiniFlix4\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1014\"\/><\/p>\n<p>Uploading the video\u2026<\/p>\n<p>It uploads the video straight to Cloudinary and returns a response object about the recently uploaded video that contains so many parameters such as the unique <em><strong>public_id, secure_url, url, original_filename, thumbnail_url, created_at<\/strong><\/em>, duration and <a href=\"https:\/\/cloudinary.com\/documentation\/upload_videos\">so many others<\/a>.<\/p>\n<h3>Step 4. Display Videos<\/h3>\n<p>We need a dashboard to display all the videos uploaded for users to see at a glance. Here, we will make use of <a href=\"https:\/\/github.com\/cloudinary\/cloudinary-react\">Cloudinary\u2019s react component<\/a>. Install it:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install cloudinary-react\n<\/code><\/span><\/pre>\n<p>Now, open up <strong>components\/Display.js<\/strong> and modify the code to be this below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Nav <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/Nav'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { isLoggedIn } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/utils\/AuthService'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CloudinaryContext, Transformation, Video } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'cloudinary-react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'axios'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Display<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n  state = { <span class=\"hljs-attr\">videos<\/span>: &#91;] };\n\n  getVideos() {\n    axios.get(<span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/unicodeveloper\/video\/list\/miniflix.json'<\/span>)\n          .then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\n            <span class=\"hljs-built_in\">console<\/span>.log(res.data.resources);\n            <span class=\"hljs-keyword\">this<\/span>.setState({ <span class=\"hljs-attr\">videos<\/span>: res.data.resources});\n    });\n  }\n\n  componentDidMount() {\n    <span class=\"hljs-keyword\">this<\/span>.getVideos();\n  }\n\n  render() {\n\n    <span class=\"hljs-keyword\">const<\/span> { videos }  = <span class=\"hljs-keyword\">this<\/span>.state;\n\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Nav<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span> Latest Videos on Miniflix <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">hr<\/span>\/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-sm-12\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryContext<\/span> <span class=\"hljs-attr\">cloudName<\/span>=<span class=\"hljs-string\">\"unicodeveloper\"<\/span>&gt;<\/span>\n            { videos.map((data, index) =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-sm-4\"<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{index}<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"embed-responsive embed-responsive-4by3\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Video<\/span> <span class=\"hljs-attr\">publicId<\/span>=<span class=\"hljs-string\">{data.public_id}<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"300\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"300\"<\/span> <span class=\"hljs-attr\">controls<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Video<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span> Created at {data.created_at} <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              ))\n            }\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CloudinaryContext<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Display;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the <strong>getVideos<\/strong> code above, we take advantage of a very slick Cloudinary trick that helps grab all videos with a particular tag, when using just one tag. Check it out again:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/unicodeveloper\/video\/list\/miniflix.json<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>So we if had a tag like <code>vimeo<\/code>, our url will end up with <strong>\u2026\/vimeo.json<\/strong>. So in the code below, we got all the videos and stored in the videos state.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">axios.get(<span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/unicodeveloper\/video\/list\/miniflix.json'<\/span>)\n          .then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\n            <span class=\"hljs-built_in\">console<\/span>.log(res.data.resources);\n            <span class=\"hljs-keyword\">this<\/span>.setState({ <span class=\"hljs-attr\">videos<\/span>: res.data.resources});\n    });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The Cloudinary React SDK has 4 major components, <strong>Image, Video, Transformation<\/strong> and <strong>CloudinaryContext<\/strong>. We are interested in the <strong>Video<\/strong> and <strong>CloudinaryContext<\/strong> for now. <a href=\"https:\/\/twitter.com\/codebeast\">Christian<\/a> explained <a href=\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\">how these components work here<\/a>.<\/p>\n<p>In the render method, we simply just looped through the videos state and passed the public_id of each video into the <strong>Cloudinary Video<\/strong> component. The Video component does the job of resolving the public_id from Cloudinary, getting the video url, and displaying it using HTML5 video on the webpage. An added advantage is this: Cloudinary automatically determines the best video type for your browser. Furthermore, it allows the user have the best experience possible by choosing the best from the range of available video types and resolutions.<\/p>\n<p>Run your app, and try to see the list of all videos. It should be similar to this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Miniflix5.png\" alt=\"MiniFlix5\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1005\"\/><\/p>\n<p>You can also manipulate your videos on the fly, with the help of Cloudinary via the <strong>Transformation<\/strong> component.<\/p>\n<h3>Step 5. Share on Twitter<\/h3>\n<p>Go ahead install the react twitter widget component:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install react-twitter-widgets\n<\/code><\/span><\/pre>\n<p>In the components\/Display.js file, import the component at the top:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Share } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-twitter-widgets'<\/span>\n\u2026\n\u2026\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, add this piece of code just after the div that shows the time the video was created.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\u2026\n\u2026\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Share<\/span> <span class=\"hljs-attr\">url<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">https:<\/span>\/\/<span class=\"hljs-attr\">res.cloudinary.com<\/span>\/<span class=\"hljs-attr\">unicodeveloper<\/span>\/<span class=\"hljs-attr\">video<\/span>\/<span class=\"hljs-attr\">upload<\/span>\/${<span class=\"hljs-attr\">data.public_id<\/span>}<span class=\"hljs-attr\">.mp4<\/span>`} \/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Check your app again. It should be similar to this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Miniflix6.png\" alt=\"MiniFlix6\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1005\"\/><\/p>\n<p>Now, try to tweet.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Miniflix7.png\" alt=\"MiniFlix7\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1232\"\/><\/p>\n<p>Simple! It\u2019s really not that hard. The source code for this tutorial is on <a href=\"https:\/\/github.com\/unicodeveloper\/miniflix\/\">GitHub<\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>Our MVP is ready. Our entrepreneur. Now sit back, relax and watch your account become flooded with investor money! Wait a minute, there is a 90% probability that you\u2019ll called to add more features to this app. Well, I think Cloudinary can still help you with more features such as:<\/p>\n<ul>\n<li>Automatic Subtitles and translation<\/li>\n<li>Video briefs &#8211;  short video, based on few gif images that will extract from the uploaded video.<\/li>\n<li>Automatic and\/or manual video markers &#8211; marking specific locations in the video so the user can wait patiently to watch them, or jump directly to these points<\/li>\n<li>Find Similar videos by automatic video tagging<\/li>\n<\/ul>\n<p>Cloudinary provides many options for uploading, transforming and optimizing your videos. <a href=\"https:\/\/cloudinary.com\/documentation\/upload_images\">Feel free to dive in and explore them<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21575,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[119,134,311],"class_list":["post-21574","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-file-upload","tag-guest-post","tag-video-transcoding"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build A Miniflix in 10 Minutes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build A Miniflix in 10 Minutes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-14T20:24:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-14T21:50:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"770\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build A Miniflix in 10 Minutes\",\"datePublished\":\"2017-08-14T20:24:21+00:00\",\"dateModified\":\"2025-04-14T21:50:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA\",\"keywords\":[\"File-upload\",\"Guest Post\",\"Video Transcoding\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\",\"url\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\",\"name\":\"Build A Miniflix in 10 Minutes\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA\",\"datePublished\":\"2017-08-14T20:24:21+00:00\",\"dateModified\":\"2025-04-14T21:50:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA\",\"width\":1540,\"height\":770},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build A Miniflix in 10 Minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build A Miniflix in 10 Minutes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","og_locale":"en_US","og_type":"article","og_title":"Build A Miniflix in 10 Minutes","og_url":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","og_site_name":"Cloudinary Blog","article_published_time":"2017-08-14T20:24:21+00:00","article_modified_time":"2025-04-14T21:50:40+00:00","og_image":[{"width":1540,"height":770,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes"},"author":{"name":"","@id":""},"headline":"Build A Miniflix in 10 Minutes","datePublished":"2017-08-14T20:24:21+00:00","dateModified":"2025-04-14T21:50:40+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA","keywords":["File-upload","Guest Post","Video Transcoding"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","url":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","name":"Build A Miniflix in 10 Minutes","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA","datePublished":"2017-08-14T20:24:21+00:00","dateModified":"2025-04-14T21:50:40+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA","width":1540,"height":770},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build A Miniflix in 10 Minutes"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"parsely":{"version":"1.1.0","canonical_url":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Build A Miniflix in 10 Minutes","url":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA&w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA"},"articleSection":"Uncategorized","author":[],"creator":[],"publisher":{"@type":"Organization","name":"Cloudinary Blog","logo":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA"},"keywords":["file-upload","guest post","video transcoding"],"dateCreated":"2017-08-14T20:24:21Z","datePublished":"2017-08-14T20:24:21Z","dateModified":"2025-04-14T21:50:40Z"},"rendered":"<meta name=\"parsely-title\" content=\"Build A Miniflix in 10 Minutes\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/cloudinary.com\/blog\/build_a_miniflix_in_10_minutes\" \/>\n<meta name=\"parsely-type\" content=\"post\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA&w=150&amp;h=150&amp;crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2017-08-14T20:24:21Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>\n<meta name=\"parsely-tags\" content=\"file-upload,guest post,video transcoding\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/cloudinary.com\/p.js"},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724047\/Web_Assets\/blog\/Miniflix_Blog\/Miniflix_Blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21574"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21574\/revisions"}],"predecessor-version":[{"id":37406,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21574\/revisions\/37406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21575"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}