Chat App

A real-time chat application built with Django, Django Channels, and Next.js.

Link to live app

App Structure

• Each server belong to a category
• Channels belong to servers (server can have multiple channels)
• User who creates a server is server owner
• Users can send messages in channels

Features

• User authentication and registration
• Real-time messaging
• Server owner can create and manage channels, servers, and users (kick, ban)
• Responsive design for mobile and desktop

Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS and Redux
• Backend: Django, Django Channels, Django REST Framework
• Database: PostgreSQL (Neon for production, docker for dev)
• Message broker: Redis (Redis cloud for production, docker for dev)
• Cloud Storage: Cloudflare R2 for file uploads
• Deployment: Django Backend on DigitalOcean, Next.js Frontend on Vercel

Getting Started

Prerequisites

• Node.js (LTS version)
• Python (LTS version)
• Docker and Docker Compose (if run locally)

Installation

1. Clone the repository

   git clone https://github.com/nevalearntocode/dj_chat.git

2. Install frontend dependencies

   cd frontend
   npm install

3. Set up environment variables

   • Create .env.local file in frontend and .env.dev file backend directory.
   • Follow the .env.example files in frontend and backend directory.

Running with Docker

• In settings.py, comment out the following lines: 82 and 89. Then uncomment the following line: 83
• 

Running the Application

• Frontend: Run npm run dev in the frontend directory.
• Backend: Run docker compose up --build in the backend directory.

Deployment

• The following Github repo is a guide to how to deploy the application with separate PostgreSQL database and Redis service.
• Deployment guide
• Notes: I'm using Uvicorn instead of Daphne and Next.js Frontend instead of Fullstack Django. Please refer to the guide as you see fit.

Images

Home Page

Server Page

Chat interface

Search Pages

Mobile

Home Page

Mobile Chat Interface

Mobile Server Page