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?
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):
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.
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)