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.
In the first video, I set up the local environment, including the FreeCodeCamp test suite. I use create-react-app to bootstrap the application.
In the second video, I begin to develop the application. Specifically, I added a button with an event handler.
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.
In the fourth video, a new quote is rendered when our button is pressed.
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.
In the seventh and final video, I deploy the Random Quote Machine to Netlify.
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!