🤖 BataoGPT – AI-Powered Conversational Chat Application

BataoGPT is a full-stack AI chatbot application inspired by ChatGPT, designed to deliver a seamless and interactive conversational experience. The platform enables users to engage in real-time AI-powered conversations while maintaining persistent chat history for future reference.

Built with a modern web development stack, the application focuses on performance, scalability, and an intuitive user experience.

🔗 Live Demo: https://gpt-project-green.vercel.app/

🚀 Features

💬 Intelligent Conversations

• Real-time AI-powered chat interface
• Integration with OpenRouter APIs for AI model access
• Natural conversational workflows with typing animations

📝 Rich Response Rendering

• Markdown-based response rendering
• Syntax-highlighted code blocks for technical discussions
• Support for structured content including lists, tables, and formatted text

💾 Persistent Chat History

• Store and retrieve conversations using MongoDB
• Seamless continuation of previous chats
• Efficient data management for long-term conversation tracking

⚡ Modern User Experience

• Fast and responsive UI built with React and Vite
• Reusable component-based architecture
• Mobile-friendly and fully responsive design

🔧 Backend Infrastructure

• RESTful APIs built with Node.js and Express.js
• Structured backend workflows for maintainability
• Modular architecture for scalability and future enhancements

---

🛠️ Tech Stack

Frontend

• ⚛️ React.js
• ⚡ Vite
• 🎨 CSS
• 📜 JavaScript

Backend

• 🟢 Node.js
• 🚂 Express.js

Database

• 🍃 MongoDB

AI Integration

• 🤖 OpenRouter API

---

✨ Key Highlights

✅ Real-Time AI Conversations

✅ Persistent Chat History

✅ Markdown Rendering

✅ Syntax-Highlighted Code Blocks

✅ Typing Animation Effects

✅ Reusable React Components

✅ REST API Integration

✅ Responsive Design

---

📚 Learning Outcomes

Through building BataoGPT, I gained hands-on experience in:

• Developing full-stack AI-powered applications
• Integrating third-party AI APIs into production workflows
• Managing application state and persistent user data
• Designing scalable backend architectures
• Building reusable frontend components
• Creating engaging user experiences with real-time interactions

This project strengthened my understanding of conversational AI systems, API integration, database design, and modern full-stack development practices.