Back to all series
  • Discovery Research
  • Design System
  • Web Applications
  • Idea Prototyping

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.

    Cover Image of Video

    Live-Coding a Fullstack Prototype – Episode 1

    Explore quick prototyping techniques using React and SuperBase to create a virtual bookshelf. Learn how to set up a CRUD interface and integrate user feedback.

    • Web Applications
    • Idea Prototyping
    Cover Image of Video

    Live-Coding a Fullstack Prototype – Episode 2

    Explore quick prototyping techniques using React and SuperBase to create a virtual bookshelf. Learn how to integrate Supabase with React

    • Web Applications
    • Idea Prototyping
    Cover Image of Video

    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.

    • Web Applications
    • Idea Prototyping
    • Accessibility
    • Usability Testing
    Cover Image of Video

    Live-Coding a Fullstack Prototype – Episode 4

    Explore insights on form customization, data validation, and Superbase integration in building a virtual bookshelf prototype.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    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.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    Live-Coding a Fullstack Prototype – Episode 6

    Discover how we fixed the add book dialogue issue, implemented delete functionality, and discussed state management in our virtual bookshelf app using React and SuperBase.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    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.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    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.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    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.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    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 SuperBase for ratings.

    • Web Applications
    • Accessibility
    • Usability Testing
    Cover Image of Video

    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.

    • Web Applications
    • Accessibility
    • Usability Testing