An infinite-scroll Wikipedia reader that lets you discover and explore random Wikipedia articles endlessly. Search for specific topics, filter by categories, or just keep scrolling through a curated stream of knowledge.
- Automatically loads new Wikipedia articles as you scroll
- Batch loading of 5 articles at once for smooth, uninterrupted reading
- Smart prefetching with duplicate detection
- Search for any Wikipedia article instantly
- Automatically finds the best match for your query
- Searched articles are added to the top of your feed
- Browse articles from specific Wikipedia categories
- Curated categories: Science, History, Technology, Geography, Arts, Sports
- Excludes meta-pages (lists, indexes, timelines) for quality content
- Select any text in an article to navigate to related Wikipedia pages
- Seamlessly jump between topics while maintaining your reading flow
- Fully supports light and dark themes
- Smooth theme transitions
- Respects system preferences
- Minimalist design with monospace typography
- Responsive layout optimized for all screen sizes
- Mobile-first approach with touch-friendly interactions
- HTML sanitization with DOMPurify
- Safe rendering of Wikipedia content
- Fixed internal links to prevent 404s
- Framework: Next.js 15 (App Router)
- UI Library: React 19
- Language: TypeScript 5
- Styling: Tailwind CSS 4
- Data Fetching: TanStack Query (React Query)
- UI Components: Radix UI
- Theme Management: next-themes
- HTML Sanitization: DOMPurify
- Testing: Vitest + Testing Library
- Node.js 20.x or higher
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/yourusername/infiwiki.git
cd infiwiki- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
infiwiki/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API Routes
│ │ │ └── wiki/
│ │ │ ├── random/ # Random article endpoint
│ │ │ ├── search/ # Search endpoint
│ │ │ └── [title]/ # Get article by title
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ └── globals.css # Global styles
│ ├── components/ # React components
│ │ ├── reader.tsx # Main infinite scroll reader
│ │ ├── article-view.tsx # Individual article display
│ │ ├── top-menu.tsx # Navigation menu
│ │ ├── category-selector.tsx # Category filter dropdown
│ │ ├── selection-navigator.tsx # Text selection handler
│ │ └── ui/ # Reusable UI components
│ ├── lib/ # Utility libraries
│ │ ├── wiki.client.ts # Wikipedia API client
│ │ ├── api.client.ts # Frontend API wrapper
│ │ └── utils.ts # Helper functions
│ └── server/ # Server-side handlers
│ └── handlers/ # API route handlers
├── tests/ # Test files
├── public/ # Static assets
└── package.json
Get a random Wikipedia article.
Query Parameters:
category(optional): Filter by Wikipedia category
Response:
{
"title": "Article Title",
"url": "https://en.wikipedia.org/wiki/Article_Title",
"html": "<div>...</div>",
"text": "Plain text content",
"description": "Brief description"
}Get a specific Wikipedia article by title.
Response: Same as /api/wiki/random
Search for Wikipedia articles.
Query Parameters:
q: Search query
Response:
{
"title": "Best matching article title"
}npm run dev- Start development servernpm run build- Build for productionnpm start- Start production servernpm test- Run testsnpm run test:watch- Run tests in watch mode
This project uses:
- ESLint for linting
- TypeScript for type checking
- Prettier-compatible formatting (via ESLint)
Run the test suite:
npm testRun tests in watch mode:
npm run test:watchTest files are located in the tests/ directory and cover:
- API route handlers
- UI components
- Infinite scroll functionality
- Search and navigation features
- Uses
useInfiniteQueryfrom TanStack Query - Implements
IntersectionObserverfor scroll detection - Batch loads 5 articles at once with staggered delays
- Maintains a
Setof seen URLs to prevent duplicates
- Uses Wikipedia's REST API v1
- Fetches article summaries and mobile HTML
- Sanitizes HTML content and fixes internal links
- Implements proper User-Agent headers
- Recursively explores Wikipedia categories and subcategories
- Filters out meta-pages (lists, indexes, timelines, etc.)
- Limits to 100 articles per category for performance
- Removes citation boxes, navigation elements, and metadata
- Fixes relative Wikipedia links to external URLs
- Strips empty elements and whitespace
- Uses DOMPurify for XSS protection
This project includes a netlify.toml configuration file for easy deployment:
- Connect your repository to Netlify
- Netlify will automatically detect the Next.js framework
- Deploy!
npm install -g vercel
vercelBuild the production bundle:
npm run buildThen deploy the .next directory to your hosting platform.
No environment variables are required for basic functionality. All Wikipedia API calls are made using public endpoints.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Wikipedia for providing the free encyclopedia API
- Next.js team for the amazing framework
- TanStack for React Query
- Radix UI for accessible components
For questions or feedback, please open an issue on GitHub.
Built with ❤️ using Next.js and the Wikipedia API