🤖 AI-Powered Chatbot Project

A secure, production-ready full-stack chatbot application that integrates Hugging Face Transformers for AI-powered responses.
Built with a modern stack: Next.js, Express.js, Supabase, Prisma ORM, and MongoDB/Mongoose, ensuring scalability, security, and real-time performance.

This project demonstrates expertise in Full Stack Development + AI Integration, following clean code practices and industry-standard folder structures.

---

🌟 Key Highlights

• AI Chatbot Engine: Context-aware responses powered by Hugging Face models
• Authentication & Security: JWT + HTTP-only cookies, role-based access, rate limiting
• Scalable Backend: REST APIs with Express.js, Prisma ORM, MongoDB/Supabase for persistence
• Modern Frontend: Next.js with Tailwind CSS, responsive and optimized
• Clean Architecture: Separation of concerns with controllers, routes, middleware, and utils

---

🚀 Features

🔐 User Authentication

• Signup/Login with JWT + cookies
• Role-based access (User/Admin)
• Secure password hashing

💬 Chatbot System

• AI-powered responses from Hugging Face Transformers
• Maintains chat history for better context
• Conversation logs stored in database

🛡️ Security

• Rate limiting for abuse prevention
• Protected routes and secure API keys
• Environment variable-based config (.env)

📊 Database & Storage

• Prisma ORM + Supabase integration
• MongoDB/Mongoose models supported for flexibility
• Stores user accounts, sessions, and chat logs

🎨 Frontend (Next.js)

• Responsive Next.js application
• Modular components, pages, and utils structure
• Styled with Tailwind CSS for modern UI

---

📂 Project Structure

AI-POWERED-MERN-PROJECT/
│
├── backend/
│   ├── config/              # DB and server configurations
│   ├── controllers/         # Business logic
│   ├── middleware/          # Authentication, error handling
│   ├── models/              # Prisma/Mongoose models
│   ├── prisma/              # Prisma schema & migrations
│   ├── routes/              # API routes
│   ├── utils/               # Helper functions
│   ├── .env                 # Environment variables (not committed)
│   ├── server.js            # Backend entry point
│   └── package.json
│
├── frontend/
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/           # Next.js pages
│   │   ├── styles/          # Tailwind/global styles
│   │   └── utils/           # Frontend helpers
│   ├── next.config.js
│   └── package.json
│
├── .gitignore
└── README.md                # Project overview

---

⚙️ Installation

1️⃣ Clone the Repository

git clone https://github.com/Muhammadasim225/AI-Powered-Chatbot.git
cd AI-POWERED-MERN-PROJECT

2️⃣ Backend Setup

cd backend
npm install

3️⃣ Frontend Setup

cd frontend
npm install

---

🔑 Environment Variables

Create .env files in both backend and frontend folders.

Backend .env:

PORT=5000
JWT_SECRET=your_jwt_secret
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key

Frontend .env:

NEXT_PUBLIC_API_URL=http://localhost:5000

⚠️ Always add .env to .gitignore to keep secrets safe.

---

▶️ Running the App

Start backend:

cd backend
npm run dev

Start frontend:

cd frontend
npm run dev

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

---

🛠 Tech Stack

• Frontend: Next.js, Tailwind CSS
• Backend: Node.js, Express.js
• Database: Supabase + Prisma ORM, MongoDB
• AI: Hugging Face Transformers
• Auth & Security: JWT, Cookies, Rate Limiting

---

📸 Video / Demo

video_bot.mp4

---

📜 License

This project is licensed under the MIT License.

---

✨ Author

👤 Muhammad Asim

• Portfolio: https://portfolioweb-app-chi.vercel.app/
• LinkedIn: https://www.linkedin.com/in/muhammad-asim-764a8a273/
• GitHub: https://github.com/Muhammadasim225/MuhammadAsim