Infipedia

An infinite, AI-generated encyclopedia where every word is a gateway to discovery. Powered by Google's Gemini AI.

Features

• 🤖 AI-Generated Content: Real-time streaming content generation using Gemini 2.5 Flash Lite
• 🎨 ASCII Art Visualization: Creative ASCII art generated for each topic
• 🔗 Interactive Navigation: Click any word to explore related topics
• 🎲 Random Discovery: Explore curated interesting concepts with the random button
• ⚡ Fast & Responsive: Built with Next.js 15 and optimized for performance
• 🎭 Modern UI: Beautiful, theme-aware interface using Tailwind CSS

Getting Started

Prerequisites

• Node.js 20+ (as specified in the project requirements)
• A Gemini API key from Google AI Studio

Installation

1. Clone the repository:

git clone <repository-url>
cd infipedia

2. Install dependencies:

npm install

3. Set up environment variables:

# Create .env.local file in the root directory
echo "GEMINI_API_KEY=your_gemini_api_key_here" > .env.local

Replace your_gemini_api_key_here with your actual Gemini API key.

4. Run the development server:

npm run dev

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

Project Structure

infipedia/
├── app/
│   ├── actions/
│   │   └── gemini.ts          # Server Actions for secure API calls
│   ├── globals.css            # Global styles with Tailwind
│   ├── layout.tsx             # Root layout with metadata
│   └── page.tsx               # Main page component (HomePage)
├── components/
│   ├── AsciiArt.tsx           # ASCII art display component
│   ├── ContentDisplay.tsx     # Content rendering with interactive words
│   ├── LoadingSkeleton.tsx    # Loading state component
│   └── Header.tsx             # Header with search and random navigation
├── lib/
│   ├── constants.ts           # Predefined words for random selection
│   ├── types.ts               # Shared TypeScript types
│   └── utils.ts               # Utility functions
└── .env.local                 # Environment variables (not in git)

Security

This project implements Next.js 15 Server Actions to keep the Gemini API key secure:

• API calls are made server-side only
• The API key never reaches the client
• Streaming responses are handled securely through Server Actions

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

Technologies Used

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• AI: Google Gemini 2.5 Flash & Flash Lite
• UI Components: shadcn/ui components
• Code Quality: ESLint, Prettier, Husky, lint-staged

Theme Support

The app uses CSS variables for theming. To customize the theme, modify the CSS variables in app/globals.css:

:root {
	--background: oklch(0.9821 0 0);
	--foreground: oklch(0.3485 0 0);
	--primary: oklch(0.4891 0 0);
	/* ... more variables */
}

Credits

Powered by Google Gemini AI