DEV Community: Uchit Chakma

Building a Real-Time Chat Feature with Django Channels and React

Uchit Chakma — Fri, 05 Jun 2026 00:10:07 +0000

Building a Real-Time Chat Feature with Django Channels and React

Real-time features have become table stakes for modern web applications. Whether it is a customer support widget, a collaborative tool, or a social platform, users expect instant communication without page refreshes. In this article, I will walk through how we built a production-ready real-time chat feature using Django Channels and React at UCDREAMS.

Why Django Channels?

Django is traditionally synchronous. It handles one request at a time per worker. This works fine for standard HTTP requests, but WebSocket connections require persistent, bidirectional communication. Django Channels extends Django to handle WebSockets, background tasks, and asynchronous protocols alongside traditional HTTP.

The beauty of Channels is that it does not replace Django. It layers on top, letting you keep your existing models, ORM, authentication, and admin panel while adding real-time capabilities. For a team already invested in Django, this is a massive advantage over introducing an entirely separate real-time server.

Setting Up the Backend

Start by installing Django Channels and a channel layer. Redis is the recommended backend for production use:

channels==4.0.0
channels-redis==4.2.0
daphne==4.0.0

Configure your Django settings:

INSTALLED_APPS = [
    ...
    "channels",
]

ASGI_APPLICATION = "your_project.asgi.application"

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("127.0.0.1", 6379)],
        },
    },
}

Building the WebSocket Consumer

The consumer handles WebSocket connections:

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
        self.room_group_name = f"chat_{self.room_name}"
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        await self.accept()

    async def disconnect(self, close_code):
        await self.channel_layer.group_discard(self.room_group_name, self.channel_name)

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json["message"]
        await self.channel_layer.group_send(
            self.room_group_name,
            {"type": "chat_message", "message": message, "user": self.scope["user"].username},
        )

    async def chat_message(self, event):
        await self.send(text_data=json.dumps({
            "message": event["message"],
            "user": event["user"],
        }))

The React Frontend

On the React side, we use the native WebSocket API:

import React, { useState, useEffect, useRef } from "react";

const Chat = ({ roomName, username }) => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket(`ws://localhost:8000/ws/chat/${roomName}/`);
    ws.current.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setMessages((prev) => [...prev, data]);
    };
    return () => ws.current.close();
  }, [roomName]);

  const sendMessage = () => {
    if (input.trim()) {
      ws.current.send(JSON.stringify({ message: input }));
      setInput("");
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className="message"><strong>{msg.user}:</strong> {msg.message}</div>
        ))}
      </div>
      <div className="input-area">
        <input value={input} onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === "Enter" && sendMessage()} />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
};

Handling Authentication

In production, you will want authenticated WebSocket connections. Django Channels provides AuthMiddlewareStack which makes the user available in self.scope.user. For token-based auth with React, pass the token during connection.

Scaling Considerations

For production deployment, consider these points:

Redis Clustering - Use Redis Sentinel or Redis Cluster for high availability
Daphne for Production - Run Daphne as your ASGI server
Horizontal Scaling - Django Channels with Redis allows multiple app servers to share the channel layer
Message Persistence - Store messages in your database for history
Rate Limiting - Implement per-user rate limiting
Connection Management - Handle reconnection with exponential backoff

Real-World Implementation

At UCDREAMS (https://ucdreams.com), we have implemented this architecture for several client projects. One notable implementation powers a real-time customer support dashboard handling thousands of concurrent connections. The same pattern extends beyond chat to live notifications, collaborative editing, and real-time analytics.

You can also check out Captionator (https://captionator.ucdreams.com), a project where real-time WebSocket communication plays a key role in delivering captioning services with minimal latency.

Conclusion

Django Channels plus React gives you a powerful, scalable foundation for real-time features. The learning curve is gentle if you already know Django and React, and the architecture scales from a simple chat room to complex real-time applications. For custom web application development tailored to your business needs, reach out to UCDREAMS.

React + WordPress: The Full-Stack Combo That Powers Modern Web Applications

Uchit Chakma — Thu, 04 Jun 2026 00:07:25 +0000

If you think WordPress is just for blogs and React is just for single-page apps, you're missing the biggest trend in modern web development. Combining React with WordPress gives you the best of both worlds: a powerful CMS backend with a blazing-fast, component-driven frontend.

At UCDREAMS, we've built everything from brochure sites to full-scale booking platforms using exactly this stack. Here's why it works, and how you can use it too.

Why WordPress + React?

WordPress powers over 40% of the web. Its REST API (and now the GraphQL API via WPGraphQL) makes it a headless CMS that can feed content to any frontend. React takes that content and turns it into a smooth, app-like experience.

The magic happens when you:

Use WordPress as your content admin panel (clients love it)
Expose content via REST or GraphQL APIs
Build a React frontend that fetches and renders that content dynamically

Setting Up the Stack

Step 1: WordPress as a Headless CMS

Install WordPress as usual. Add the WPGraphQL plugin (or use the built-in REST API). Create custom post types with ACF (Advanced Custom Fields) for structured content.

For example, a portfolio site might have:

Custom post type: projects
Fields: client name, tech stack, live URL, screenshots
Categories: web, mobile, branding

Step 2: Build Your React Frontend

Create a React app (Next.js is our preference at UCDREAMS for SSR/SEO benefits):

const API_URL = 'https://yourdomain.com/graphql';

async function getProjects() {
  const query = `{ projects { nodes { title slug acf { clientName techStack } } } }`;
  const res = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query })
  });
  return res.json();
}

