Real-Time Chat App

This is a real-time chat application built using Django Channels for the backend and React for the frontend. The app supports WebSocket-based real-time messaging and uses Tailwind CSS for styling.

Features

• Real-time messaging powered by WebSockets
• Beautiful and responsive UI using Tailwind CSS
• Easy-to-understand component-based architecture in React

Technologies Used

Backend

• Django: Web framework
• Django Channels: For handling WebSocket connections
• WebSocket: Real-time communication protocol

Frontend

• React: JavaScript library for building user interfaces
• Tailwind CSS: Utility-first CSS framework

Installation and Setup

Backend Setup

1. Clone the repository:

   git clone <repository_url>
   cd <repository_folder>
   

2. Create a virtual environment and activate it:

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

3. Install the dependencies:

   pip install -r requirements.txt
   

4. Apply migrations:

   python manage.py migrate
   

5. Run the development server:

   python manage.py runserver
   

6. Ensure the WebSocket endpoint is running at:

   ws://127.0.0.1:8000/ws/chat/<room_name>/
   

### Frontend Setup
1. Navigate to the `frontend` folder:
   ```bash
   cd frontend

2. Install dependencies:

   npm install
   

3. Start the React development server:

   npm start
   

4. Access the frontend at http://localhost:3000.

Folder Structure

Backend

backend/
├── chatapp/        # Django project settings
├── chat/           # Chat app for handling WebSocket logic
├── manage.py       # Django entry point
└── requirements.txt# Python dependencies

Frontend

frontend/
├── public/         # Static files
├── src/            # React components and styles
│   ├── components/ # Chatroom and MessageInput components
│   └── App.js      # Main app entry point
├── tailwind.config.js # Tailwind configuration
└── package.json    # Node.js dependencies

Usage

1. Open the backend server at http://127.0.0.1:8000 to verify the WebSocket endpoint is running.
2. Access the frontend at http://localhost:3000.
3. Enter a chatroom name (e.g., "testroom") to start chatting in real-time.

Styling

The frontend is styled using Tailwind CSS. Tailwind classes are used for a clean, responsive, and modern UI. You can customize the design by modifying the tailwind.config.js file and updating component class names.

Future Enhancements

• User authentication
• Typing indicators
• Message persistence with a database
• File and image sharing

Contributing

1. Fork the repository
2. Create a new branch:

   git checkout -b feature-name
   

3. Commit your changes:

   git commit -m "Add feature-name"
   

4. Push to the branch:

   git push origin feature-name
   

5. Create a pull request

License

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

Happy coding!