🌐 Wikipedia — Neubrutalist Edition

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.

---

✨ Features

📖 Live Wikipedia Data

• 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

🎙️ ElevenLabs Text-to-Speech

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

🎨 Neubrutalist Design

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

---

🚀 Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
Styling	Tailwind CSS 4 + custom Neubrutalist design tokens
UI Primitives	Radix UI (Accordion, Dialog, Dropdown, Tooltip, etc.)
Icons	Lucide React
AI Voice	ElevenLabs API (eleven_turbo_v2_5)
Charts	Recharts
Analytics	Vercel Analytics
Language	TypeScript 5.7

---

🛠️ Getting Started

Prerequisites

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

Installation

# Clone the repository
git clone <your-repo-url>
cd wikipedia

# Install dependencies
npm install
# or
pnpm install

Environment Variables

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.

Run the Dev Server

npm run dev
# or
pnpm dev

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

Build for Production

npm run build
npm start

---

📁 Project Structure

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.)

---

🔌 ElevenLabs Integration Details

Architecture

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

Why a Server Proxy?

• 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

Voice Configuration

Setting	Value
Model	eleven_turbo_v2_5
Default Voice	Rachel (21m00Tcm4TlvDq8ikWAM)
Stability	0.45
Similarity Boost	0.75
Style	0.15
Speaker Boost	Enabled
Output Format	mp3_44100_128

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📝 License

This project is open-source and free to use.