Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Help with Tech Stack:

I have built the random quote generator with React and a random quote API. It is now time to deploy. The API key needs to be hidden and the code needs to remain open source so the code can be viewed.

After spending some time researching, I have found Netlify and server less functions. Should I learn how to build a serverless function to make the api request and deploy the Random Quote Machine with Netlify from a public repository?

Before spending time learning how to build a serverless function, I want to ask if I am going in the right direction to deploy my random quote machine website.

The tech stack should not disqualify my project for receiving credit toward the frontend frameworks certification.

What is the best way to hide the api key while making the random quote machine code open source, so the code is still visible?

Link to the challenge:

2

Can you put your API key in another file (and then import the file in your main code)?
If so, then you can add that file to git ignore so that the key will not be uploaded to GitHub and will remain a secret.

4

My initial suggestion would be to use a quote API that doesn’t require auth and has proper CORS headers. There should be plenty to choose from. There are also GitHub repos with JSON files you can use.

To use an API key you have a few different options.

  1. Use a framework (e.g. Astro) that does an initial fetch at build-time. This is perfectly fine with an API that doesn’t change much. You do need to fetch all of the data to do any randomization. So you can’t just use an endpoint that gives you a single random quote. You also can’t do runtime API interaction (unless you switch to SSR). Single deploy.

  2. Use a framework (e.g. NextJS) with server-side code for the API interaction. Single deploy.

  3. Create a backend (e.g. node/express) that both serve the static files (like a framework build output) and has API endpoints used by the client code. Single deploy.

  4. Create a separate backend your client deploy will use. Can be two deploys on different hosts (client/backend).

A random video (didn’t watch it)

1 Like
5

This is how I am completing this assignment. I found an api with no auth required and CORS headers like you suggested. I also used the GitHub link you gave. Thank you

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.