Pro•Web Development

ChatIt — Real-Time Chat App

Build a full-stack real-time chat application with WebSocket-powered messaging, JWT authentication, typing indicators, read receipts, and a premium dark-mode UI. This project covers the complete spectrum of modern web development — from a Django Channels ASGI backend to a Next.js 16 App Router frontend with Zustand state management and SWR data fetching.

📚Scroll down to see free videos & courses ↓
FrontendBackend

What You Will Build

A production-grade real-time chat application where users can register, search for other users, open direct message conversations, and exchange messages instantly via WebSockets — complete with typing indicators, read receipts (single/double ticks), online presence, cursor-based infinite scroll for message history, and a sleek animated dark-mode interface.

Concepts You'll Learn

  • WebSocket protocol and real-time bidirectional communication
  • Django Channels and ASGI server setup with Daphne
  • JWT-based authentication with httpOnly cookies
  • Custom DRF authentication backends (cookie-based)
  • Next.js 16 App Router with client and server components
  • Global state management with Zustand
  • Data fetching and caching with SWR
  • Axios interceptors for auto JWT token refresh
  • Optimistic UI updates for instant message feedback
  • Cursor-based infinite scroll pagination
  • Debounced search with live suggestions
  • Read receipts and typing indicators over WebSocket
  • Online presence tracking on connect/disconnect
  • CORS configuration for full-stack local development
  • Environment-based config with python-decouple and .env.local

Tech Stack

Next.jsTypeScriptDjangoDjango REST FrameworkDjango ChannelsWebSocketsZustandSWRAxiosJWT AuthenticationSQLite / PostgreSQLRedis

References

1🌐 Website

Tailwind cheat sheet

Online tool / resource

2📚 Docs

Django Channels — Official Docs

Official documentation

3📚 Docs

Next.js App Router — Official Docs

Official documentation

4📚 Docs

Django REST Framework

Official documentation

5📚 Docs

Zustand — State Management

Official documentation

6📚 Docs

SWR — Data Fetching for React

Official documentation

7📚 Docs

djangorestframework-simplejwt

Official documentation

8📄 Article

JWT Authentication Deep Dive

In-depth reading

9📚 Docs

Daphne ASGI Server

Official documentation

Buy me a coffee