Dialog: A Full-Stack Real-Time Chat Application

Dialog is a real-time chat application I built out of curiosity.

I’ve used tons of chat apps, WhatsApp, Telegram, Signal, you name it and I knew they all relied on WebSockets or WebRTC. But I wanted to see what it actually takes to build a bare-bones chat app myself, no encryption, fault tolerance, or scaling, just the core functionality: a sender sends a message, and a receiver sees it.

Let’s walk through the technology that brought Dialog to life.

Next.js

The backbone of the stack — the framework that ties everything together.
I used Next.js because it’s what I learned React through, and I’ve stuck with it since. It handles routing, API routes, and SSR beautifully, and its SEO capabilities make it perfect for any app with a public-facing component.

Auth.js

Used for authentication and session management. It handles account creation, secure login, and user state between the client and server.

Pusher.js

Pusher powers the real-time features. It’s a managed cloud service with both server and client SDKs.
You might ask: “Why not Socket.io?”
I’ve written a whole blog post explaining why Pusher is a great fit for serverless environments, especially when you’re deploying on platforms like Vercel.

Prisma

A TypeScript ORM that lets me interact with my database using schema-driven models instead of writing raw SQL.
I’ve been using Prisma in all my projects (mainly because I’m too lazy to write SQL 😅), but I’m planning to try Drizzle ORM soon for its performance and type-safety improvements.

PostgreSQL

The database of choice — overkill for a small chat app, sure, but rock solid, open-source, and incredibly extensible.

Uploadthing

A managed file upload service that simplifies file handling.
If you don’t want to deal with the hassle of AWS S3 setup, buckets, and permissions, Uploadthing is a great alternative. It provides an SDK with end-to-end type safety between server and client.

Shadcn/UI + Tailwind CSS

Used to design the interface with clean, accessible, and consistent UI components. Shadcn brings structure and reusability, while Tailwind handles low-level styling efficiently.

Vercel

The deployment platform. Vercel’s integration with Next.js makes deployments frictionless and serverless by default.

How the Application Works

• After creating an account, you’re redirected to the People page where you can see all users on the app.
• You can chat with anyone immediately — no friend requests or approvals (because you might not have friends on the app yet 😅).
• Clicking a user initializes a conversation, and you can send text or image messages in real-time (unencrypted, for now).

Reflection

This project helped me understand the core mechanics behind real-time messaging, data synchronization, event broadcasting, and live updates without relying on heavy abstractions.

It was a great experiment in building a simple, functional real-time system that could be scaled and secured later on.