Full-Stack Video Chat Application

A real-time chat application built with Django (backend) and React (frontend), featuring WebRTC peer-to-peer communication, JWT authentication, and WebSocket integration.

🚀 Features

• User Authentication: Secure registration and login using JWT tokens stored in HttpOnly cookies.
• Room Management: Create, join, and manage chat rooms with proper access control.
• Live Updates: Real-time messaging powered by WebSocket integration.
• **Modern React-based interface with a mobile-friendly design.

🛠️ Tech Stack

Backend

• Django, Django REST Framework, Django Channels
• WebSocket support
• JWT Authentication
• APIs for room management

Frontend

• React, Axios
• Registration & login forms
• Chat interface
• WebSocket client

📁 Project Structure

chat-app/
├── backend/
│   ├── temp_chat/
│   ├── requirements.txt
│   ├── manage.py
│   ├── utils/
│   └── apps/
      ├── chat/
│     └── users/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   └── utils/
│   └── package.json
└── README.md

⚡ Quick Start

Prerequisites

• Python 3.8+
• Node.js 14+
• npm or yarn

Backend Setup

1. Clone the repository

   git clone "https://github.com/Jasir-p/temp-chat/"
   cd chat-app/backend

2. Create virtual environment

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies

   pip install -r requirements.txt

4. Setup database

   python manage.py makemigrations
   python manage.py migrate

5. Create superuser (optional)

   python manage.py createsuperuser

6. Start Django server

   python manage.py runserver

Frontend Setup

1. Navigate to frontend directory

   cd ../frontend

2. Install dependencies

   npm install

3. Start React development server

   npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000

🧪 Testing

Backend Tests

cd backend
pytest .\apps\users\test
pytest .\apps\chat\test

Frontend Tests

cd frontend
npm run test

📝 Environment Variables

Create .env files in both backend and frontend directories:

Backend (.env)

SECRET_KEY=your-secret-key
DEBUG=True
REDIS_URL=redis://localhost:6379
ALLOWED_HOSTS="*"
CORS_ALLOWED_ORIGINS="http://localhost:8000"
DB_ENGINE="your-db-engine-postgres-recommended"
DB_NAME="your-db-name"
DB_USER="your-db-user"
DB_PASSWORD="your-db-password"
DB_HOST="your-db-host-or-default-localhost"
DB_PORT="your-db-port-or-default-5432"

Frontend (.env)

VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000

🚀 Deployment

Production Setup

1. Set DEBUG=False in Django settings
2. Configure PostgreSQL/MySQL database
3. Set up Redis for WebSocket support
4. Build React app: npm run build
5. Configure web server (Nginx + Daphne)

📖 Usage

1. Register: Create a new account
2. Login: Authenticate with your credentials
3. Create Room: Start a new chat room
4. Join Room: Enter an existing room
5. Chat: Send real-time messages

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

• Open an issue on GitHub
• Contact:jazjasir7@gmailcom

✨ Acknowledgments

• Django & Django Channels for backend framework
• React for frontend library
• WebSocket for real-time communication