In this first post of our WebChat architecture series, we dive deep into the multi-service system design behind a real-time messaging application built with FastAPI, Next.js, Redis, PostgreSQL, and Nginx.
livelink : https://webchat.aniksutradhar.com/register
Lets first start with the architecture:
Next.js Client (The Frontend UI)
- Serves the user interface and coordinates client-side real-time socket actions.
- Initiates registration and login requests.
- Maintains a single, persistent Web-Socket connection to the Chat Server.
- Secures payload transmissions (and stores state inside Next.js Contexts).
FastAPI Auth Server (Service #1)
- A lightweight, stateless microservice dedicated solely to credentials, users, and tokens.
- User Registration: Receives email and password, derives a unique username, salts and hashes the password via bcrypt, and writes the record to PostgreSQL.
- User Login: Verifies credentials and issues a signed, cryptographically secure JWT (JSON Web Token) with an expiration.
FastAPI Chat Server & WebSocket Manager (Service #2)
- The stateful service maintains concurrent WebSocket connections and saves message logs.
- Persistent WebSockets: Maintains open connections at /ws?token=....
- Message Broker Integration: Interacts with Redis to keep track of user statuses.
- Database Writes: Writes chats, participants, and messaging logs to PostgreSQL using asynchronous sessions.
PostgreSQL (Storage Layer)
The relational database management system.
- Stores core tables: users (shared schema), chats, chat_participants, messages.
- Uses async drivers (asyncpg) to ensure FastAPI never blocks on database writes.
Redis (Caching & Presence Layer)
In-memory data structure store.
- Tracks transient status updates (e.g., whether a user is online, idle, or offline).
- Stores short-lived typing states (e.g. typing:chat_id:user_id) with automatic Time-To-Live (TTL) expiration.
Top comments (1)
comment and follow i will share the source code !!!