ChatConnect - Real-time Chat Application

A full-stack real-time chat application built with Socket.io, React, and Express - powered by a Turborepo monorepo.

Overview

Chat App is a full-stack, real-time messaging application that enables seamless communication between users. Built on a modern TypeScript monorepo, it combines a React frontend with an Express + Socket.io backend to deliver instant, bidirectional messaging with a clean, responsive UI.

This project is structured as a Turborepo monorepo managed with pnpm workspaces, keeping the frontend, backend, and shared packages in a single, cohesive repository.

Tech Stack

Layer	Technology
Frontend	React, Vite, Tailwind CSS, shadcn/ui
Backend	Node.js, Express
Real-time	Socket.io
Language	TypeScript
Monorepo	Turborepo, pnpm workspaces
Linting & Formatting	ESLint, Prettier

Project Structure

The repository follows the Turborepo convention with an apps/ directory for runnable applications and a packages/ directory for shared code.

chat-app/
├── apps/
│   ├── web/          # React + Vite frontend (chat client)
│   └── server/       # Express + Socket.io backend
├── packages/
│   ├── ui/           # Shared React component library (shadcn/ui)
│   ├── eslint-config/  # Shared ESLint configuration
│   └── typescript-config/  # Shared tsconfig.json
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

Features

Real-time messaging - Instant message delivery using Socket.io's WebSocket-based bidirectional communication.
Room-based chat - Two users can join a shared room and exchange messages privately in real time.
Responsive UI - Built with Tailwind CSS and shadcn/ui for a polished experience on any screen size.
Shared component library - The @repo/ui package allows UI components to be shared across apps without duplication.
Type-safe throughout - End-to-end TypeScript across the frontend, backend, and all shared packages.
Fast development builds - Vite on the frontend and Turborepo's smart caching drastically cut rebuild times.

Getting Started

Prerequisites

Make sure you have the following installed before cloning the project:

Node.js v18 or later
pnpm v8 or later (npm install -g pnpm)

Installation

Clone the repository

git clone https://github.com/vijaysingh2219/chat-app.git
cd chat-app

Install dependencies

pnpm install

pnpm will install dependencies for all workspaces in a single pass.

Start the development servers

pnpm dev

Turborepo will start the frontend and backend in parallel, watching for changes across all packages.

Running pnpm dev from the repository root starts all apps at once via Turborepo's task pipeline. You do not need to cd into individual app directories.

Available Scripts

Run these commands from the repository root:

Command	Description
`pnpm dev`	Start all apps in development mode
`pnpm build`	Build all apps and packages for production
`pnpm lint`	Run ESLint across all workspaces
`pnpm format`	Run Prettier across all workspaces

pnpm build

Turborepo builds packages in the correct dependency order and caches the output - subsequent builds are near-instant if nothing has changed.

pnpm lint

Uses the shared @repo/eslint-config package, which extends eslint-config-next and eslint-config-prettier for consistent rules across all apps.

pnpm format

Runs Prettier with a shared configuration to enforce consistent code style across the entire monorepo.

How It Works

Real-time Communication

The backend exposes a Socket.io server on top of Express. Each room hosts exactly two users. When one user sends a message, the client emits a socket event to the server, which then forwards it to the other user in the same room - no polling, no page refresh.

Monorepo Dependency Graph

Turborepo's task pipeline understands the dependency graph between packages. Before building web or server, it always builds @repo/ui and @repo/typescript-config first - automatically and in parallel where possible.