ChatConnect

ChatConnect is a real-time, modern web chat application built using Django Channels (WebSockets) on the backend and React (Vite) on the frontend. The project features a premium glassmorphic dark user interface, instant messaging, user search, friend systems, and profile customisation.

---

Screenshots & Workflow

1. Main Dashboard

Once logged in, the user is greeted by the ChatConnect dashboard showing their profile information, active friend list, and actions to chat or manage friendships.

2. Finding & Adding Friends

Users can search for other registered users in real-time by entering their username.

3. Real-Time Chat Rooms

Conversations occur instantly over WebSockets. Here is a look at the active chat room from both users' perspectives:

User 1 Perspective	User 2 Perspective

4. Customising Profiles

Users can easily update their username and email address from the Edit Profile screen.

---

Tech Stack

Backend

• Django (Python Framework)
• Django Channels & Daphne (WebSocket & ASGI server implementation)
• SQLite (Default local development database)

Frontend

• React (Vite-powered single page application)
• React Router DOM (Client-side routing)
• Lucide React (Modern iconography)
• Vanilla CSS (High-fidelity custom dark-mode styling)

---

Installation & Setup

Follow these steps to run both the backend and frontend development servers.

1. Clone & Set Up Backend

1. Navigate to the project root directory:

   cd chatapp-main

2. Create and activate a virtual environment:

   python -m venv venv
   
   # On Windows (PowerShell/CMD):
   venv\Scripts\activate
   
   # On macOS/Linux:
   source venv/bin/activate

3. Install the required dependencies:

   pip install -r requirements.txt

4. Apply database migrations (uses SQLite by default):

   python manage.py migrate

5. (Optional) Create a superuser for accessing the Django Admin console (http://localhost:8000/admin):

   python manage.py createsuperuser

6. Start the ASGI backend server:

   python manage.py runserver

   Daphne will start the development server at http://127.0.0.1:8000/.

2. Set Up Frontend

1. Open a new terminal window/tab and navigate to the frontend directory:

   cd chatapp-main/frontend

2. Install npm packages:

   npm install

3. Start the Vite dev server:

   npm run dev

   The web application will launch at http://localhost:5173/.

---

How it Works (Proxy Setup)

• The frontend uses relative paths for API endpoints (e.g. /api/, /ws/).
• Vite is configured with a development proxy in vite.config.js which automatically routes:
  • /api http://127.0.0.1:8000 (HTTP endpoints)
  • /ws ws://127.0.0.1:8000 (WebSocket channels)