sharmasatyam121104-devloper/circle-communication-platform

This repository is a two-part monorepo: a TypeScript backend in circle-server and a Vite/React frontend in circle-ui. The app is a real-time messaging and calling system, with authentication, chat, message attachments, and Twilio-backed audio/video calling.

1. Backend runtime and request boundary

circle-server is the HTTP API and real-time server. It is organized around Express-style entry points (src/index.ts, src/app.ts) and feature routers under src/modules/*. Cross-cutting middleware/config sits in src/config and src/utils, which means most business logic is isolated behind domain controllers and routes.

2. Domain modules on the server

The backend is split into four main business areas: user, chat, message, and twilio, plus a socket layer. Each feature has its own controller, routes, and types/models, which suggests the API is intentionally domain-scoped rather than monolithic.

3. Authentication and user management

The user subsystem handles signup/login/session-style concerns, profile updates, and profile image upload. The presence of passport.config.ts, jwt.ts, cookies.utils.ts, and user.middleware.ts indicates auth is enforced with JWT/cookie-based mechanisms, likely with Passport strategies and protected route middleware.

4. Persistence and server-side infrastructure

db.ts implies a database-backed API, and the *.model.ts files indicate a model layer beneath controllers. Redis is also configured, so the backend likely has a second stateful dependency for caching, session/connection coordination, or real-time support. logger.ts, serverErrorHandler.ts, cors.config.ts, and helmet.config.ts show the API is production-hardened with logging and security middleware.

5. Chat and message data flow

Chat and message are separated into distinct modules. Chat appears to manage conversation membership and metadata, while message handles message creation/retrieval and attachment handling. The message module includes a dedicated multer setup for attachments, which means file upload is part of the message pipeline rather than a generic file service.

6. Media upload handling

Uploads are routed through multer-specific config files and then likely forwarded to Cloudinary, as shown by cloudinary.config.ts. The user module has profile-picture upload support, and the message module has attachment upload support. This creates two main media paths: user avatars and chat attachments.

7. Real-time socket layer

src/socket.ts and the socket module indicate a persistent websocket channel alongside the REST API. This is the likely path for live message delivery, chat presence, and call notifications. The frontend also has a socketClient wrapper, confirming the app depends on real-time events, not just polling.

8. Twilio calling subsystem

The twilio module is a distinct integration boundary for audio/video calling. On the frontend there are separate AudioCall.tsx and VideoCall.tsx pages, plus call-related UI sounds and popups. That suggests call setup and signaling are initiated through the API/Twilio layer, while the UI handles call state and user experience.

9. Frontend application structure

circle-ui is a React SPA using Vite. Routing is split into public and protected routes, with pages for home, login, signup, chat, image update, audio call, and video call. This mirrors the backend’s domain model and indicates the UI is organized around user auth plus a main authenticated messaging surface.

10. Client state and API integration

The frontend has a small client layer in src/lib for API access, socket connection, time formatting, and error handling. Zustand stores (useAuthStore, useVideoCallStore) centralize app state for authentication and call state, so the UI is not purely component-local. This matters for the diagram because auth and call state are shared across multiple pages and overlays.

11. UI composition for messaging

The chat UI is decomposed into message area, sender/receiver message bubbles, attachment rendering, and member-management components. This suggests the Chat page is the central authenticated workspace, with supporting components for conversation membership and message presentation rather than one large page component.

12. Deployment and containerization

The backend has a Dockerfile, docker-compose setup, and a GitHub Actions deploy workflow. That indicates the server is expected to be containerized and deployed independently from the frontend, with CI/CD handling releases. The frontend is a separate Vite app, so the repo represents two deployable units connected by API and socket endpoints.

Overall, the key architecture boundary is: React UI in the browser talks to a TypeScript API server over REST and sockets; the server persists user/chat/message data, stores or proxies media uploads through Cloudinary, and integrates Twilio for calls. Redis, JWT/cookies, and Passport provide the infrastructure for stateful auth and real-time behavior.