- Web Applications
- Idea Prototyping
- Accessibility
- Usability Testing
Live-Coding a Fullstack Prototype – Episode 3
This post is part of a series
S1: Live-Coding a Virtual Bookshelf CRUD App
Follow along as Judith & Nils code a full-stack prototype app, proving that turning prototypes into working solutions is a viable option.
Live-Coding a Fullstack Prototype – Episode 1
3′ reading timeLive-Coding a Fullstack Prototype – Episode 2
3′ reading timeLive-Coding a Fullstack Prototype – Episode 3 (currently reading)
2′ reading timeLive-Coding a Fullstack Prototype – Episode 4
2′ reading timeLive-Coding a Fullstack Prototype – Episode 5
2′ reading timeLive-Coding a Fullstack Prototype – Episode 6
3′ reading timeLive-Coding a Fullstack Prototype – Episode 7
3′ reading timeLive-Coding a Fullstack Prototype – Episode 8
4′ reading timeLive-Coding a Fullstack Prototype – Episode 9
3′ reading timeLive-Coding a Fullstack Prototype – Episode 10
3′ reading timeLive-Coding a Fullstack Prototype – Episode 11
3′ reading time
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 Link to this headline
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 Link to this headline
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 Link to this headline
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 Link to this headline
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 Link to this headline
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 Link to this headline
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.
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.
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.
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.
