PrototypeClient prototype brief

SOURCE: Interactive Book Prototype

Readers answer a guided questionnaire, typed or spoken, and receive a personalized 4-chapter illustrated storybook, with a separate executive dashboard.

SOURCE: Interactive Book Prototype screenshot

Team of one· Solo designer & engineer

No team, no agency, no hand-offs. I owned this project end to end:

  • Requirements
  • Architecture
  • UI & UX
Stack
Next.js 15Tailwind v4Web Speech APIshadcn/uiRecharts

What was broken, and what fixed it

  1. Problem: The client needed to test the product idea with real readers before building a backend.

    Fix: A backend-free V1 keeps reader data in browser storage, so the questionnaire, the 4-chapter storybook, and the executive dashboard all run at a public URL with zero setup.

  2. Problem: Answering many questions in one sitting is a lot to ask, so progress had to save.

    Fix: 24 questions, typed or spoken, fit a session of about 20 minutes. Every keystroke autosaves, and login resumes at the first unanswered question.

Approach

  • Backend-free V1 using browser storage, so the full experience can be tested with zero setup.
  • Book generation sits behind one function, so it can be swapped for an LLM call without UI changes.
  • 24 questions, a representative subset of the planned 50 to 80, so a test session fits in about 20 minutes.
  • Print-to-PDF doubles as "download your book".

What I built

  • 24-question questionnaire with voice input via the Web Speech API
  • Autosave on every keystroke and resume at the first unanswered question
  • 4-chapter storybook reader with print-to-PDF; the reader titles the final chapter
  • Dark-mode executive dashboard with KPI cards, funnels, and live reader data
  • Custom "Crayon Storybook" design system

Architecture

Interface

  • Next.js 15
  • Tailwind v4
  • Web Speech API
  • shadcn/ui
  • Recharts

Infrastructure & delivery

  • CI
  1. 1
    Next.jsTailwindCI

    Next.js 15 app with Tailwind v4, exported as a static site and deployed to GitHub Pages by GitHub Actions.

  2. 2

    All reader data lives in browser storage behind one store module, so a real database only touches that file.

  3. 3

    One generator function turns the answers into a typed book object that the reader renders.

  4. 4
    shadcn/uiCharts

    A separate admin dashboard built with shadcn/ui and Recharts reads live reader data from the browser.

Engineering

  • Book generation is deterministic now and designed so an LLM call can replace one function with no UI changes.
  • Every keystroke autosaves, and login resumes at the first unanswered question.
  • Layouts were checked at phone width.
  • Known V1 limits are documented: data lives in one browser and local passwords are not production-grade.

Outcome

  • A working end-to-end prototype at a public URL, testable with no backend.