Step 3: Deploy and Connect

Deploy React on Vercel, Netlify, or your own server. Point your WordPress domain or subdomain to the React frontend. Use rewrites so /about and /contact still feel like a normal site.

Real-World Use Cases

E-commerce: WooCommerce backend + React storefront = custom checkout flows, real-time inventory, and seamless UX.

Booking Platforms: WordPress manages availability and bookings via plugins; React renders a calendar-based UI.

Portfolio/Agency Sites: Clients edit content in WordPress; the live site is a lightning-fast React app.

That's exactly the architecture we used at UCDREAMS for several client projects. It gives non-technical clients full control over content while developers control the UI layer.

Pros and Cons

Pros	Cons
Clients use familiar WP admin	Extra server for React rendering
Fast, interactive frontend	More complex deployment
SEO-friendly with Next.js	Initial setup takes longer
Scalable content structure	Caching needs careful planning

When Should You NOT Use This Combo?

Simple 5-page brochure site? Just use vanilla WordPress.
You have no developer on the team? Stick with page builders.
Real-time features (chat, live updates)? Consider a full MERN stack.

But for mid-to-large content sites that need a modern frontend experience? WordPress + React is the sweet spot.

Getting Started

If you're a developer, spin up a local WordPress instance, add WPGraphQL, and build a tiny React app that fetches posts. You'll see the potential in under an hour.

If you need help building something production-ready, our team at UCDREAMS specializes in WordPress + React integrations, custom plugin development, and headless WordPress architecture. We're a Bangalore-based digital solutions agency with experience across e-commerce, booking platforms, and custom web applications.

What's your experience been with headless WordPress? Drop a comment below!

How to Hire a React.js Developer in Bangalore

Uchit Chakma — Tue, 02 Jun 2026 23:52:21 +0000

How to Hire a React.js Developer in Bangalore: A Founder's Guide

Finding the right React.js developer can make or break your project. In Bangalore, where the tech talent pool is deep but competitive, knowing how to identify, evaluate, and hire the right person is a skill in itself.

I've hired React developers for my own agency at UCDREAMS and for client projects over the last three years. Here's what I've learned about finding great React talent in India's Silicon Valley.

Why Bangalore?

Bangalore isn't just India's IT hub — it's the single largest concentration of React developers in the country. With over 8,000 tech companies, countless startups, and a thriving developer community, the city offers access to talent across every experience level and budget.

Where to Find React Developers in Bangalore

LinkedIn remains the most reliable platform. Use filters for "Bangalore" + "React.js" and look for candidates with 2+ years specific React experience, GitHub profiles, and community involvement.

GitHub

Bangalore has a vibrant open-source community. Search for React projects with contributors based in Bangalore.

Developer Communities

React Bangalore Meetup: One of India's largest React communities
Dev.to and Hashnode: Many Bangalore developers write here
JSConf India: Great for networking with top talent

What to Look For

Technical Skills

Beyond React itself, look for TypeScript, Next.js, state management (Redux, Zustand, React Query), testing (Jest, RTL), and modern styling (Tailwind, CSS-in-JS).

Key Interview Questions

How does React's reconciliation algorithm work?
How would you optimize component re-renders?
What's the difference between controlled and uncontrolled components?
How do you handle state in a large application?

Salary Expectations in Bangalore (2026)

Junior (0-2 yrs): ₹4-8 LPA
Mid-level (2-5 yrs): ₹10-20 LPA
Senior (5+ yrs): ₹22-40 LPA
Architect/Lead: ₹40-70 LPA

Hiring Models

Full-time Employee

Best for long-term projects needing deep product knowledge.

Freelancer / Contractor

Ideal for specific projects with clear scope. Faster to hire, flexible.

Development Agency

When you need a team, not just an individual. Agencies like UCDREAMS provide end-to-end React development with project management, QA, and support.

The Hidden Cost of a Wrong Hire

A bad hire costs more than salary — missed deadlines, technical debt, team morale, and lost opportunities. Start with a small paid project before committing full-time.

Final Advice

If you're a startup looking to build a React app without in-house hiring infrastructure, consider a professional web development agency that handles technical evaluation, scoping, and delivery.

This guide is based on experience at UCDREAMS, where we build React applications for startups and businesses across India, the UAE, and Australia.