Quotalog - A Random Quote Machine Built with React

Hello, Campers!

I’ve built a random quote machine with React. It ended up being really similar to the one given as an example with the project requirements since I really like the design of it. Besides the tech stack (React vs. vanilla web technologies), the main difference is that my app uses completely random colors as a ‘theme’ color instead of using predefined colors. I also a added a translate button which opens Google Translate with the quote text entered and the target language set based on the user’s browser language. Anyways, you can view it online here. Also, the source code can be found here.

Thanks for any feedback.

By the way, you are welcome to use the quote data/endpoint I’m using for this app in your own projects. You can access it here.

Looks really good! I learned few things from your code like this.

quotes: require('../shared/quotes.json').quotes

Also, how do I use emoticons in markdown or vscode?

1 Like

Good job. My 2 cents:

  • From UX point of view having a button that looks like two buttons is confusing.

  • Not mobile responsive :cry: (but it should be)

  • componentWillReceiveProps is deprecated.

  • Inevitably getRandomQuote will generate the same quote (probably even multiple times in a row).

1 Like


VS Code doesn’t render emojis but GitHub does. You just enter the name of the emoji like :blush: and it shows up. :blush: Here is the complete list of emoji markup that you can use on GitHub.

Edit: I just found an extension named Markdown Emoji which adds markdown emoji syntax support to VS Code’s markdown preview. You can install this also if you want to see your emojis in VS Code md preview as well.


  • You’re right about the translate button. I will replace it with a less confusing one.
  • Being responsive was not among the requirements. :neutral_face: This is literally the reason why I didn’t care about it. But I will make it responsive as soon as I get the time to work on it.
  • Glad you mentioned it. Will get fixed.
  • getRandomQuote could definitely use a refactor. I think I’m gonna start from here and work my way up to the top of the list.

Thanks again for the detailed examination. :+1: