ChatGPT Clone

A pixel-perfect ChatGPT clone built with Next.js, TypeScript, and modern web technologies for the Galaxy.ai internship assignment.

🚀 Features

• Pixel-Perfect UI: ChatGPT-like interface with smooth animations
• Chat Functionality: OpenRouter API integration with streaming responses
• Message Editing: Edit and regenerate responses
• Memory: Conversation context using mem0
• File Uploads: Support for images (PNG, JPG) and documents (PDF, DOCX, TXT)
• Authentication: Secure user authentication with Clerk
• Fully Responsive: Works seamlessly on mobile, tablet, and desktop
• Accessibility: ARIA compliant for screen readers

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript (strict mode)
• Styling: TailwindCSS + ShadCN UI
• Database: MongoDB
• Authentication: Clerk
• File Storage: Cloudinary
• File Upload: Uploadcare
• Chat API: OpenRouter
• Memory: mem0
• Deployment: Vercel

📋 Prerequisites

• Node.js 18+ installed
• MongoDB database (local or Atlas)
• API keys for:
  • Clerk
  • OpenRouter
  • mem0
  • Cloudinary
  • Uploadcare

🔧 Installation

Option 1: Docker (Recommended - Consistent across all PCs)

Prerequisites:

• Docker Desktop installed (Download)

1. Clone the repository:

git clone <repository-url>
cd <folder>

2. Create .env file:

cp .env.example .env

3. Fill in your environment variables in .env (see below)

4. Build and run with Docker Compose:

docker-compose up --build

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

To stop: Ctrl+C or docker-compose down

Benefits:

• ✅ No need to install Node.js, MongoDB, or any dependencies
• ✅ Same environment on Windows, Mac, Linux
• ✅ No dependency conflicts
• ✅ MongoDB included automatically

Option 2: Local Development

1. Clone the repository:

git clone <repository-url>
cd <folder>

2. Install dependencies:

npm install --legacy-peer-deps

3. Set up environment variables:

cp .env.example .env

4. Fill in your environment variables in .env:

   • Clerk publishable and secret keys
   • MongoDB connection string (use mongodb://localhost:27017/galaxy_chat for local MongoDB)
   • OpenRouter API key
   • Cloudinary credentials
   • Uploadcare keys (optional)

5. Run the development server:

npm run dev

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

📁 Project Structure

├── app/                    # Next.js app directory
│   ├── (auth)/            # Authentication routes
│   ├── (chat)/            # Chat interface routes
│   ├── api/               # API routes
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── ui/               # ShadCN UI components
│   ├── chat/             # Chat-related components
│   └── layout/           # Layout components
├── lib/                   # Utility functions
│   ├── db/               # Database utilities
│   ├── api/              # API clients
│   └── utils.ts          # General utilities
├── types/                 # TypeScript type definitions
└── public/                # Static assets

🧪 Testing

Follow the test cases in TEST_CASES.md to verify all features work correctly.

📚 Documentation

• CHECKPOINT_PLAN.md: Detailed step-by-step implementation plan
• QUICK_CHECKLIST.md: Quick progress tracking checklist
• TEST_CASES.md: Comprehensive test cases
• README_CHECKPOINTS.md: Overview and guidelines

🐳 Docker Commands

# Build and start containers
docker-compose up --build

# Start in detached mode (background)
docker-compose up -d

# Stop containers
docker-compose down

# View logs
docker-compose logs -f

# Rebuild without cache
docker-compose build --no-cache