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

Live-Coding a Fullstack Prototype – Episode 3

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

Welcome back to our 3rd episode of live coding! As you know, in this series of blog posts, I'll walk you through my conversation with Judith as we continue developing our bookshelf application.

Summary

In this episode we delve into the use of the Shadcn component library to enhance our app with a button and a dialogue, explore form handling with React Hook Form and Zod, and tackle a common issue with uncontrolled inputs. This post will give you a detailed look at our process and the steps we plan to take next.

Introduction to the Shadcn Component Library

In our latest session, Judith and I decided to integrate the Shadcn component library into our bookshelf app. We started by adding a button and a dialogue component to our application. This library offers a sleek and modern UI, which aligns perfectly with the aesthetic we're aiming for.

Exploring React Hook Form and Zod

As we moved forward, we delved into form handling using React Hook Form and Zod. React Hook Form simplifies the process of managing form state and validation, while Zod provides a powerful schema declaration and validation library for TypeScript. Together, these tools streamline the creation and management of complex forms.

Building the Form

Our main focus was on implementing a form to add new books to our database. We discussed the structure of the form, including:

Form fields: Input elements for the book title, author, and other relevant details. Form items: Wrapper components that provide additional styling and functionality. Form labels: Descriptive text that guides the user through the form.

Tackling Uncontrolled Inputs

During the implementation, we encountered an error related to uncontrolled inputs. This is a common issue when dealing with form libraries, and we explored several solutions to address it. By the end of our session, we had a clearer understanding of how to manage form state and validation effectively.

Next Steps

Our next steps include defining the form schema using Zod and connecting it to our database schema. This will ensure that the data entered in the form is validated and stored correctly in our backend.

  1. Why did you choose the Shadcn component library?

    We chose Shadcn for its modern UI components, which align well with the design of our bookshelf app.

  2. What are the benefits of using React Hook Form and Zod together?

    React Hook Form simplifies form state management, while Zod provides powerful schema validation. Together, they make handling complex forms more efficient and reliable.

  3. How did you solve the uncontrolled input error?

    We explored several solutions, focusing on ensuring that all form inputs are controlled by React state. This approach helps in managing form state and avoiding common errors.

Author

Nils Borgböhmer
Nils Borgböhmer

Co-Founder, Head of Interaction Design

Connect on LinkedIn

Similar articles