FCC Speedrun — Project #1 Random Quote Machine

In case you are wondering what is FCC Speedrun is then just read this post to know more about it.

This Speedrun, I chose React JS to do all the Front End Projects. It’s already 5 days since the Speedrun has been started. It took me long than expected to grab the concepts of React JS and here’s my first project on *Random Quote Machine* as described at freeCodeCamp .

Screenshot of Random Quote MachineScreenshot of Random Quote Machine

Overview

Random Quote Machine is a web app which helps you do two things:

  1. You can always get a new quote by clicking on the New Quote button.

  2. By clicking on Twitter icon you can tweet out this quote.

Project Description

Here are the steps I followed to build different components and elements for my project.

  1. I used create-react-app to create the boilerplate for this project. Here’s the package.json file it created:

  1. It also created other files also, you can see it here.

  2. While the root Component of the app lies in App.js, here’s the code :

App.js import the main component **QuoteBox** which is responsible for displaying the quote container and other main elements required for this project. Here’s the code snippet for *QuoteBox*:

  1. For the backend part, I am using two **_JSON _**files to serve the colors and random quotes. You can find them here.

Final words for this Project

FCC Speedrun & the Chingu cohort is the best thing happened to me, it pushed me to the extent which I haven’t expected to reach in just short time span. If you want to know more about Chingu Cohorts, just visit here.

If you want to see the this project in action, please visit **here**.

If you want to see the Code for this project, please visit **here**.

[Updated]: Completed Project #2 : **Local Weather App**. Read about it here.

P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.