---

🚀 Giới thiệu (Overview)

TingTing là một ứng dụng web hiện đại giúp các nhóm bạn bè, gia đình, hoặc đồng nghiệp dễ dàng ghi chép và chia sẻ các khoản chi tiêu chung. Ứng dụng tự động tính toán "ai nợ ai bao nhiêu tiền" bằng thuật toán thông minh, tối giản hóa các luồng tiền phức tạp và hỗ trợ thanh toán nhanh gọn thông qua mã QR ngân hàng.

[!TIP] Trải nghiệm ngay ứng dụng mà không cần đăng ký tài khoản:

• 🌐 Website: https://ting-ting-app.vercel.app
• 👤 Tài khoản Test:
  Đoạn Mã Sao Chép Mã

  demo

• 🔑 Mật khẩu:
  Đoạn Mã Sao Chép Mã

  123

---

📸 Hình ảnh giao diện thực tế (Screenshots)

---

✨ Tính năng nổi bật (Key Features)

• ⚡ Real-time Synchronization: Mọi thao tác thêm biên lai, sửa chi tiêu, thanh toán nợ đều được đồng bộ thời gian thực (Real-time) tới tất cả các thành viên trong nhóm thông qua Socket.io.
• 🧮 Smart Split Algorithm: Tự động đối trừ công nợ chéo giữa các thành viên. (VD: A nợ B 50k, B nợ C 50k -> A chỉ cần trả thẳng C 50k).
• 📸 Quản lý Biên lai & Nén ảnh: Hỗ trợ upload ảnh biên lai. Tích hợp tính năng tự động nén ảnh (Client-side Image Compression) trước khi đẩy lên AWS S3, giúp tiết kiệm băng thông và tối ưu tốc độ tải.
• 🏦 Tích hợp thanh toán QR: Tự động tạo mã QR VietQR dựa trên số tiền cần trả và tài khoản ngân hàng của người nhận, giúp thanh toán chỉ trong 1 lần quét.
• 🔐 Bảo mật & Phân quyền: Xác thực bằng JWT Token an toàn. Lưu trữ mật khẩu bằng Bcrypt.

---

🛠 Công nghệ sử dụng (Tech Stack)

Frontend

• Framework: React 19, Vite
• Styling: TailwindCSS 4, Framer Motion (Micro-animations)
• Tối ưu hóa: Client-side Image Compression (
  Đoạn Mã Sao Chép Mã

  browser-image-compression

  ), LocalStorage State Persistence.

Backend

• Core: Node.js, Express, TypeScript
• Database: PostgreSQL (trên nền tảng Supabase)
• ORM: Prisma
• Real-time: Socket.io
• Storage: AWS S3 (cho việc lưu trữ ảnh avatar, hóa đơn)
• Hiệu suất & Bảo mật:
  • Đoạn Mã Sao Chép Mã

    node-cache

    (In-memory caching cho các API đọc nhiều).
  • Đoạn Mã Sao Chép Mã

    helmet

    ,
    Đoạn Mã Sao Chép Mã

    express-rate-limit

    (Chống DDoS & Brute-force).

---

☁️ Hạ tầng & Triển khai (Deployment Architecture)

Ứng dụng được triển khai 100% trên các nền tảng Cloud hiện đại, đảm bảo tính sẵn sàng cao và khả năng mở rộng:

• Vercel: Hosting Frontend (React/Vite). Tự động deploy qua GitHub CI/CD, tận dụng Edge Network để tải trang cực nhanh.
• Render.com: Hosting Backend (Node.js/Express). Đảm bảo tính ổn định và duy trì các kết nối Socket.io liên tục.
• Supabase: Cung cấp cơ sở dữ liệu PostgreSQL mạnh mẽ, cấu hình sẵn Connection Pooler (Pgbouncer) để xử lý lượng lớn truy vấn.
• AWS S3: Lưu trữ toàn bộ hình ảnh avatar và biên lai, đảm bảo an toàn dữ liệu và tối ưu chi phí lưu trữ.
• UptimeRobot: Hệ thống giám sát (Monitoring) tự động ping tới server Render mỗi 5 phút, giữ cho backend luôn "thức" (awake) để loại bỏ hoàn toàn độ trễ khởi động lạnh (Cold Start).

---

📈 Kiến trúc & Tối ưu hiệu suất (Performance & Architecture)

Trong quá trình xây dựng, ứng dụng đã được áp dụng nhiều kỹ thuật tối ưu để đảm bảo tốc độ và trải nghiệm:

1. In-Memory Caching: Các API tra cứu dữ liệu tĩnh (như thông tin User Profile) được cache bằng
   Đoạn Mã Sao Chép Mã

   node-cache

   , giảm thời gian phản hồi từ 150ms xuống chỉ còn ~2ms. Hệ thống tự động làm sạch (invalidate) cache khi dữ liệu thay đổi.
2. Bandwidth Optimization: Trình duyệt người dùng sẽ tự động nén ảnh biên lai (xuống tối đa 1MB, độ phân giải chuẩn, định dạng JPEG) trước khi tải lên.
3. Database Connection Pooling: Kết nối Database được quản lý bằng Connection Pooler trên cổng IPv4, đảm bảo ổn định khi có hàng nghìn truy vấn đồng thời.
4. Giữ kết nối máy chủ (Keep-alive): Sử dụng các job ping định kỳ để đảm bảo máy chủ không rơi vào trạng thái "sleep", loại bỏ hoàn toàn độ trễ ở lần truy cập đầu tiên.

---

💖 Lời Cảm Ơn (Acknowledgments)

Cảm ơn bạn đã dành thời gian ghé thăm và tìm hiểu về dự án TingTing. Đây là một dự án tâm huyết được xây dựng nhằm giải quyết bài toán tài chính nhóm một cách thực tế và tối ưu nhất. Nếu bạn là một nhà tuyển dụng, hy vọng dự án này có thể phần nào thể hiện được tư duy thiết kế hệ thống, khả năng xử lý bài toán hiệu suất và kỹ năng lập trình của tôi.

Đặc biệt gửi lời cảm ơn tới cộng đồng Open Source vì các công nghệ tuyệt vời:

• React & Vite
• Node.js & Express
• Prisma & Supabase