Scrollipedia

Inspiration

We wanted Wikipedia browsing to feel as effortless as scrolling a feed, with a mind map that lets curiosity lead somewhere deeper.

What it does

Scrollipedia serves random Wikipedia articles, connects related topics in an interactive mind map, narrates articles, and saves discoveries and exploration paths.

How we built it

We used Next.js, React, TypeScript, and Tailwind CSS. Wikipedia and Wikidata provide content and connections, React Flow renders the mind map, and ElevenLabs Flash generates narration.

Challenges we ran into

Wikipedia rate limits, unreliable images, broken multi-word topic links, and slow narration. We addressed them with request queuing, caching, image fallbacks, corrected URL handling, and a faster speech model.

Accomplishments that we're proud of

A working discovery-to-exploration flow, saved paths that survive refreshes, accessible settings, and a responsive interface tested on desktop and mobile.

What we learned

Reliable API handling matters as much as the interface. Batching requests, respecting cooldowns, and preserving usable content during failures made the experience better.

What's next for Scrollipedia

Expandable mind maps, smarter discovery, streaming narration, and account-based library sync across devices.

Built With

• bottleneck
• elevenlabs
• gemini
• generative-ai
• knowledge-graph
• localstorage
• lucide
• mediawiki
• mindmap
• nextjs
• node.js
• playwright
• postgresql
• radix-ui
• react
• react-flow
• row-level-security
• shadcn-ui
• supabase
• tailwindcss
• text-to-speech
• typescript
• vercel
• wikidata
• wikipedia-api