Back to posts
  • Web Development
  • User Experience
  • Accessibility
  • User Testing

Live-Coding a Fullstack Prototype – Episode 6

Nils Borgböhmer
Nils Borgböhmer
This post is part of a series

Welcome to our latest blog post, where we summarize our recent YouTube episode on building our virtual bookshelf application using React and SuperBase. Below the video header, you'll find an in-depth discussion of the topics we covered.

Fixing the Add New Book Dialogue

One of the main issues we tackled in this episode was the problem with our add new book dialogue not closing upon form submission. To address this, we decided to manually handle the dialogue's opening and closing using React's useState hook. This approach allowed us more precise control over the component's behavior.

Refactoring and Organizing the Code

To keep our codebase organized, we refactored the dialogue component by moving it into the add book component. This not only improved the structure but also made it easier to manage and debug.

Considering React Query for State Management

We briefly discussed the idea of using React Query to manage the state of our data and invalidate queries. However, to maintain simplicity in our application, we opted not to implement it at this stage. Instead, we focused on ensuring our current state management approach was robust and efficient.

Updating State After Adding a New Book

Another critical aspect we covered was updating the state of the books in our application after adding a new one. We explored the possibility of implementing an optimistic UI approach to provide a seamless user experience.

Adding Delete Functionality

In addition to handling the add new book dialogue, we also worked on adding the delete functionality to our CRUD application. This allows users to remove books from the database, enhancing the app's usability.

Discussing Prop Drilling and React Query

We touched upon the concept of prop drilling and its potential issues when passing props through multiple components. React Query was mentioned again as a potential solution for data fetching and updating, but we decided to keep our current approach for now.

Next Steps: Editing Books and UI Improvement

Looking ahead, we plan to cover editing books and improving the user interface in future episodes. We also praised SuperBase for its ease of use and potential for authentication and data security, which we'll explore more in the upcoming sessions.

  1. Why did you choose React useState for handling the dialogue?

    We used React useState to manually control the opening and closing of the dialogue for better precision and control over the component's behavior.

  2. What is an optimistic UI approach?

    An optimistic UI approach updates the UI immediately after a user action, assuming the operation will succeed, thus providing a smoother user experience.

  3. Why didn't you implement React Query for state management?

    We decided to keep the application simple and not add extra complexity at this stage. However, we may consider it for future enhancements.

Author

Nils Borgböhmer
Nils Borgböhmer

Co-Founder, Head of Interaction Design

Connect on LinkedIn

Similar articles