A demonstration React/Redux project
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
.babelrc
.eslintrc
.gitignore
devServer.js
index.html
package.json
readme.md
webpack.config.dev.js
webpack.config.prod.js

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.