Hack #7: v0 · v0
7 May, 04:55
Wikipedia — Neubrutalist Edition What I Built A live Wikipedia client with a bold Neubrutalist UI and AI-powered Text-to-Speech. Every article, image, and news feed is fetched in real-time from en.wikipedia.org. Users can search, browse trending articles, explore categories, and — most importantly — highlight any text to hear it read aloud by an AI voice. What Problem It Solves Wikipedia's interface is stuck in the 2000s and has no native audio feature. This project gives it a modern, visually striking redesign while adding voice accessibility — so anyone can listen to articles instead of reading them. How ElevenLabs Is Used ElevenLabs powers the listen feature. When a user selects text, it's sent to a secure Next.js API route that proxies the request to ElevenLabs' eleven_turbo_v2_5 model. The generated MP3 streams back to the browser for instant playback with play/pause controls and download. The API key stays server-side for security, and input is capped at 2,500 characters to manage costs. How v0 Is Used v0 by Vercel was used to design and build the entire frontend — the Neubrutalist design system (thick borders, hard shadows, zero radius, vibrant colors), all page layouts (homepage, articles, search, categories), the component library, responsive design, and dark mode. It turned what would be days of CSS and layout work into rapid, iterative prototyping.
