Develop a Random Quote Machine with The WebDev Coach

I completed a video series where I recorded the steps necessary to create a Random Quote Machine. The Random Quote Machine is created using React, Material UI and Font Awesome and deployed with Netlify.

Set Up Environment

In the first video, I set up the local environment, including the FreeCodeCamp test suite. I use create-react-app to bootstrap the application.

Watch more here.

Begin Development

In the second video, I begin to develop the application. Specifically, I added a button with an event handler.

Watch more here.

Fetch and Render a Quote

In the third video, I use the fetch() API to make a GET request and fetch quotes from a JSON file. I introduce React lifecycle methods. A quote is rendered and displayed to the browser.

Watch more here.

Choose a Random Quote on Button Click

In the fourth video, a new quote is rendered when our button is pressed.

Watch more here.

Add Styling with Help of Material-UI

material-ui logo

In the fifth video, I use Material-UI to style the Random Quote Machine.

Watch more here.

Add Tweet Link to Application and Pass FreeCodeCamp Test Suite

In the sixth video, I use Font Awesome to render a Twitter icon. This icon allows the user to tweet a quote when clicked.

Watch more here.

Deploy Random Quote Machine to Netlify

netlify logo

In the seventh and final video, I deploy the Random Quote Machine to Netlify.

Watch more here.

Use React Hooks to Handle State

In the eighth and final video, I have some fun and add React hooks to handle the state of our application. Keep in mind that, as of November 6, 2018, this is not a stable API and is done just for fun and experimentation.

Watch more here.

I hope this helps in your coding journey. Please subscribe to the channel and comment / like the videos. Want me to cover something in a new video? Suggest it in a YouTube comment! Good luck!

Join My Mailing List

I'm currently working on a Web Development Starter Kit. It will be a pack of content that'll set you on the right path to leave that ūüí© job and learn the foundational concepts needed to be a web developer.

For an email on when that's released, join my mailing list!