A demonstration React/Redux project
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6c55a3c Aug 9, 2016

readme.md

Youtubez

A project to demonstrate my React/Redux capabilities at creating a single page app. See it in action at http://youtubez.s3-website-us-east-1.amazonaws.com.

The environment is borrowed from the free course on Redux and React by Wes Bos at https://learnredux.com. There are a lot of Youtube API (www.googleapis.com/youtube/v3/search) based demonstration projects out there, especially based on a course at Udemy, so I did something a little different by adding a dropdown with suggestions from https://suggestqueries.google.com. With the exception of some code used from Wes Bos's project and some JSX I borrowed from one or two projects out there, all of the code is mine.

I've put the actual viewing of a video on a separate page to show the use of 'react-router'. Because that Google page does not have a CORS policy I used JSONP, which it supports. Initially I used jQuery, but replaced it with a module called 'jsonp-es6'. Both JSONP and FETCH, used to retrieve video data, create promises, which makes for concise code that handles the returned data.

Initially I also handed a defaultState to createStore(), and the code is still present, but I replaced it with code that fires off the JSONP and FETCH promises before rendering the page the first time. The reducers are trivial, replacing the previous state with new state. I used Chrome for debugging, including the React add-on.

Running

Clone the repository. Then npm install to grab all the necessary dependencies.

Then run npm start and open localhost:7778 in your browser.

Production Build

Run npm build to create a distro folder and a bundle.js file. I was unable to get this to just work at Github Pages, so I deployed my demo by uploading the 'index.html' and 'bundle.js' files to Amazon S3 and configuring there for a website, including adding permissions on those files for anyone to read them.