🚀 Live-Code | Video Calling & Real-time Interview Platform
Một nền tảng phỏng vấn trực tuyến toàn diện, cho phép nhà tuyển dụng và ứng viên tương tác qua video call, nhắn tin theo thời gian thực và đặc biệt là viết/chạy code trực tiếp (Code Execution) ngay trên trình duyệt.
Dự án được xây dựng dựa trên kiến trúc MERN Stack (MongoDB, Express, React, Node.js) kết hợp với các dịch vụ hiện đại như Clerk, Stream và Inngest.
✨ Tính năng nổi bật
- 📹 Video & Audio Call: Gọi video chất lượng cao, độ trễ thấp (Powered by Stream).
- 💻 Live Code Editor: Trình soạn thảo mã nguồn nhúng trực tiếp trên web với giao diện giống VS Code (Monaco Editor).
- 🚀 Code Execution: Chạy code thật và kiểm tra kết quả ngay lập tức hỗ trợ đa ngôn ngữ:
JavaScript,Python,Java(Powered by Piston API). - 💬 Real-time Chat: Nhắn tin trực tiếp trong lúc phỏng vấn, hỗ trợ gửi emoji, ảnh và GIF.
- 🔐 Xác thực người dùng: Đăng nhập/Đăng ký an toàn và quản lý session thông minh (Powered by Clerk).
- ⚙️ Background Jobs: Đồng bộ dữ liệu người dùng tự động giữa Clerk, MongoDB và Stream thông qua Webhooks (Powered by Inngest).
🖼️ Ảnh demo
🛠️ Công nghệ sử dụng (Tech Stack)
Frontend
- Framework: React.js (Vite)
- Styling: Tailwind CSS & DaisyUI
- Data Fetching: @tanstack/react-query
- Routing: React Router v7
- UI Components: Shadcn UI, React Hot Toast, Canvas Confetti
Backend
- Runtime: Node.js
- Framework: Express.js
- Database: MongoDB (Mongoose)
- Kiến trúc: RESTful API
🚀 Hướng dẫn cài đặt & Chạy dự án (Getting Started)
1. Clone repository
git clone [https://github.com/khadonnn/live-code.git](https://github.com/khadonnn/live-code.git)
cd live-code
# Cài đặt cho Backend
cd backend
npm install
# Cài đặt cho Frontend
cd ../frontend
npm install
Cấu trúc thư mục
live-code/ ├── backend/ │ ├── src/ │ │ ├── controllers/ # Xử lý logic API │ │ ├── models/ # Định nghĩa Schema MongoDB (Mongoose) │ │ ├── routes/ # Khai báo các endpoint API │ │ ├── middlewares/ # Xử lý bảo mật, xác thực (RequireAuth) │ │ ├── lib/ # Cấu hình DB, Inngest, Stream, Piston │ │ └── server.js # Entry point của Express │ ├── .env │ └── package.json └── frontend/ ├── src/ │ ├── api/ # Axios instance & gọi API │ ├── components/ # Reusable UI components │ ├── hooks/ # Custom React hooks (Tanstack Query) │ ├── pages/ # Các trang chính (Home, Dashboard, Session) │ └── data/ # Mock data (Danh sách câu hỏi) ├── .env.local └── package.json
Docker setup
mở ở root
Windows: Click đúp vào file: setup-piston.bat
Mac: Mở Terminal tại thư mục gốc và gõ ./setup-piston.sh
Local Piston
Script setup sẽ build image từ Dockerfile, chạy Piston ở http://localhost:10000, và giữ runtimes trong Docker volume tên piston_packages.
Render
Render không phù hợp để chạy trực tiếp Piston container vì Piston cần privileged container và cgroup v2. Với demo trên Render, hãy deploy frontend/backend ở Render, sau đó cấu hình PISTON_API_URL ở backend trỏ tới một Piston instance bên ngoài hoặc self-host khác. Frontend chỉ cần gọi backend qua VITE_API_URL.