Back to all blogs

Bootcamp Week 9 & 10 – Creating the Frontend for a FullStack Project

React logo.A notepad that shows a wireframe template.Nodejs logo

For weeks 9 and 10, we continued work on our final project, RareKind, which features a Node.js backend and a React frontend. During this time, we focused on integrating data from the API into the frontend and implementing all the functionality for the UI we had designed the previous week.

Using Redux for State Management

In our project, we were using GET, PATCH, and DELETE with collection and animal data from the API and for each we created a Redux Slice. For instance, I worked on editing animals on the frontend and with its own Redux Slice I was:

  • Creating an async thunk(editItem) that sends a PATCH request to the API with the updated animal data, then returns the response.
    • A screenshot of a Redux Async Thunk.
  • Using a slice (editItemSlice) to keep track of the current animal being edited (item) and the collection it belongs to (collectionId):
    • A screenshot of a Redux slice.
  • Providing reducer actions(setItemToEdit, clearItemToEdit, etc.) that let the UI set or clear which item(animal) is being edited before making the API call.
    • A screenshot of Redux reducers.

By keeping the edit state and API request in one place, we make the editing process simple, structured, and much easier to follow.

Considering User Experience

I believe user experience is a crucial part of frontend development - you want people to navigate and use your website without friction. In RareKind, several features were added specifically to make the experience smoother:

  • Required labels on form inputs - All forms include required fields. Instead of letting users submit an empty form and showing an error afterward, we clearly indicate which inputs must be filled before submission.
  • Editing animals – When a user edits an animal, the existing data is preloaded into a pop-up edit form. This saves them from having to start from scratch and makes the editing process quicker and more intuitive.
  • Breadcrumbs – Instead of relying on URL paths, users can navigate back through the site using breadcrumb navigation, making it easier to understand where they are and return to previous pages.

Overall Thoughts on this Week

Overall, these weeks deepened my understanding of API integration, improved my confidence with Redux Toolkit, and reinforced the importance of thoughtful UX design when building a frontend.