Speedrun Challenge #1 ~ Random Quote Machine
Lately I wanted to practice more with ReactJS so I joined P1xt‘s second Speedrun Challenge. You can read more about what it means here. Basically we have a month to finish as many FCC project as we can and then create a portfolio website with those projects.
The first challenge I took was the Random Quote Machine because it seemed very easy, and it was except some minor details which took a little longer than expected :D.
The biggest challenges were:
- Understanding how create-react-app works.
- Finding a good quotes API
- Working on the design part as I am not a good designer xD
Step 1
Last time I used React to build an app was few months ago, but I never used create-react-app for that. It’s pretty easy to start with it, and it’s helpful, at least until now… :D.
Step 2
The part of the app that took the most was finding a list, JSON, or an API, which has at least 20–30 quotes which I could use. I saw others using an API, but for some reason it didn’t worked for me, so I found this JSON on github.
I’m not quite sure if that’s a valid JSON file, even if he claims to be, because as you can see it has square brackets around it… It took me a while to convert it to a valid JSON by firstly copying everything in a string and applying a series of .replacein in JavaScript on it until it became one :D.
Step 3
The last part was working on the CSS.
I don’t have a problem with CSS, in fact I really love working with it. The hardest part was to find a “decent” design by mixing color with fonts and alignments, etc…
I used a simple blue color for the background, text and buttons and I used flexbox to align it to the center. Not the best, but it works, so I’m happy with it.
Links
You can see the app running here.
Also the github repo is here.
