🤖 AI-CHITchat

A full-stack AI chatbot application built using the MERN stack (MongoDB, Express, React, Node.js) with authentication and persistent chat functionality.

---

🚀 Features

• 🔐 User Authentication (Signup/Login with JWT)
• 💬 Real-time Chat Interface
• 🧠 AI-powered responses (OpenAI / Gemini API)
• 🗂️ Chat history stored in MongoDB
• 🔒 Secure API routes with authentication middleware
• 🌐 Fully functional frontend-backend integration

---

🛠️ Tech Stack

Frontend

• React (TypeScript)
• Axios
• CSS Modules

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)
• JWT Authentication

AI Integration

• OpenAI API (GPT-3.5)
• Google Gemini API (optional alternative)

---

📂 Project Structure

AI-CHITchat/
│
├── backend/
│   ├── controllers/
│   ├── routes/
│   ├── models/
│   ├── configs/
│   └── .env
│
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   ├── components/
│   │   └── helpers/
│
└── README.md

---

⚙️ Setup Instructions

1️⃣ Clone the repository

git clone https://github.com/YOUR_USERNAME/AI-CHITchat.git
cd AI-CHITchat

---

2️⃣ Setup Backend

cd backend
npm install

Create a .env file in backend:

PORT=5001
MONGO_URL=your_mongodb_url
JWT_SECRET=your_secret
COOKIE_SECRET=your_cookie_secret
DOMAIN=localhost

# Either use OpenAI OR Gemini
OPENAI_API_KEY=your_openai_key

Run backend:

npm run dev

---

3️⃣ Setup Frontend

cd frontend
npm install
npm run dev

App runs at:

http://localhost:5173

---

⚠️ Important Notes

• If AI responses are not working:

  • It may be due to API quota exceeded
  • Add a valid API key (OpenAI / Gemini)

• Cookies must be enabled for authentication to work

---

📸 Screenshots

(Add screenshots here later for better portfolio impact)

---

📌 Future Improvements

• 🧾 Chat sidebar (history navigation)
• 🌙 Dark/Light mode toggle
• ⚡ Streaming responses (like ChatGPT)
• 📱 Mobile responsiveness improvements
• 🚀 Deployment (Vercel + Render)

---

⭐ If you like this project

Give it a star ⭐ on GitHub — it helps a lot!