Part 3, reviving fonstack.io an old concept I never made progress with because coding the UI was too daunting.
Objectives for the day
- ✅ Design the entire app in Figma with a Prototype
- ✅ Get the “Font Tryout Designer” UI imitation browser coded up in V0
- ✅ Supabase project set up
- ✅ Set up new local Next.js project with Next.js Supabase starter
- ✅ Set up Font Tryout Designer in Next.js project
- Get the page components scaffolding, sidebar, header, footer etc coded up in V0
- ✅ GitHub and Vercel CD set up
- ✅ Deploy to domain with SSL
- ✅ Supabase auth and Signup functioning on local and prod
- ✅ Install Satoshi Font
Well, that was Ridiculously productive. 11am – 1:40am marathon…
Discovering The Limits
The V0 (Claud Sonnet 3.5?) LLM really starts hallucinating badly at around 600 lines and sometimes times out requiring an additional “Continue Generation” button click to run all the way through the file. It will start to forget code for tasks that have been accomplished and break things that were working a few prompts back.
It’s not clear what dependencies are required
I asked for a lot of modals and form fields for this design.
I’m coming from a pure tailwind components stack and trying to wrap my head around how React, Radix primitives and shadcn/ui components interact. It got a bit complicated when V0 started adding things like DialogHeader dependencies which are not part of either library. In the end I asked it to remove DialogHeader and DialogFooter which were included and functional in V0, however I couldn’t see the source. I requested V0 follow “standard best practice from shadcdn without DialogHeader and DialogFooter” which fixed the issue.
Issues with Imported libraries
It’s a bit of a black box when the source runs on V0.dev, there are module imports included from directories you cant see into for example
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
at the start of the V0 .tsx file.
The LLM can’t tell you what source is in these. It also can only partially advise on what dependencies need to be added.
In my case these are actually dependencies that are generated as files in /components/ui/, and are from shadcn-ui and can be generated using the CLI. shadcn differs from other libraries in that packages aren’t installed with npm to node_modules. This is explained here nicely.
but I had to first work that out to then try to install in my local project with:
$ npx shadcn-ui@latest init
V0 Advised…
To install these components, run the following commands in your project directory:
$ npx shadcn-ui@latest add button $ npx shadcn-ui@latest add dropdown-menu $ npx shadcn-ui@latest add input $ npx shadcn-ui@latest add label $ npx shadcn-ui@latest add select $ npx shadcn-ui@latest add textarea $ npx shadcn-ui@latest add tooltip $ npx shadcn-ui@latest add dialog
So i tried installing shadcn-cli with npx, I was getting a command not found error.
$ sh: shadcn-ui: command not found
After a quick check of the shadcn CLI docs I ran it minus the -ui bit…
npx shadcn@latest init
I was required to delete components.json and everything else that needed to be configured was done through a wizard. I had 0 problems after that copying and pasting code straight out of V0.
Refusal to do hover states
Whatever prompt I tried I was unable to get a tailwind hover state on the “Add Tab” dropdown. The LLM started to do bizarre things like change the icons rather than change the hover state.
How to use V0 slowly emerges
- It’s clear that 500 LOC is the limit.
keep components small and pre-plan how to break the design down following a fairly standard approach
- If something has a large function that contains a list of hardcoded options like a big array or JSON object, do this in Cursor as iterating through lists takes a lot of generation time.
- A combination of Perplexity, Cursor for research outside of the V0 chat.
- Don’t use Google or Stackoverflow anymore, Perplexity’s all seeing eye has already read every discussion, forum post and blog and knows everything. reading docs for the tools are still important.
- Functions like converting hex to tailwind classes can be done easily with npm packages, but these can’t be required in V0. V0 can offer to recreate the functionality but that increases the line count and adds to the technical debt that needs to be addressed later. Probably tackle these in Cursor.
Organising V0 chats using naming conventions and a Git commit message
After creating a new chat, rename that chat to
[[PROJECT CODE]] [Major Component Version No (or chat)]-v[Last stable Prompt number] [Descriptive name]
[FS] 1-v1 Chrome UI Browser
When a chat has to be abandoned, copy the code out to a new chat and create a new Major Component version.
It takes a bit of discipline to remember to add the last stable prompt to the chat when ending a work session, but its worth it.
When copying and pasting into local use the same string as the commit message, that way the message can be tracked back to the chat.
Todays Progress
