Math Quotations App

Source | Visit | Built with: JavaScript, Create React App, Styled Components, Axios

Why I built it

This app evolved out of my intention to practise asynchronous JavaScript with external APIs -- and then to practise that in conjunction with React hooks, namely useState() and useEffect(). Ultimately, the app is meant to provide inspiration through random quotations about math (and to be a loose reminder of the link between math and programming).

What it does

It displays a random quotation about math with a random linear gradient background when the user clicks the 'click for a new quote' button, providing immense inspiration for the eyes and mind!

How I built it

Initially, the app used fetch() to make a call to a public API that returned random programming quotations. Before using the React hooks, the changing background (the logic for which I reused from the Random Linear Gradient Generator) was not working in conjunction with the API call, so the background would change before the new quotation rendered.

I then added the hooks to manage the state, run the api call when the state changed, and handle the background change in clear relation to the API call. I also switched from fetch() to using the Axios package for built-in JSON parsing.

How I tested it

What challenges I ran into

After getting the app's central component set up and styling for large screens, I attempted to deploy the app on Vercel. The deployment was successful, but the app would only show a blank white screen. I spent countless hours looking for bugs, testing small changes across the central component, and finding nothing -- until I finally reminded myself to look more closely at the error messages in the console: There was a problem with making an API call to an endpoint that began with http rather than https.

I couldn't find another (and more secure) public API that served random programing quotations, so I searched for one concerned with a related subject. As soon as I changed the API's URL, it worked like a charm.

I also shot myself in the foot by designing the app with large screens only in mind. Determining the responsiveness with custom breakpoints within the Styled Components from large screen down to small screen felt clumsy, so I started the styling over and designed it with mobiles first in mind.

What I learned

I thought I had already learned this one: Read the available error messages first, and read them closely. Also: I work more efficiently with UI responsiveness when beginning with a mobile layout and working my way up to large screens.

How I deploy it

As a project on Vercel connected to a repository on GitHub.

What's next for this project

• Make the degree of the linear gradient random as well.

• Find a way to make the contrast between the white text and the random background consistently accessible.

• Test it properly.