A Little React Fun

Here’s a game that I created where you pick a movie with the highest iMDB rating… and some things I learned making it.

Click Here to Play the React Christmas Movie Quiz!

I enjoy tinkering around with different technologies, and where I sit today, most businesses want React. I looked into it a little over two years ago, but Angular 2 was the hot number, so my focus was on that at the time. Over the Christmas weekend, I cracked open some Pluralsight videos, blogs and pieced together a fun little quiz application.

It lacks the polish I would have liked, but there’s enough in place to demonstrate that I’ve learned a few things and had fun at it.

Rather than going into the standard talk about React mojo: bindings, scope, virtual DOM, functions, classes, ES6, TypeScript, etc. I’m just going to go over a couple of specific areas that I got stuck on and found interesting.

1. Use setState instead of your typical assignment when applying changes to the state.
2. It’s very Dependency Inversion based. Pass the method definitions from the highest level (where your state is) down.
3. Those aren’t HTML tags, they’re JSX. They’re a shortcut to the mojo.
4. If something isn’t updating, check the context of your props.

And some not-so-technological stuff I learned:

1. Give the user some context for the data. At first, it didn’t load thumbnails. It loads them, but they’re still too small. Nevertheless, there’s a reason why icons are so popular. They give us context.
2. Give the user some reference for the data. Like the thumbnails, the app didn’t used to show the IMDB link after the user made their selection. There were quite a few times when a movie popped up and I thought “Hey! What’s that movie about?” Now I have a way to learn.
3. Don’t stuff the interface with data. I also had the list of actors, synopsis, rating, etc. That was way too much information that just cluttered up the UI. The user might still want that information to make their pick, but it’s meta. It’s auxiliary. In short, it’s unnecessary.
4. Form is not function. My laptop dumped my changes because of Apple’s Touch Bar. Nice little invention if it’s needed, but because my knuckle hit a little virtual button, a day of tinkering was lost. I found several other strong rants from developers against the Touch Bar, which ensured me that I was in good company with my frustration.

Click Here to Play the React Christmas Movie Quiz!

So what’s next regarding this app? I have a list of features and behaviors that I’d like to see. What I add into it depends on the time I have and the priority to tinker and learn. I showed the current product to a friend of mine who has a good eye for UI and she pointed out some overall design changes which we sketched out:

The list below is incomplete and isn’t in any particular order:

• UI looks rough. Clean it up as follows:
  • Change input from lines to boxes. This will improve spacing and provide more real-estate to the movie poster images.
  • After each answer is selected, provide a “Next” button instead of a “Play Again” until all 10 questions have been picked.
  • Show the number of correct and incorrect answers with colored icons and the number of remaining questions with a grey one. For example, use little colored elf shoes for correct answers, black elf shoes for wrong answers and grey outlines for those not answered yet.
  • Show larger thumbnails with little text beneath.
  • In the little text beneath the posters, show an iMDB badge that the user clicks on to go to the site instead of the current text. Also show the rating on the upper-right corner of each block in a circle.
  • When a poster is not available, show a generic greyed out “Poster Not Available” image.
  • Do better in filtering out the embarrassing movie titles that sometimes show up. (either an IMDB ID filter or a title filter).
  • The “Play Again” button only shows after all 10 attempts have been used up, effectively restarting the game.
  • Better colors for hovering, for correct answers and for incorrect answers.
  • Add a little “X” or Check mark for wrong/right selected answers.
  • Hold the space for the movie blocks so that the items on the bottom of the screen don’t jump up to the top while the next round is being pulled from the web service.
  • Put a placeholder for the movie blocks while their promises are getting filled, then populate them with the actual content.
  • Perhaps add a “Skip” button?
  • A Cleaner and more modern representation of each movie block.
• A final rating from 0 (“Cotton-Headed Ninny Muggins”) to 10 (“Santa Clause Prodigy”) and every variant of Elf-isms in between (taken from my wife’s favorite holiday movie, Elf).
• A top-score billboard. (Let the user enter in a few characters, but scrub it for profanity).
• Make the product take “themes”. Themes would direct the engine to certain types of movies (e.g. “Musicals”), color schemes and icons, and top-score tables.
• Allow the user to select which “theme” to play.
• Download the values from the OMDB system into a local MySQL database and create a back-end PHP page that mediates the requests. This would allow me to get around the 1,000 request limitation and filter out crazy films from the game.
• Allow user to change the game from using the iMDB rating to using Rotten Tomatoes.
• Put a title and instructions at the top of the game board.
• Add an informational badge within each movie block that allows user to see the actors and plot line. (Which year was that Christmas Carol with Patrick Stewart?)
• Offer a secure feedback form as a fresh pop-up from a link on the game page so people can make suggestions without this blog getting injected with a hack-job.
• The list could go on, but I think I’ve touched on the main faults and hit a few extra “nice-to-haves” in this existing list.

Part of software design with unfamiliar technology is to throw something out there, get a feel for what works and what doesn’t, then either rewrite or build upon what you’ve got. There were a few throw-aways while I built the current game and one accidental code loss that forced me to rewrite about a third of the code. But I learned a good deal, and am proud of what I learned far more than the current state of the movie game.

Nevertheless, I hope you have fun with it. If you have any questions as to its design or have any suggestions – please drop me an email.

Cheers!