A modern, real-time chat application built with React and Django, featuring WebSocket connections for instant messaging and live user presence tracking.

• Real-time Messaging: Instant message delivery using WebSockets
• User Authentication: Secure login/logout with JWT tokens
• Live User Status: See who's online/offline in real-time
• Responsive Design: Works seamlessly on desktop and mobile devices
• User Management: User registration, profile management, and admin panel
• Message History: Persistent chat messages with database storage
• Online Filtering: Toggle to show only online users
• Modern UI: Clean, intuitive interface built with Tailwind CSS

• React 19 - Modern UI library with latest features
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Zustand - Lightweight state management
• React Router - Client-side routing
• Axios - HTTP client for API calls
• React Hot Toast - Beautiful notifications
• Lucide React - Modern icon library

• Django 5.2 - Python web framework
• Django REST Framework - API development
• Django Channels - WebSocket support
• Redis - Message broker for WebSockets
• JWT Authentication - Secure token-based auth
• SQLite - Default database (easily configurable)
• CORS Headers - Cross-origin resource sharing
• Cloudinary - Media file management (optional)

Before running this application, make sure you have:

• Node.js (v18.0.0 or higher)
• npm (v9.0.0 or higher)
• Python (3.8 or higher)
• pip (Python package manager)
• Redis Server (for WebSocket functionality)

git clone https://github.com/Andhar7/chat_app_mini.git
cd chat_app_mini

npm run install:all

This installs both frontend (npm) and backend (pip) dependencies.

npm run migrate

npm run createsuperuser

npm run dev

This starts both the Django backend and React frontend simultaneously.

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000
• Django Admin: http://localhost:8000/admin

chat_app_mini/
├── backend/                    # Django backend
│   ├── accounts/              # User authentication app
│   ├── chat/                  # Django project settings
│   ├── chat_messages/         # Chat functionality app
│   ├── manage.py              # Django management script
│   └── requirements.txt       # Python dependencies
├── frontend/                  # React frontend
│   ├── src/
│   │   ├── components/        # Reusable UI components
│   │   ├── pages/            # Page components
│   │   ├── store/            # Zustand state management
│   │   ├── lib/              # Utility functions
│   │   └── App.jsx           # Main app component
│   ├── public/               # Static assets
│   └── package.json          # Frontend dependencies
├── package.json              # Root package.json with scripts
└── README.md                 # This file

# Start both frontend and backend servers
npm run dev

# Start only frontend (React + Vite)
npm run dev:frontend

# Start only backend (Django)
npm run dev:backend

# Install all dependencies (frontend + backend)
npm run install:all

# Install only frontend dependencies
npm run install:frontend

# Install only backend dependencies
npm run install:backend

# Build frontend for production
npm run build

# Build frontend (alternative)
npm run build:frontend

# Run frontend linting
npm run lint

# Run backend tests
npm run test:backend

# Apply database migrations
npm run migrate

# Create new migrations
npm run makemigrations

# Create Django superuser
npm run createsuperuser

# Collect static files (production)
npm run collectstatic

The backend uses environment variables for configuration. Create a .env file in the backend/ directory:

SECRET_KEY=your-secret-key-here
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1
REDIS_URL=redis://localhost:6379

The frontend automatically connects to the backend at http://localhost:8000. For production, update the API base URL in the frontend configuration.

• POST /api/accounts/register/ - User registration
• POST /api/accounts/login/ - User login
• POST /api/accounts/logout/ - User logout
• GET /api/accounts/profile/ - Get user profile

• GET /api/chat/messages/ - Get chat messages
• POST /api/chat/messages/ - Send new message
• GET /api/chat/users/ - Get all users
• GET /api/chat/online-users/ - Get online users

• ws://localhost:8000/ws/chat/ - Real-time chat connection
• ws://localhost:8000/ws/presence/ - User presence tracking

• JWT Authentication: Secure token-based authentication
• CORS Protection: Configured cross-origin resource sharing
• Input Validation: Django REST framework serializers
• SQL Injection Protection: Django ORM prevents SQL injection
• XSS Protection: React's built-in XSS protection

1. Build the frontend:

   npm run build:frontend

2. Deploy the frontend/dist folder to your hosting service (Netlify, Vercel, etc.)

1. Set up production environment variables
2. Collect static files:

   npm run collectstatic

3. Apply migrations:

   npm run migrate

4. Deploy to your hosting service (Heroku, DigitalOcean, AWS, etc.)

# Run Django tests
npm run test:backend

# Run specific test
cd backend && python manage.py test accounts.tests.TestUserModel

The frontend uses ESLint for code quality:

npm run lint:frontend

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes
4. Run tests: npm run test:backend && npm run lint
5. Commit changes: git commit -m 'Add feature'
6. Push to branch: git push origin feature-name
7. Submit a pull request

• Django Documentation
• Django Channels Documentation
• Django REST Framework

• React Documentation
• Vite Documentation
• Tailwind CSS
• Zustand State Management

1. WebSocket Connection Failed

• Ensure Redis server is running: redis-server
• Check if backend is running on port 8000

2. CORS Errors

• Verify django-cors-headers is installed
• Check CORS settings in backend/chat/settings.py

3. Database Migration Errors

# Reset migrations if needed
cd backend
rm -rf */migrations/
python manage.py makemigrations accounts chat_messages
python manage.py migrate

4. Frontend Build Errors

• Clear node_modules and reinstall:

  cd frontend
  rm -rf node_modules package-lock.json
  npm install

5. Python Dependencies Issues

• Use a virtual environment:

  cd backend
  python -m venv venv
  source venv/bin/activate  # On Windows: venv\Scripts\activate
  pip install -r requirements.txt

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

Created with ❤️ by Andhar7

• Django and React communities for excellent documentation
• Contributors to the open-source libraries used in this project
• WebSocket technology for enabling real-time communication

Note: This is a mini chat application designed for learning and development purposes. For production use, consider additional security measures, scalability optimizations, and comprehensive testing.