A reimagined Wikipedia client featuring a bold Neubrutalist design aesthetic. Every article, image, and feed is fetched live from en.wikipedia.org — no scraping, no static data. Built with Next.js 16, Tailwind CSS 4, and powered by ElevenLabs AI Text-to-Speech.

• Today's Featured Article — highlighted daily pick from Wikipedia's front page
• Most Read Articles — trending articles with view counts
• In the News — current events with linked articles
• On This Day — historical events for today's date
• Picture of the Day — Wikimedia Commons daily image with credits & license info
• Category Portals — browse Science, Technology, History, Geography, Arts, Philosophy, Mathematics, and Society
• Full Article Rendering — complete Wikipedia articles with table of contents, images, tables, references
• Search — autocomplete-powered search with prefix suggestions
• Random Article — jump to a random Wikipedia page
• Recent Changes — live edit stream from English Wikipedia

Highlight any text on the page and an inline "Listen" player appears. Powered by ElevenLabs:

• Streaming TTS — sends selected text to ElevenLabs via a secure server-side proxy (/api/tts)
• Playback Controls — play, pause, resume with a progress bar
• Download — save the generated audio as an MP3 file
• Character Limit — capped at 2,500 characters per request to manage API costs
• Model — uses eleven_turbo_v2_5 for low-latency, high-quality speech
• Default Voice — "Rachel" (21m00Tcm4TlvDq8ikWAM), configurable via request body

The UI follows a Neubrutalist design language — not minimalist, not flat, not skeuomorphic:

• Thick black borders (3–4px solid) on every card, button, and interactive element
• Hard-offset shadows (no blur) — 6px 6px 0 0 #0a0a0a giving a sticker/cutout feel
• Vibrant accent palette — Brutalist Yellow (#ffd23f), Hot Pink (#ff5d8f), Cyan (#38bdf8), Lime (#b8f24a)
• Cream paper background (#fdf6e3) with a subtle dot-grid pattern
• Zero border radius — every element is sharp-cornered
• Press-down hover animation — buttons physically shift into their shadow on click
• Neon green text selection (#39ff14)
• Typography — Archivo Black (display), Space Grotesk (body), JetBrains Mono (code/labels)
• Scrolling marquee banner with live Wikipedia stats
• Diagonal stripe patterns on decorative elements
• Dark mode support with inverted palette

• Node.js 18+
• npm, pnpm, or yarn
• An ElevenLabs API key (for Text-to-Speech — the rest of the app works without it)

# Clone the repository
git clone <your-repo-url>
cd wikipedia
# Install dependencies
npm install
# or
pnpm install

Copy the example env file and add your keys:

cp .env.example .env.local

Then edit .env.local with your actual values. See .env.example for all available variables.

npm run dev
# or
pnpm dev

Open http://localhost:3000 in your browser.

npm run build
npm start

wikipedia/
├── app/
│ ├── api/
│ │ └── tts/
│ │ └── route.ts # ElevenLabs TTS proxy endpoint
│ ├── about/ # About page
│ ├── category/[slug]/ # Category portal pages
│ ├── random/ # Random article redirect
│ ├── recent/ # Recent changes feed
│ ├── search/ # Search results page
│ ├── wiki/[...slug]/ # Article renderer
│ ├── globals.css # Neubrutalist design system (tokens, shadows, prose styles)
│ ├── layout.tsx # Root layout (fonts, analytics, TTS provider)
│ ├── loading.tsx # Skeleton loading state
│ ├── not-found.tsx # 404 page
│ └── page.tsx # Homepage (featured feed)
├── components/
│ ├── brutal-box.tsx # Reusable neubrutalist card/section primitives
│ ├── selection-speaker.tsx # ElevenLabs TTS floating player
│ ├── wiki-header.tsx # Navigation header with search
│ ├── wiki-footer.tsx # Site footer
│ ├── wiki-article-content.tsx # Article HTML renderer
│ ├── article-toc.tsx # Table of contents sidebar
│ ├── top-progress-bar.tsx # Route-change progress indicator
│ ├── wikipedia-logo.tsx # SVG logo component
│ └── ui/ # shadcn/ui base components
├── lib/
│ ├── wikipedia.ts # Wikipedia REST/Action API client
│ └── utils.ts # Utility helpers (cn, etc.)
├── styles/
│ └── globals.css # Additional global styles
└── public/ # Static assets (favicons, etc.)

Browser (SelectionSpeaker)
 │ POST /api/tts { text, voiceId? }
 ▼
Next.js API Route (app/api/tts/route.ts)
 │ Validates input, caps at 2500 chars
 │ Attaches ELEVENLABS_API_KEY server-side
 ▼
ElevenLabs REST API
 │ Returns audio/mpeg stream
 ▼
Browser plays MP3 via ObjectURL

• Security — the API key never reaches the client
• Cost control — input is truncated to 2,500 characters server-side
• Streaming — the MP3 stream is piped directly back to the browser

Contributions, issues, and feature requests are welcome!

This project is open-source and free to use.