React - Random Quote Generator

Nothing particularly exciting but am glad to finally be doing projects. Used Bootstrap and create-react-app using fetch and the CamperBot API to make this project.

Live Version: https://rsheppard83-rqg.netlify.app/
Repo: https://github.com/rsheppard83/random_quote_generator

Your RQG looks good @rsheppard83.

I don’t often comment on someone’s design but maybe think about;

  • having the quote on top. Maybe also use a different font so it stand out
  • move the buttons below the quote. I’m a little ambivalent about the text telling what the buttons are for as they seem to be self-explanatory but if you include the text maybe a little smaller or lighter wouldn’t detract from the quote.

Again, these are suggestions. You don’t have to incorporate them.

1 Like

A very solid effort. Not too much to critique here. I do agree with @Roma that most people would expect the buttons to be below the quote. And definitely use a different font for the quote and make it bigger so it stands out more.

A few other things:

  • You’ve got the font weight on the instructions turned down to 300 which is making it much harder to read (at least on my computer) because the actual color is much lighter than what you have assigned it. I would leave it at normal font weight so that it darkens back up. Also, since all other content is centered it seems like the instructions should be centered too.
  • The author text is very small and since it is a lighter color may be hard to read for some people. If you make the quote size bigger then you can also make the author comparatively bigger to solve this issue.
1 Like

Nice one, am accessing this with my phone it nice

1 Like

Thanks for all the feedback. I’ve totally stripped it back and redesigned it as I agree with all the comments. Its alot more simplified now but I prefer it.