https://github.com/ubytek/aladdin-chatbot

Chatbot application using react, flask, tailwind, mongodb and jwt powered by openAI
https://github.com/ubytek/aladdin-chatbot

chatbot flask jwt mongodb openai react react-router tailwindcss

Last synced: about 1 month ago
JSON representation

Chatbot application using react, flask, tailwind, mongodb and jwt powered by openAI

Host: GitHub
URL: https://github.com/ubytek/aladdin-chatbot
Owner: ubytek
License: mit
Created: 2024-12-15T14:40:22.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2025-01-19T11:37:16.000Z (over 1 year ago)
Last Synced: 2026-04-07T18:38:07.290Z (3 months ago)
Language: JavaScript
Homepage:
Size: 509 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

🧞‍♂️ Aladdin-Chatbot

## 🚀 Overview

Aladdin is a chatbot application providing a seamless chat experience with secure user authentication, persistent data storage, and a responsive design. Built using modern tools, it ensures a robust and interactive platform for users.

## ✨ Features

- **🔒 User Authentication**:

- Signup & Login using JWT.
- Secure sessions with token-based authentication.

- **🗂️ Data Management**:

- User data and chat histories are stored in MongoDB.

- **📱 User-Friendly**:
- Fully responsive design powered by Tailwind CSS.
- Logout functionality for secure session management.

## 🛠️ Tech Stack

### **Frontend**

- ![React](https://img.shields.io/badge/-React-61DAFB?style=flat-square&logo=react&logoColor=white) **React**: For building the user interface.
- ![Vite](https://img.shields.io/badge/-Vite-646CFF?style=flat-square&logo=vite&logoColor=white) **Vite**: For lightning-fast development and build processes.
- ![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white) **Tailwind CSS**: For efficient and responsive styling.

### **Backend**

- ![Flask](https://img.shields.io/badge/-Flask-000000?style=flat-square&logo=flask&logoColor=white) **Flask**: Lightweight Python web framework.
- ![JWT](https://img.shields.io/badge/-JWT-000000?style=flat-square&logo=json-web-tokens&logoColor=white) **JWT**: For secure authentication.
- ![MongoDB](https://img.shields.io/badge/-MongoDB-47A248?style=flat-square&logo=mongodb&logoColor=white) **MongoDB**: NoSQL database for data storage.

## 🏗️ Project Structure

### **Client (React Code)**

- Built using Vite for fast development and optimized builds.
- Styled with Tailwind CSS for a modern, responsive design.
- Contains all frontend components and UI logic.

### **Server (Flask Backend)**

- Handles business logic and user authentication.
- Connects to MongoDB for data persistence.

## 🔧 Installation & Setup

1. **Clone the repository**:
```bash
git clone https://github.com/techiuv/aladdin-chatbot.git
cd aladdin-chatbot
```
2. **Set up the client**:
```bash
cd client
npm install
npm run dev
```
3. **Set up the server**:

```bash
cd server
pip install -r requirements.txt
python app.py

```

4. **Environment Variables**:

- Replace with actuall values in `.env.example` file in the server

```env
MONGO_URI=REPLACE_WITH_YOUR_DB_CONNECTION_STRING
PORT=5000
JWT_SECRET_KEY=REPLACE_WITH_YOUR_SECRET_KEY
ADMIN_PASSKEY=SET_A_PASSWORD
OPENAI_API_KEY=REPLACE_WITH_YOUR_OPENAI_API_KEY
```

## 📜 Usage

- Signup or login to start chatting.
- All chat data is securely stored in MongoDB.
- Enjoy a responsive interface powered by Tailwind CSS on any device!

## 🌟 Show Your Support

If you found this project helpful or interesting, please give it a star ⭐ on GitHub. Your support means a lot and helps the project grow!

## 💻 Screenshots