Code Challenge: Node.js and React

The Goal

Build an app that displays a collection of books and allows for the creation, update, and deletion of a book. The backend should be a Node.js/Express API. The frontend should be React.

My Approach

My React component tree, complete with all of that icon-y goodness.

I was excited by the challenge of working in Node/Express, which I had not done in awhile. My last React project was written with Redux to handle my state management, so writing without that would be a fun change of pace as well.

For the backend, I found a course on building RESTful APIs in Node. I took notes in my code as I went for easy recall later — I definitely want to use Node in a future project. Having worked for awhile in Ruby and Ruby on Rails, it was nice to work in straight JavaScript. To test my API calls, I used Postman which is useful as a start, though no substitute for actually making the calls from your frontend form components.

I did my last full stack app with a React/Redux frontend so during this project I would occasionally be writing my components, realize I had used Redux to manage my state, and then had to go back to rip it out. There were times when I needed to check my notes on fetch calls so that I passed in the data properly, but then my memory started to return.

Styling

I chose a bright green, red, black, and olive color scheme from the Hook Agency’s useful aggregation of color schemes from across the web. It is a great place to find inspiration and includes hex codes for each color — a great time-saver!

I used the Semantic UI React library for theming which I like because it has a variety of useful collections, like forms and cards. In addition, I love the collection of icons that are available because I am a sucker for slapping them on a button.

What I really like about Semantic and other libraries like it is their shorthand for keeping code organized and easy to read. Here is an example of a form to add a new book, which includes fields and labels for a variety of input types. As a side note, there is also useful documentation on making these forms accessible.

<Form>
  <Form.Select
     label='Genre'
     options={genreOptions}
  />

  <Form.Input
     label='Title'
  />

  <Form.TextArea
     label='Description'
  />

  <Button type='submit'>Submit</Button>
</Form>

Takeaways

Overall, I had a fun time putting this app together. It was nice to be back to writing in React and creating an API in Javascript. I also want to give a shout out to styling libraries. I spent a lot of time researching my Node setup and reviewing my React notes. Thank goodness for libraries that make it easy to create a form, add buttons for navigating to other components, and display a list of items in an attractive way. That ease allows you to concentrate on other aspects of the app.

I did have a few roadblocks throughout the process:

  • My API ran into some CORS issues so to test my components, I needed to hardcode data. In the past when I have run into this issue, I had to adjust the settings in my backend to allow my API to receive requests from my frontend. No doubt, that was what needed to happen here. During my research, I found a middleware that would allow access to a variety of CORS requests. I would love to give it a try.
  • I also ran into some props passing and state issues. My theory is that it involves React Router props, but I ran out of time before I could figure it out. No doubt, this will be more easy to solve once I get the data flowing through my app with the middleware mentioned above.

Resources

To see how the entire project turned out, visit my Github repositories below: