EITM - Explain It To Me

A fun AI-powered explainer app built with Next.js.

You enter a topic (for example, "Black Holes" or "Blockchain"), choose a style, and the app generates a simple explanation using a Groq-compatible OpenAI API endpoint.

Features

• Multiple explanation modes:
  • Kid Mode
  • Normal
  • Gen Z Chaos
  • Bhojpuri Mode
• Example topic chips for quick prompts
• Markdown-rendered responses
• One-click copy for generated explanation
• Lightweight animation for result reveal

Tech Stack

• Next.js 16 (App Router)
• React 19 + TypeScript
• Tailwind CSS 4
• OpenAI SDK (pointed to Groq base URL)
• react-markdown, framer-motion, lucide-react

Project Structure

app/
	page.tsx                 # Main UI
	api/explain/route.ts     # AI explain API route
	layout.tsx               # App metadata + layout

Environment Variables

Create a .env.local file in the project root:

GROQ_API_KEY=your_groq_api_key_here

The API route uses:

• baseURL: https://api.groq.com/openai/v1
• model: openai/gpt-oss-20b

Getting Started

Install dependencies:

npm install

Run the dev server:

npm run dev

Open http://localhost:3000.

Available Scripts

• npm run dev - start local dev server
• npm run build - create production build
• npm run start - run production server
• npm run lint - run ESLint

Notes

• Explanations are generated by an LLM and may occasionally be inaccurate.
• For best results, use clear topics and keep prompts concise.