Jahan AI - Frontend Application

A modern web application built with Django REST Framework backend and Webix frontend for AI-powered user interactions and preferences management.

🏗️ Project Structure

Jahan_AI/
├── jahan_backend/           # Django REST API backend
│   ├── venv/               # Python virtual environment
│   ├── jahan_backend/      # Django project settings
│   ├── preferences/        # Preferences management app
│   ├── manage.py           # Django management script
│   └── requirements.txt    # Python dependencies
├── jahan_frontend/         # Frontend application
│   └── client/            # Webix-based client application
│       ├── components/    # Reusable UI components
│       ├── pages/        # Application pages
│       ├── js/           # JavaScript modules
│       ├── css/          # Stylesheets
│       └── index.html    # Main entry point
├── start-servers.sh       # Quick start script
└── README.md             # This file

🚀 Quick Start

Option 1: One-Command Startup (Recommended)

cd /media/uma/sda4/Jahan_AI && chmod +x start-servers.sh && ./start-servers.sh

Option 2: Manual Startup

Step 1: Backend Setup & Start

# Install backend dependencies
cd /media/uma/sda4/Jahan_AI/jahan_backend && source venv/bin/activate && pip install -r requirements.txt

# Start Django backend server
cd /media/uma/sda4/Jahan_AI/jahan_backend && source venv/bin/activate && python manage.py runserver 0.0.0.0:8000

Step 2: Frontend Server (New Terminal)

# Option A: Using live-server (if installed)
npx live-server --port=3000

# Option B: Using Python HTTP server
cd /media/uma/sda4/Jahan_AI/jahan_frontend/client && python3 -m http.server 3000

🌐 Application URLs

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• Admin Panel: http://localhost:8000/admin/
• API Documentation: http://localhost:8000/preferences/api/

🛠️ Technology Stack

Backend

• Django 5.2.1 - Web framework
• Django REST Framework - API development
• Django CORS Headers - Cross-origin resource sharing
• MySQL - Database (configurable)
• Python 3.x - Runtime

Frontend

• Webix - UI framework for rich web applications
• JavaScript ES6+ - Modern JavaScript features
• CSS3 - Styling and responsive design
• HTML5 - Semantic markup

📋 API Endpoints

Preferences API

• GET /preferences/api/notifications/ - Get notification preferences
• POST /preferences/api/notifications/ - Update notification preferences
• GET /preferences/api/privacy/ - Get privacy settings
• POST /preferences/api/privacy/ - Update privacy settings

🔧 Development Setup

Prerequisites

• Python 3.8+
• Node.js 14+ (for live-server option)
• Virtual environment activated

Environment Setup

1. Clone or navigate to project:

   cd /media/uma/sda4/Jahan_AI

2. Backend setup:

   cd jahan_backend
   source venv/bin/activate
   pip install -r requirements.txt
   python manage.py migrate
   python manage.py collectstatic

3. Create superuser (optional):

   python manage.py createsuperuser

Database Configuration

The application supports multiple database backends. Update jahan_backend/jahan_backend/settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # or sqlite3, postgresql
        'NAME': 'your_database_name',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

🎨 Frontend Features

Core Components

• Dashboard - Main application interface
• Preferences Manager - User settings and configurations
• Responsive Design - Mobile and desktop optimized
• API Integration - Real-time data synchronization

Webix Components Used

• DataTables for data display
• Forms for user input
• Charts for data visualization
• Layout components for responsive design

🐛 Troubleshooting

Common Issues

1. ERR_BLOCKED_BY_CLIENT Errors

If you encounter client blocking errors:

• 🛡️ Disable ad blocker for localhost
• 🔒 Try opening in private/incognito window
• 🌍 Use http://127.0.0.1:3000 instead of localhost:3000
• ⚙️ Temporarily disable browser security extensions

2. Backend Connection Issues

# Check if virtual environment is activated
which python  # Should point to venv/bin/python

# Verify dependencies
pip list

# Test server manually
python manage.py runserver --verbosity=2

3. Frontend Loading Issues

# Check if server is running
curl http://localhost:3000

# Try alternative server
python3 -m http.server 3000 --bind 127.0.0.1

4. CORS Issues

Ensure these settings in Django:

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

📁 Project Files Overview

Backend Structure

jahan_backend/
├── preferences/
│   ├── models.py          # Data models
│   ├── serializers.py     # API serializers
│   ├── services.py        # Business logic
│   ├── views.py           # API views
│   └── urls.py            # URL routing
├── jahan_backend/
│   ├── settings.py        # Django configuration
│   ├── urls.py           # Main URL configuration
│   └── wsgi.py           # WSGI application
└── manage.py             # Django management commands

Frontend Structure

jahan_frontend/client/
├── components/           # Reusable UI components
├── pages/               # Application pages
├── js/                  # JavaScript modules
├── css/                 # Stylesheets
├── assets/              # Static assets
└── index.html          # Application entry point

🔄 Development Workflow

1. Start development servers:

   ./start-servers.sh

2. Make changes:

   • Backend: Edit Python files, server auto-reloads
   • Frontend: Edit HTML/CSS/JS files, refresh browser

3. Database changes:

   python manage.py makemigrations
   python manage.py migrate

4. Stop servers: Press Ctrl+C in the terminal running start-servers.sh