TalkBox Tech Stack: Libraries and Frameworks Used

TalkBox is a full-stack JavaScript application. The server runs on Node.js and leans on a small, focused set of battle-tested libraries; the client is a React single-page application built and served by Vite. Both sides share the same Socket.IO major version (^4.8.3) so the client and server transports are always compatible. The sections below walk through each dependency, drawn directly from the project’s package.json files.

Backend
Frontend

The server’s package.json lists the following runtime dependencies:

Package	Version	Purpose
`express`	`^5.2.1`	HTTP server framework. Mounts the three route groups (`/api/auth`, `/api/users`, `/api/messages`) and the root health-check endpoint. Express 5 is used here for its improved async error handling.
`mongoose`	`^9.7.4`	MongoDB ODM. Defines the `User` and `Message` schemas, handles connection lifecycle via `connectDB`, and provides the `populate` helper used when resolving sender/receiver usernames on messages.
`socket.io`	`^4.8.3`	WebSocket server. Attached to the same Node.js `http.Server` instance as Express. Manages the `onlineUsers` presence Map and delivers the `newMessage` event to connected clients in real time.
`jsonwebtoken`	`^9.0.3`	Signs and verifies JWTs. Used in the auth controller to issue tokens on login and in `authMiddleware` (REST) and the Socket.IO middleware to validate them on every protected request.
`bcrypt`	`^6.0.0`	Password hashing. Hashes plaintext passwords before they are stored in MongoDB and compares submitted passwords against stored hashes during login.
`cors`	`^2.8.6`	Cross-Origin Resource Sharing middleware. Configured with `origin: process.env.CLIENT_URL` so only the known React client origin can make cross-origin requests to the API.
`dotenv`	`^17.4.2`	Loads `.env` variables (`PORT`, `MONGO_URI`, `JWT_SECRET`, `CLIENT_URL`) into `process.env` at the very start of `server.js` before any other module runs.

Dev dependency

Package	Version	Purpose
`nodemon`	`^3.1.14`	Watches the `src/` directory during development and automatically restarts the server when a source file changes, invoked via `npm run dev`.

The entry point is src/server.js, which loads environment variables, opens the MongoDB connection, starts the Express listener, and then calls initializeSocket(server) to attach Socket.IO — all in a single async startup() function.

// server/src/app.js — route mounting
app.use("/api/auth", authRoutes);
app.use("/api/users", userRoutes);
app.use("/api/messages", messageRoutes);

// server/src/server.js — startup sequence
async function startup() {
  await connectDB();
  const server = app.listen(PORT, () => {
    console.log(`[SERVER] Running on port ${PORT}`);
  });
  initializeSocket(server);
}

The client’s package.json lists the following runtime dependencies:

Package	Version	Purpose
`react`	`^19.2.7`	Core UI library. All pages and components are function components; React 19’s concurrent features improve responsiveness during socket-driven state updates.
`react-dom`	`^19.2.7`	DOM renderer for React. Required alongside `react` to mount the application into `index.html`.
`react-router-dom`	`^7.18.1`	Client-side routing. Declares the four application routes (`/`, `/login`, `/register`, `/chat`) in `App.jsx` and provides `<ProtectedRoute>` guard support.
`socket.io-client`	`^4.8.3`	WebSocket client, kept at the same major version as the server. The singleton exported from `services/socket.js` is created with `autoConnect: false` so the connection is opened only after login with a valid JWT in `socket.auth`.
`axios`	`^1.18.1`	HTTP client for REST calls. The `api.js` service creates an Axios instance with `baseURL` pointing to `VITE_API_URL/api`, and interceptors can be added to attach the JWT header globally.
`tailwindcss`	`^4.3.3`	Utility-first CSS framework (v4). Styles every component without a separate CSS file, configured through `@tailwindcss/vite`.
`date-fns`	`^4.4.0`	Date formatting utilities. Used in the chat UI to render human-readable timestamps (e.g. “2 minutes ago”, “Mon 14:35”) on messages without pulling in a heavier library.
`@base-ui/react`	`^1.6.0`	Unstyled, accessible UI primitives from the Base UI project. Provides accessible modal, dropdown, and tooltip components that are then styled with Tailwind.
`lucide-react`	`^1.28.0`	Icon library. Provides crisp SVG icons used in buttons and navigation throughout the chat interface.
`@hugeicons/react`	`^1.1.9`	Additional icon set. Supplements Lucide with a broader range of communication and UI icons used across the app.
`clsx`	`^2.1.1`	Utility for constructing conditional `className` strings cleanly in JSX.
`tailwind-merge`	`^3.6.0`	Merges Tailwind class lists without conflicts, commonly paired with `clsx` for component variants.
`class-variance-authority`	`^0.7.1`	Defines typed component variant APIs (e.g. button sizes and styles) backed by Tailwind classes.
`@fontsource-variable/figtree`	`^5.3.0`	Self-hosted variable font (Figtree) used as the application’s primary typeface, loaded without an external CDN request.

Build tooling

Package	Version	Purpose
`vite`	`^8.1.1`	Build tool and development server. Provides near-instant HMR during development and produces optimised static bundles for production. Configured with `@vitejs/plugin-react` for JSX transform and `@tailwindcss/vite` for Tailwind v4 integration.
`@vitejs/plugin-react`	`^6.0.3`	Vite plugin that enables the React fast-refresh HMR overlay and the automatic JSX runtime.

The client reads two environment variables at build time: VITE_API_URL (the base URL of the Express server) consumed by both services/api.js and services/socket.js.

// client/src/services/api.js
import axios from "axios";

const api = axios.create({
  baseURL: `${import.meta.env.VITE_API_URL}/api`,
});

export default api;

// client/src/services/socket.js
import { io } from "socket.io-client";

const socket = io(import.meta.env.VITE_API_URL, {
  autoConnect: false,
});

export default socket;

Both socket.io (server) and socket.io-client (client) are pinned to ^4.8.3. Keeping these in sync is important — mismatched major versions can cause silent handshake failures or missing event support.

Get Started

Architecture

Configuration

Features

TalkBox Tech Stack: Libraries and Frameworks Used

Build docs developers (and LLMs) love

Get Started

Architecture

Configuration

Features

Documentation Index

Build docs developers (and LLMs) love