Navigate back to the homepage

Develop a Random Quote Machine with The WebDev Coach

Aryan Jabbari
November 4th, 2018 · 1 min read

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.

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 email list and get notified about new content

Stay updated with all my blog posts and future randomness!

More articles from The WebDev Coach

Does FreeCodeCamp Prepare for a Career in Web Development?

Recently, I was asked by a Redditor (who will remain anonymous) if they are on the right path to becoming a web developer by using…

October 24th, 2018 · 2 min read

The Case Against Print Statements in your Main Branch

The Case Against Print Statements in your Main Development Branch A coworker (who is new to our codebase) recently asked me to add print…

August 24th, 2019 · 4 min read
© 2019 The WebDev Coach
Link to $ to $ to $ to $