Perplexity Clone - AI-Powered Answer Engine

A modern, AI-powered search and answer engine that provides comprehensive answers to user questions with real-time web sources and citations.

✨ Features

Search & Answers

• 🔍 Intelligent Search: Natural language query processing
• 🤖 AI-Powered Answers: GPT-4 integration for comprehensive, accurate responses
• 🌐 Web Sources: Real-time web search with clickable source citations
• ⚡ Streaming: Watch answers appear token-by-token in real-time
• 🔗 Source Citations: Every answer includes verifiable web sources
• ❓ Related Questions: Smart suggestions for follow-up queries

Conversations

• 💬 Multi-turn Conversations: Ask follow-up questions with full context retention
• 💾 Auto-save: All conversations automatically saved
• 📌 Pin Important Chats: Keep key conversations at the top
• 🗑️ Delete Conversations: Remove conversations you no longer need
• 📤 Export History: Download your conversations as JSON

UI & UX

• 📱 Fully Responsive: Beautiful design on mobile, tablet, and desktop
• 🎨 Dark Mode: Toggle between light and dark themes
• ⚡ Fast: Optimized performance with edge runtime
• 🎯 Clean Interface: Minimalist, distraction-free design
• ♿ Accessible: WCAG-compliant UI components

Authentication & Settings

• 🔐 Secure Auth: Powered by Clerk
• ⚙️ User Settings: Customize your experience
• 🔒 Privacy Controls: Manage conversation privacy
• 🔧 Configurable: Choose your default search engine

Tech Stack

• Frontend: Next.js 14, React, TypeScript
• Styling: Tailwind CSS
• AI: OpenAI GPT-4
• Search: Serper API
• Database: PostgreSQL with Prisma
• Auth: Clerk
• Hosting: Vercel

🎉 Project Status

All core features are now implemented and ready to use! ✅

Completed Milestones:

• ✅ Milestone 1: Project setup, Next.js + TypeScript, Tailwind CSS, Prisma
• ✅ Milestone 2: Clerk authentication, user settings, dark mode
• ✅ Milestone 3: Search integration, web scraping, answer generation
• ✅ Milestone 4: Conversational context, streaming responses, related questions
• ✅ Milestone 5: Landing page, answer page, history view, responsive design

🚀 Quick Start

Prerequisites

• Node.js 18+
• PostgreSQL database (local or cloud)
• OpenAI API key (Get it here)
• Serper API key (Get it here)
• Clerk account (Sign up)

Installation

1. Install dependencies:

npm install

2. Set up environment variables:

cp .env.example .env.local

3. Add your API keys to .env.local:

OPENAI_API_KEY=sk-your-key-here
SERPER_API_KEY=your-key-here
DATABASE_URL="postgresql://user:password@localhost:5432/perplexity_clone"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

4. Set up the database:

npx prisma generate
npx prisma db push

5. Run the development server:

npm run dev

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

📖 For detailed setup instructions, see SETUP.md

Project Structure

perplexity_predev_plan/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   ├── search/            # Search page
│   ├── history/           # History page
│   ├── settings/          # Settings page
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles
├── components/            # React components
├── lib/                   # Utility functions
├── prisma/               # Database schema
└── types/                # TypeScript types

Development

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Deployment

Deploy to Vercel:

License

ISC

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.