📱 Chat System Frontend

Github: github.com/le-minh-duc-dev/chat-system-frontend.git

This is the frontend of a scalable chat system built with React and TypeScript, designed for performance and maintainability. It supports real-time communication, JWT-based authentication, and presence tracking. The system is integrated with backend services via REST and WebSocket using STOMP protocol.

⚙️ Tech Stack

React
TypeScript for static typing
Redux Toolkit for app-wide state management
TanStack Query (React Query) for async data fetching and caching
TanStack Virtual for performant list virtualization
HeroUI for accessible UI components
STOMP over WebSocket for real-time chat via @stomp/stompjs
Axios with JWT token refresh interceptor

🚀 Highlights

⚡ Virtualized Lists: Efficient rendering of large chat history using TanStack Virtual.
🔐 Secure Authentication: JWT access/refresh token handling with auto-refresh and retry queue.
🧠 Optimistic UI: Instant UI updates with intelligent caching via TanStack Query.
🔄 Real-time Communication: Bi-directional WebSocket messaging via STOMP protocol.
🌐 Presence Tracking: Tracks user online status via heartbeat logic.
🧰 Modular DTO Models: Strongly typed classes/interfaces for API responses.

🔄 Axios Interceptor

Handles:

Automatic token refresh on 401
Retry queue for requests during refresh
Logout redirection when refresh fails

🔁 Client-Side Routing

This frontend application is built as a Single Page Application (SPA) using Tanstack Router to manage in-app navigation without full page reloads. It supports public and protected routes with authentication status.

🚦 Routing Features

Protected Routing: Check authentication status to secure authenticated routes
Route Redirection: Automatically redirects unauthenticated users to /login

📁 Route Structure

Path	Component	Access	Description
`/`	`App`	🔐 Protected	Default landing page after login
`/chat`	`Chat`	🔐 Protected	Main chat interface
`/chat/{id}`	`Chat`	🔐 Protected	Chat room interface
`/profile`	`Profile`	🔐 Protected	User profile dashboard
`/login`	`Login`	🔓 Public	Login screen for unauthenticated users
`/register`	`Register`	🔓 Public	User account registration