This is a real-time chat application built using Flask-SocketIO on the backend and React on the frontend. It allows users to engage in instant messaging, choose a nickname, and customize the chat theme. The application also displays the number of users currently online in the chat room.
- Real-time Messaging: Users can send and receive messages instantly, creating a seamless chat experience.
- Nickname Selection: Users have the option to choose a unique nickname to identify themselves in the chat.
- Chat Theme Customization: Users can change the visual theme of the chat interface to suit their preferences.
- Online User Count: The application provides a live count of the number of users currently online in the chat room.
- Backend: Flask-SocketIO, Python
- Frontend: React, TypeScript, CSS
- Communication Protocol: WebSocket
To set up the chat application locally, follow these steps:
- Clone the repository:
git clone <repository_url> - Navigate to the project directory:
cd reactive-super-chat - Install the required dependencies:
- Backend:
- Navigate to the frontend directory:
cd backend - Create a virtual environment (optional):
python -m venv venv - Activate the virtual environment (optional):
- For Windows:
venv\Scripts\activate - For Unix/Linux:
source venv/bin/activate
- For Windows:
- Install the dependencies:
pip install -r requirements.txt
- Navigate to the frontend directory:
- Frontend:
- Navigate to the frontend directory:
cd frontend - Install the dependencies:
npm install
- Navigate to the frontend directory:
- Backend:
To start the chat application, follow these steps:
-
Install Gunicorn (if not already installed):
pip install gunicorn -
Run the backend server using Gunicorn:
- Activate the virtual environment (if using):
- For Windows:
venv\Scripts\activate - For Unix/Linux:
source venv/bin/activate
- For Windows:
- Start the server:
gunicorn wsgi:app - By default, Gunicorn runs the server on
http://localhost:8000.
- Activate the virtual environment (if using):
-
Run the frontend:
- Navigate to the frontend directory (if not already):
cd frontend - Start the development server:
npm start
- Navigate to the frontend directory (if not already):
-
Open your browser and visit
http://localhost:3000to access the chat application.
Contributions are welcome! If you would like to contribute to this project, please follow these guidelines:
- Fork the repository
- Create a new branch for your feature or bug fix
- Commit your changes
- Push your branch to your forked repository
- Submit a pull request
This project is licensed under the MIT License.