Skip to content

macOS oriented, Dracula theme inspired, YouTube SPA designed with Material-UI and deployed with Netlify.

Notifications You must be signed in to change notification settings

PompaDonpa/Youtube-Enhanced

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

[ Live ]

Dependencies

materialreact-routernetlifydockermomentnodenpmhtmlcsshomebrew

Youtube React Enhanced


  • Challenge

    • Create a react app that searches for YouTube videos using the YouTube API, then choose a video from a list to watch.

    • Advantages

      • Less response time
      • Extended video description
      • Custom UX / UI
      • No publicity
    • Disadvantages

      • Limited amount of searches per day
      • Slightly less options
    • UX / UI

  • Deployment

    • Netlify

      Deploying a React App (Frontend) to Netlify
      • Sign up for a Netlify Account
        
      • Go to Netlify and sign up for an account using your GitHub account.
      • Once you have an account and are logged in. Lets install netlify-cli globally
        npm install -g netlify-cli
        
      • This will gives the netlify command that we will use to deploy our app. Lets bundle/compile our React App
        npm run build
      • This will take some time. This command will compile our App into a few files and put them in a folder called build/ Our compiled app has all the code we wrote for our app but it is often uglified/minified to save space and protect our code of being inspected. Once building its is done we can inspect the build folder.
      • Login in netlify with netlify-cli
      • netlify login

      Set Up API Key for Continuous Deployment

      Don't forget to add your API Key

      Using the Netlify website, go to the Build and deploy tab. Under the Environment section select edit variables - make sure that the name of your environment variables matches exactly what you have in your app. In the previous instructions, we said to name it REACT_APP_API_KEY. Then add your key from the Chrome Developer Console for the YouTube app as the value.

      Be sure to start your environmental values with REACT_APP_. See create-react-app documentation for more details


      Alternative Deploy step by steps

      While in your react app:

      netlify deploy

      Follow the prompts in the terminal. This will take some time but by the end your app should be deployed. For further detail keep reading:

      Choose "Create & configure a new site". You can use your arrow keys to cycle through the options and press enter to make your selection.

      When asked with directory type build. This will give a sample URL to check your site. When you're ready to deploy to production run: netlify deploy —prod

      Again type "build" when asked which directory.

      Congrats! Your site should now be deployed.


      Set Up Redirects, So that Links to Specific Views like About or an Individual Video work

      In your create-react-app, go to the public folder

      • create a file called _redirects (exact, no extensions)

      • add

        /* /index.html 200
        

      Be sure to add, commit, push and test it.


    • Docker
      Create a Docker Image


  • Search

    cap-search cap-scroll

    cap-details cap-fair
  • Theme Inspiration

    cap-dracula cap-pallete

    cap-tmux cap-code


This is a quick guide of how to start a react app using Material-UI open-source, front-end framework.

  • Create a React app
   npx create-react-app youtube-enhanced
   cd youtube-enhanced/
   git init
  • Install imagemagick for MacBook - Big Sur
   brew install imagemagick
      
   "ImageMagick depends on Ghostscript fonts. To install them type : "
      
   brew install ghostscript
  • Add the Font link to the html page at './public'

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  • Create the Icons for the App, Android and iOS friendly.

    • Using a third party site that provides the SVG file
      • use magick convert the SVG file to ICO with name favicon.ico
    • magick -density 256x256 -background transparent favicon.svg -define icon:auto-resize -colors 256 favicon.ico
    • Using a third party site Maskable
      • with the SVG >> upload, select masks & controls >> export 192x192 & 512x512 png images
      • save png images to youtube-enhanced/public
  • Push the Changes from terminal to GitHub

    • Add & commit locally
      (echo "/node_modules" ; echo ".DS_Store" ; echo ".env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local" ) >> .gitnignore
      git add .
      git commit -m "First commit"
    • On Github, create a new repository, & add upstream locally
      git checkout main
      git remote -v
      git remote add upstream 'insert repo'
      git remote -v
      git pull upstream main

  • Install dependency Material-UI
       npm i @material-ui/core
       npm i @material-ui/icons
  • Install react-router-dom
       npm i --save react-router-dom
  • Install youtube-react
       npm i react-youtube
  • Install moment
       npm i --save moment react-moment
       npm i moment-duration-format
  • Install uuidv4
       npm i --save uuid
  • Install axios
       npm i axios
  • Install local-ip-url
       npm i local-ip-url --save-dev
       const localIpUrl = require('local-ip-url')
       localIpUrl() // => 192.168.31.69
       localIpUrl('public', 'ipv6') // => fe80::c434:2eff:fe06:f90

Happy Coding!


Up     PompaDonpa     LinkedIn     Twitter     Daniel Naranjo