Real-time Chat Application with gRPC, Redis, and React

A scalable real-time chat application demonstrating modern web technologies:

• gRPC for efficient service-to-service communication
• Redis Pub/Sub for real-time message broadcasting
• Express.js as an API gateway with Server-Sent Events (SSE)
• React for a responsive frontend interface

✨ Features

• Real-time message broadcasting
• User-specific message streaming
• Efficient binary protocol with Protocol Buffers
• Scalable architecture with Redis Pub/Sub
• Modern React frontend with Vite

🏗️ Project Structure

.
├── api/                    # Express API Gateway
│   └── index.js            # API server implementation
├── client/                 # React frontend application
│   ├── public/
│   └── src/
├── grpc-server/            # gRPC server implementation
│   └── proto/              # Protocol Buffer definitions
├── redis-pubsub/           # Redis Pub/Sub implementation
├── package.json            # Root project dependencies
└── README.md               # This file

🚀 Quick Start

Prerequisites

• Node.js (v16+)
• npm or yarn
• Docker (for Redis)

1. Start Redis

docker run -d -p 6379:6379 --name redis redis

2. Start gRPC Server

cd grpc-server
npm install
node server.js

3. Start API Server

cd ../api
npm install
node index.js

4. Start React Client

cd ../client
npm install
npm run dev

🌐 Access the Application

• Frontend: http://localhost:5173
• API Server: http://localhost:3001
• gRPC Server: localhost:50051

🧪 Testing

1. Open the application in your browser
2. Enter a username and send messages
3. Open another browser window with a different username to test real-time updates

🛑 Stopping the Application

# Stop Redis
docker stop redis
docker rm redis

# Stop other services (Ctrl+C in their respective terminals)
# 1. React client
# 2. API server
# 3. gRPC server

📚 Technologies Used

• gRPC - High-performance RPC framework
• Protocol Buffers - Language-neutral data serialization
• Redis - In-memory data store with Pub/Sub
• Express.js - Web application framework
• React - Frontend library
• Vite - Next Generation Frontend Tooling

📝 License

This project is open source and available under the MIT License.