DEV Community

Cover image for Dabbling with React
Marcus Gutierrez
Marcus Gutierrez

Posted on

Dabbling with React

Ever notice that you can be in a bookstore, myriad books at your fingertips, and you'll still not know what to read next?

I am currently grinding through some introductory React and, when tasked with creating my first portfolio-worthy project, decided to address a pervasive (at least per my bookworm friends) annoyance for those locked-down at home. What should I be reading? My fiancée struggles with this question. Heck, everyone I know struggles with it.

When I came across an API for the New York Times' best-sellers list, I figured that it would be pretty useful to gain experience to honing-in on some of my React weak-points all while working with a third-party API and, perhaps somewhat idealistically, finally figuring out what to read on a Sunday afternoon!

Judging a book by its cover?

My Rendered App!

GitHub logo mgtz505 / nyt_bestsellers

A React Application; Utilizes the NYT Bestsellers API

NYT Best-Sellers (An App built w/ React)

What is this application?

When I find myself wanting to read a new book, I tend to spend more time than I should trying to find which book I want to begin reading. Sometimes it can feel like a huge commitment! I created this application to help users (hopefully) find their next read more quickly than they otherwise would. This app uses the NYT Developer API to render a display of the latest iteration of the NYT's bestseller list for four categories. Once a category has been selected, users can select among 15 rendered book-covers that will populate the display. Once a title has been selected, details about that selection appear below, including links to online-retailers where that title can be purchased.

Main Component (Results render here):

Screen Shot 2021-03-15 at 1 14 13 PM

Result Details

The Heroku-deployed first-pass at my app can be found at the link above, or you can head directly to my repo.

I think from the onset I had a pretty clear vision of how I envisioned this app developing. I wanted my components to be simplistic and for my rendered results to be responsive to click events. I used CSS grid to display the results of my API pulls.
Alt Text
Each rendered image tag passes state to the ResultDetails component once a user clicks on a book cover. In the ResultDetails component, details about that selection render.

Writer's Block (of Code)

This wouldn't have been a true project experience if I hadn't gone through some issues along the way. An embarrassing (albeit, probably relatable) number of these mistakes were simple bugs, mostly those pesky misplaced curly brackets and clappers. A more daunting structural issues I had to tackle involved filtering my API data. It was easy enough to make a call to the API and pull a single category of data, say hardcover fiction, but being able to build a component that allowed the user to select the category gave me a little more hassle. I came across an awesome tutorial that walked me through building an AirBnB-inspired drop down menu. After I had properly formatted my URL variations I was able to incorporate them into the dropdown.

What about the second edition?

It's clear to me that there's still work to be done on this application. I think that the UX could use some cleaning-up. The first addition I'd like to tackle for this project would be to incorporate a scroll animation upon a user clicking on one of the rendered book covers. I also think that dynamic stying would be a great addition to my CSS. Currently, a lot of my div containers flow into each other unless the browser is maximized. Hopefully this isn't a one-hit wonder and I can take another pass at this idea once I get some React Native abilities under my belt.

Top comments (0)