Random Quote Generator - Project Feedback

Code Feedback
1

First post, first project completed.

Looking for any and all feedback on this project. Got the idea and design from the Front End Libraries Challenge but the code is original. I was able to upload the project to Heroku and the code to Github. I must say I learned a lot from doing this project, namely React including properties and state, using the command line, Git and Github, Heroku, .json files, and server setup.

I plan to start a new project soon but any thoughts on how or if this is acceptable to present to potential employers? Or should I have some a little more complex to present?

Application: https://whispering-harbor-73765.herokuapp.com/


Thank you all!

2

Just a few things to consider:

  • When I make the text size bigger the Next Quote button starts overlapping the text (especially at narrower browser widths). To test this, using FF, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Hold down Ctrl and scroll your middle mouse button to increase the size.
  • Header levels should always start at h1, so change the h3 to h1, but…
  • I don’t think semantically that the quote text should be in a header tag. The header tag should be something like “Inspirational Quotes” and then the actual quote text should just be in a <p> tag.
  • Fix the <title> so it says something other than ‘React App’.
  • If you really want to get picky, all of the content should be wrapped in a <main> or you could use role="main" on one of your outer <div>s
  • Responsiveness is good but I would consider making the side padding/margins much smaller for narrow browser widths so you have more room for the quote.
  • I would make the focus indicator on the tweet link stand out more, especially since the Next Quote button comes before it in the tab order but yet is to the right of it on the screen.
  • A few of the color combinations are not accessible (not enough contrast between the text color and the white background). For example, yellow on white.

You’re right, this is a pretty simple app, so not much to highlight for potential employers as is. If you are going to eventually have other more complex projects to show off then you can probably leave this one out. Or you could make some enhancements to this one. Maybe you could add a database backend to pull the quotes from? Or create your own server for generating random quotes and query that? You could add some fancier transitions between quotes. You could give the user options for displaying the quotes (dark mode, silly mode, etc…). Maybe not everyone wants inspirational quotes, maybe some people want funny, or even abusive quotes?

Overall, this project is really about learning React and it sounds like you have accomplished a lot there. So pat yourself on the back for a job well done and have fun diving into your next project.

1 Like