💬 Full-Stack Chatbot UI

An interactive, real-time chatbot interface built with a modern full-stack architecture. This application allows seamless communication between users and an AI-powered chatbot, offering a clean, responsive, and accessible user experience.

🚀 Features

• Real-time chat interface with smooth animations
• Support for light/dark theme
• Scrollable chat history
• Typing indicator and loading animation
• Input validation and error handling
• ARIA-compliant and fully accessible
• Scalable backend with session management
• Stores user conversations and preferences

🧱 Tech Stack

Frontend

• Framework: React (TypeScript)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Accessibility: ARIA labels, keyboard navigation

Backend

• Runtime: Node.js
• Framework: Express.js
• API: RESTful endpoints for chat messages
• Security: CORS, rate limiting, input sanitization
• Session Management: Token or cookie-based

Database

• Options: MongoDB or PostgreSQL
• Used For: Storing chat logs, user sessions, and preferences

AI Integration

• Model Support: GPT, Rasa, Dialogflow, or custom NLP models
• Connection: Backend relays user input and AI responses via API

Deployment

• Frontend: Vercel
• Backend: Render or Heroku
• CI/CD: GitHub Actions (optional)

📂 Project Structure

/client           # React frontend
/server           # Express backend
/database         # DB models and config
README.md         # Project documentation

📦 Getting Started

1. Clone the Repo

git clone https://github.com/yourusername/chatbot-ui.git
cd chatbot-ui

2. Setup Frontend

cd client
npm install
npm run dev

3. Setup Backend

cd ../server
npm install
npm run dev

4. Environment Variables

Create .env files in both /client and /server directories and add necessary API keys and configs.

📸 Preview

🛠️ Future Improvements

• Voice input/output
• User authentication
• Admin dashboard for chat analytics
• Multi-language support

👨‍💻 Author

Developed by Swaminathan K