Random Quote Generator- please some feedback

Hello all!

I would like some constructive criticism on my small app.

https://lavpascu92.github.io/RandomQuoteGenerator/

Thanks! :blush:

I like it, you could add some loading icon while the quote is being fetched so that itā€™s not blank when you click new quote :slight_smile:

Iā€™m not sure about:

  1. red text (with text-shadow) on green background
  2. Separating one heading between 3 tags
  3. Including API key in the client script

Maybe something like this?

1 Like

Thanks! I am not that good with design so I appreciate your response. It looks easier on the eyes with the yellow text.
It is the first time I use an API, where is the place to put the key? Why not in the client script? I really have no ideaā€¦
Do you know a good tutorial on how to use APIs?

Thatā€™s a good idea! I appreciate it! I shall look into this.

The reason you should not have api keys on the client side is because then anyone would be able to see your key and use it, you should treat your api keys like passwords.

You can watch this video for more info on hiding api keys: https://www.youtube.com/watch?v=17UVejOw3zA

After hiding your api key you should regenerate it as you exposed this one.

1 Like

I didnā€™t have any ideas whatsoever to add something new, but it looks nice.

1 Like

Thank you so much for the info! It really helped me!

@luvly92 Did you set up a back-end?

@mayankverma you are obviously right, the problem is you have linked to a node/express app.

If you follow the fCC curriculum chronologically this project is still early in the learning process to start dealing with hiding API keys using a back-end. Itā€™s great information and should be learned but the point in the curriculum where you get to the front-end projects is before you have learned anything about back-end and it is easier said then done to set up a back-end if you have never done it before.

What people usually do is use a free API where you do not need a key, or just use a static file or data structure with all the quotes in it. Or they just leak the key, which also happens a lot.

Yeah, but the same method can be applied to front end applications, correct me if iā€™m wrong.

I donā€™t see how?

The point is, you make an express server that talks to the API on behalf of the front-end. The front-end fetches from your own back-end which has the API key and does all the direct third party API interaction, hitting the various endpoints and so on. It then sends back the data (likely JSON) to the client. So the client is never interacting with the actual API, just the back-end server (sometimes called a pass-through or proxy server).

Here is another video on the subject.

2 Likes

Oh I see it now, I thought my api keys were safe in react apps by storing them in .env and then adding .env to .gitignore

I just went to the sources tab and saw that my api key was exposed all along :cry: :cry:

That is why I said it is easier said than done.

It is a bit unfortunate that the front-end project is (potentially) making people use an API before the student has learned anything about back-end stuff. The same can be said for CORS issues, which people also may run into when dealing with a front-end project that talks to an API. It isnā€™t explicitly stated to use an API but a lot of people do end up using an API for the quotes.

Personally, I think the quote challenge should offer an API, or a static file, that people can use. Or link to some APIs that do not require an API key.

It can be pretty frustrating and a daunting task at this point in the learning process to have to deal with some of these issues. And the way I see the basic idea behind this challenge is simply to learn how to populate the DOM using data. Not so much using an API. A lot of people do not use an API for this challenge, which I think makes it easier to focus on the (what I see as) the main idea of the challenge.

We do not teach about AJAX and APIs until the ā€œData Visualization Certificationā€ part of the curriculum.

But Iā€™m conflicted because I clearly remember when first seeing this challenge getting really excited about using data that was given to me to build a page with. For some reason, itā€™s much more fun to build something when the data is given to you (well it is for me anyway). Looping data fetched from a server and constructing a page from it really shows some powerful concepts.

Well, that got really long, and a bit rambly, sorry.

2 Likes

I have not set a back end, I am not there yet ā€¦

Thanks for all the clarifications, I did not know that is so complex to use an api, I just really wanted to see if I can do itā€¦

1 Like

itā€™s also worth remembering that if an api is free to use and youā€™re not paying for it or storing specific data for your app in it ā€“ itā€™s not particularly dangerous to leave something valueless out in the open.

donā€™t let this, totally true and quality, quality conversation about maintaining the secrecy of api keys make you think you didnā€™t achieve something making this ā€“ you have, keep going.

1 Like

Thanks for the encouragement! :smile:
It is a free API the one that I used, but it is good to know that I made a mistake with the key, at least for the future I will know that I have to hide it, even if, I do not know how to do that yet.

It looks really good! I think itā€™d be cool to hide the " quotation marks when the loading spinner is shown.

Nice design :ok_hand:

hovering on twitter button increases the size of the container box but the ā€œnew quoteā€ button doesnā€™t, is that intentional?

Not really to be honestā€¦it just happened that way.

1 Like