Times Say - Reflecting on my first React project

Are you an avid reader of The New York Times, or a film buff? Perhaps someone with both inclinations? Have you always wanted a quick and easy way to see what movies The New York Times has reviewed? Then Times Say is the web application for you.

Times Say is an exploration of the React.js front-end library, using functional components - the latest trend in React's living design spec. It fetches movie reviews from The New York Times Movie Review API (NYT API) and presents them in a beautiful, card based format, built using React Bootstrap components. Using Times Say, you can quickly search for a movie, see if there's a NYT review of it, and go straight to The New York Times website to read the real review. It's fast, it's simple, and dare I say, a little fun to use? To generate visual interest, I also fetch the movie poster from The Movie Database API (TMDb API) and display the result (if found) in the detail card for the movie review. I'm really quite pleased with how it turned out, so I invite you to try it out for yourself at the link below:

Try out Times Say

Check out the development process on GitHub

Please feel free to submit pull requests if you fix or add something that I haven't done yet!

Design phase

An important part of the development process is planning and research. I designed wire frames and a component hierarchy diagram to ground my thoughts and have something to build off of. I actually ended up with 3x the number of components I originally planned for! I found it relatively easy to refactor my code as I developed the app, in large part due to how quick it is to scaffold user interfaces (UI) in React. The final product resembles the wireframes, which were easy to realize with React Bootstrap.

Features

The first thing you'll notice is the large search bar. Searching is the backbone of the experience so it's integral to the UI. On a successful search, a collection of movie review 'cards' is displayed, in order of descending date, and the user can page through the data set dynamically. Selecting any card displays the details of that review, potentially with a movie poster. Finally if the review blurb catches your interest, you can click on through to The New York Times review page.

If the user chooses to search an empty query, all reviews are listed, going back in time through the archives. I thought it was a neat feature and it especially highlights the pagination component.

Growth as a programmer

For this project I worked with two APIs, and had to 'plug them together' with my own application, which was challenging. To be robust, I wrote async / await functions for my fetch requests, even having to nest them in one case, which was cool to implement. I learned that sometimes data won't always be there when you need it (missing fields in the API objects), so it made me program more defensively to anticipate and counter unintended UI bugs. I got a lot of practice with React hooks, React Router, and React Bootstrap too.

The use of Bootstrap made it easy to build out a clean and consistent interface, but sometimes I found it was easier to render my own elements and completely control the styling. I'm particularly proud of all of the little 'effects' I've hidden throughout the UI. I try to focus on small things like that to give the application a playful interface, something that's fun to use.

Highs and lows

During this project I have observed that the developer tools on any major browser have A LOT of utility to offer. Using the inspector, I found the source of The New York Times iconic fonts. So I borrowed these fonts by importing them into my CSS files. I had a particular nasty bug that would only show up in my production build of the application, with a vague error message only indicating an issue with how I was retrieving resources from the TMDb API. By using the network requests tool, I was able to fix the problem: a singular, erroneous forward slash at the end of my API URL. Go figure.

Future Plans

There are some additional search options on the NYT API I would like to implement, plus I want to add a loading indicator to smooth out the user experience. I would also like to tackle the responsive design aspect of a web application.

Thank you for reading and I hope you enjoy Times Say!