- Discovery Research
- Design System
- Web Applications
- Idea Prototyping
S1: Live-Coding a Virtual Bookshelf CRUD App
Follow along while Judith and Nils set out to code up a fullstack prototype app to prove that implementing a working thing is a viable option when working with prototypes.
- Web Applications
- Idea Prototyping
- Web Applications
- Idea Prototyping
- Web Applications
- Idea Prototyping
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
- Web Applications
- Accessibility
- Usability Testing
![Video poster for: EP01: Live-Coding a Fullstack Prototype in React, Supabase, Tailwind, TypeScript](https://img.youtube.com/vi/8S1fmge8o6Q/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 1
Explore quick prototyping techniques using React and Supabase to create a virtual bookshelf. Learn how to set up a CRUD interface and integrate user feedback.
![Video poster for: EP02: Live-Coding a Fullstack Prototype in React, Supabase. In this episode: Setting up SupaBase π](https://img.youtube.com/vi/LT7X8H6rEko/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 2
Explore quick prototyping techniques using React and Supabase to create a virtual bookshelf. Learn how to integrate Supabase with React
![Video poster for: EP03: Live-Coding a Fullstack Prototype. In this episode we create our first form](https://img.youtube.com/vi/WyAk9m1xqW4/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 3
How to build a bookshelf app using the SShadcn component library, React Hook Form, and Zod. Learn about form handling, validation, and tackling common errors.
![Video poster for: EP04: Live-Coding a Fullstack Prototype. In this episode: We send data to Supabase π.](https://img.youtube.com/vi/OL47hH8kW18/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 4
Explore insights on form customization, data validation, and Supabase integration in building a virtual bookshelf prototype.
![Video poster for: EP05: Live-Coding a Fullstack Prototype: Challenges of Form Handling in React Hook Form](https://img.youtube.com/vi/C28ftOfllyI/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 5
The challenges in form handling with React Hook Form and state management in Shadcn dialog components. Learn how to integrate React Router.
![Video poster for: EP06: Live-Coding a Fullstack Prototype: Editing Books and UI Improvement](https://img.youtube.com/vi/_6iLp0Vyiio/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 6
How we fixed the add book dialogue issue and discussed state management in our virtual bookshelf app using React and Supabase.
![Video poster for: EP07: Live-Coding a Fullstack Prototype: Editing Books and UI Improvement](https://img.youtube.com/vi/l8afT8mtV8M/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 7
Learn how to add edit functionality to your virtual bookshelf app in our latest coding session. Follow our step-by-step guide using React and Supabase.
![Video poster for: EP08: Live-Coding a Fullstack Prototype: Enhancing User Engagement with Star Ratings](https://img.youtube.com/vi/X-WzgPVZOG4/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 8
How implementing star ratings can boost user engagement by providing valuable feedback and enhancing interaction with your digital products.
![Video poster for: EP09: Live-Coding a Fullstack Prototype: Streamlining Book Cards](https://img.youtube.com/vi/WVXd4PXxswQ/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 9
Discover the latest updates to our virtual bookshelf project, including context menus, optimized book card displays, clickable star ratings, and more.
![Video poster for: EP10: Live-Coding a Fullstack Prototype: Optimizing Performance with Different Approache](https://img.youtube.com/vi/N54S321bVIc/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 10
Learn how to build a star rating component with CSS and dynamic updates. Discover state management tips, troubleshooting, and using Supabase for ratings.
![Video poster for: EP11: Live-Coding a Fullstack Prototype: UI Improvements, Star Ratings, and Future Plans](https://img.youtube.com/vi/yr0QuUS639g/hqdefault.jpg)
Live-Coding a Fullstack Prototype β Episode 11
How we improved our virtual bookshelf demo app by refining the star rating component, cleaning up the UI, and exploring new directions for future development.