Skip to content

README.md

Latest commit

 

History

History
116 lines (85 loc) · 3.31 KB

README.md

File metadata and controls

116 lines (85 loc) · 3.31 KB
Raw

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
  1. Install dependencies:
npm install
  1. 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.

  1. Run the development server:
npm run dev
  1. 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