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. View the entire playlist.

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.

Begin Development

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

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.

Choose a Random Quote on Button Click

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

Add Styling with Help of Material-UI

material-ui logo

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

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

Deploy Random Quote Machine to Netlify

netlify logo

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

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.

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

Use Prisma with a NestJS GraphQL Server

Use Prisma with a NestJS GraphQL Server Before We Get Started In my last blog post , I described how to stand up a Node.js server with…

October 5th, 2019 · 4 min read
© 2018–2019 The WebDev Coach
Link to $https://twitter.com/aryanjabbariLink to $https://www.youtube.com/c/thewebdevcoachLink to $https://github.com/AryanJ-NYCLink to $https://www.linkedin.com/in/aryanjabbari