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
In the fifth video, I use Material-UI to style the Random Quote Machine.
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.
Deploy Random Quote Machine to Netlify
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!
Follow me on Twitter, Instagram and Medium!
https://twitter.com/aryanjabbari
https://www.instagram.com/thewebdevcoach/
https://medium.com/@thewebdevcoach
Top comments (0)