Social Media Realtime — Nền tảng mạng xã hội thời gian thực
Ứng dụng mạng xã hội full-stack với bài viết, bình luận, lượt thích, kết bạn, thông báo và nhắn tin thời gian thực. Hệ thống sử dụng NestJS, React, MySQL, WebSocket/Socket.IO, đồng thời hỗ trợ REST API và GraphQL.
Câu chuyện dự án
Quá trình, quyết định và kết quả nổi bật của dự án.
Tổng quan
Social Media Realtime là một nền tảng mạng xã hội full-stack được xây dựng nhằm mô phỏng các chức năng cốt lõi của một social network hiện đại.
Hệ thống cho phép người dùng đăng ký tài khoản, quản lý hồ sơ cá nhân, tạo bài viết, tương tác thông qua like và comment, gửi lời mời kết bạn, nhận thông báo và nhắn tin trực tiếp với người dùng khác theo thời gian thực.
Project được xây dựng với kiến trúc frontend/backend tách biệt, trong đó NestJS đảm nhiệm backend API và React 19 phụ trách giao diện người dùng.
Chức năng chính
Hệ thống cung cấp các nhóm tính năng chính:
Đăng ký và đăng nhập tài khoản.
JWT Authentication.
Access Token và Refresh Token.
Google OAuth 2.0.
OTP qua email.
Quản lý hồ sơ người dùng.
Tạo và quản lý bài viết.
Like bài viết.
Bình luận.
Gửi và quản lý lời mời kết bạn.
Quản lý quan hệ bạn bè.
Thông báo người dùng.
Upload hình ảnh.
Chat room.
Nhắn tin thời gian thực.
Lưu trữ lịch sử tin nhắn.
RESTful API.
GraphQL API.
Authentication & Authorization
Hệ thống hỗ trợ nhiều phương thức xác thực.
Email Authentication
Luồng đăng nhập truyền thống:
User
→ Register / Login
→ Authentication Service
→ Access Token + Refresh Token
→ Protected API
Password được hash trước khi lưu trữ và các endpoint yêu cầu xác thực được bảo vệ bằng JWT.
Google OAuth
Ngoài email/password, hệ thống còn hỗ trợ:
Google OAuth 2.0
→ Passport Google Strategy
→ Application Authentication
→ JWT Session
Điều này cho phép người dùng đăng nhập nhanh bằng tài khoản Google mà vẫn sử dụng cơ chế JWT thống nhất phía backend.
Real-Time Messaging
Một trong những thành phần chính của project là hệ thống chat thời gian thực.
Backend sử dụng:
NestJS WebSocket Gateway + Socket.IO
để duy trì kết nối hai chiều giữa client và server.
Cấu trúc chính của hệ thống chat gồm:
ChatRoom
→ ChatRoomUsers
→ Messages
Người dùng có thể tham gia phòng chat, gửi tin nhắn và nhận tin nhắn mới mà không cần liên tục gửi HTTP request để kiểm tra dữ liệu mới. Tin nhắn đồng thời được lưu trữ để duy trì lịch sử hội thoại.
Realtime Flow
React Client
→ Socket.IO Client
⇄ WebSocket
⇄ NestJS Gateway
→ Chat Service
→ MySQL
Kiến trúc này tách phần communication realtime khỏi các request HTTP thông thường của ứng dụng.
Social Interaction
Hệ thống triển khai các domain chính của một mạng xã hội gồm:
Posts
Người dùng có thể tạo và quản lý nội dung bài viết.
Likes
Cho phép người dùng tương tác với bài viết thông qua lượt thích.
Comments
Người dùng có thể trao đổi và phản hồi trực tiếp trên từng bài viết.
Friendship
Quản lý:
gửi lời mời kết bạn,
quan hệ giữa người dùng,
trạng thái friendship.
Notifications
Hệ thống có module riêng để quản lý thông báo liên quan đến các hoạt động của người dùng.
Backend được chia thành các module như auth, users, posts, comments, likes, friendship, chat, notifications, upload và mailer.
REST API & GraphQL
Một điểm đáng chú ý của project là backend hỗ trợ hai phong cách API cùng lúc.
REST API
REST được sử dụng cho các thao tác HTTP truyền thống:
React
→ REST API
→ NestJS Controller
→ Service
→ TypeORM
→ MySQL
GraphQL
Project đồng thời tích hợp GraphQL thông qua Apollo Server phía backend và Apollo Client phía frontend.
Luồng GraphQL:
React
→ Apollo Client
→ GraphQL
→ NestJS Resolver
→ Service
→ Database
Việc triển khai cả REST và GraphQL trong cùng một hệ thống giúp project thể hiện hai cách tiếp cận phổ biến trong thiết kế giao tiếp giữa frontend và backend.
Media Management
Hình ảnh được upload thông qua backend và lưu trữ trên Cloudinary.
Pipeline xử lý:
Client
→ NestJS Upload Service
→ Cloudinary
→ Image Optimization
→ Secure Image URL
Hệ thống hỗ trợ các thao tác xử lý ảnh như:
giới hạn kích thước,
tối ưu chất lượng tự động,
lựa chọn format phù hợp,
lưu trữ ảnh trên cloud.
Điều này giúp tách phần media storage khỏi application server.
Backend Architecture
Backend sử dụng NestJS + TypeScript và được chia thành các business module độc lập:
Mỗi domain được tổ chức riêng thay vì gom toàn bộ business logic vào một module duy nhất.
Data access sử dụng:
TypeORM + MySQL
Backend cũng tích hợp các thành phần như Passport, JWT, Google OAuth, Socket.IO, Cloudinary và Nodemailer.
Các dependency trong source xác nhận project sử dụng NestJS, TypeORM, MySQL2, Apollo/GraphQL, Passport JWT, Google OAuth, Socket.IO, Cloudinary và Nodemailer.
Project sử dụng nhiều lớp quản lý state khác nhau tùy mục đích.
Client State
Redux Toolkit + Redux Persist
được sử dụng cho global application state và lưu trạng thái cần persistence.
Server State
TanStack React Query
được sử dụng cho dữ liệu lấy từ server.
GraphQL State
Apollo Client
quản lý GraphQL queries và cache.
Realtime State
Socket.IO Client
duy trì communication realtime với backend.
Frontend dependency thực tế bao gồm React 19, Redux Toolkit, React Query, Apollo Client, Socket.IO Client, React Hook Form, Zod, Radix UI và Framer Motion.
Form & Validation
Frontend sử dụng:
React Hook Form + Zod
để quản lý form và schema validation.
Backend đồng thời sử dụng:
class-validator + class-transformer
cho DTO validation.
Nhờ đó dữ liệu được kiểm tra ở cả phía client lẫn server trước khi đi vào business logic.
Testing
Backend có cấu hình kiểm thử bằng Jest và hỗ trợ:
Unit Test.
Watch Mode.
Test Coverage.
End-to-End Test.
Project cũng sử dụng Supertest cho quá trình kiểm thử HTTP API.
Điểm nổi bật
Real-Time Communication
Triển khai hệ thống nhắn tin hai chiều bằng WebSocket và Socket.IO, thay vì polling API liên tục.
Project xây dựng được một hệ thống mạng xã hội full-stack bao gồm đầy đủ các thành phần từ:
Authentication
→ User Management
→ Posts & Social Interaction
→ Friendship
→ Notifications
→ Media Upload
→ Real-Time Messaging
đồng thời tích hợp REST, GraphQL và WebSocket trong cùng một backend NestJS.
Project phù hợp để thể hiện kinh nghiệm về Full-stack Development, Backend Architecture và Real-Time Systems, thay vì chỉ là một CRUD social media thông thường.
Tech Stack
NestJS · React 19 · TypeScript · MySQL · TypeORM · REST API · GraphQL · Apollo · WebSocket · Socket.IO · JWT · Google OAuth 2.0 · Cloudinary · Redux Toolkit · TanStack Query · React Hook Form · Zod · Tailwind CSS · Jest
