Xây dựng System Design Playground với .NET, React, SQL Server & AI

Khóa học hướng dẫn xây dựng một ứng dụng System Design Playground hoàn chỉnh, nơi người dùng có thể thiết kế kiến trúc hệ thống, mô phỏng luồng tải, phân tích hiệu năng và sinh code skeleton.

Khóa học tập trung vào cách làm việc thực tế của Senior/Tech Lead trong thời đại AI:

biết dùng Copilot, ChatGPT, Google Stitch để tăng tốc, nhưng vẫn giữ kiến trúc sạch, dữ liệu đúng, và tư duy system design chuẩn production.

https://tedu.com.vn/khoa-hoc/xay-dung-system-design-playground-voi-net-react-sql-server-ai-60.html

???? ĐỐI TƯỢNG PHÙ HỢP
Backend / Full-stack dev đã đi làm (≥ 1–2 năm)
Dev .NET muốn lên system thinking
Tech Lead / PM kỹ thuật
Indie founder muốn hiểu system design thực tế
❌ Không phù hợp cho người mới học lập trình từ đầu



???? SẢN PHẨM CUỐI KHÓA
System Design Playground – Web App

Thiết kế kiến trúc hệ thống bằng drag & drop
Mô phỏng traffic, latency, throughput (rule-based)
Dashboard metrics (p50 / p95 / error rate)
Sinh code skeleton:
Backend: .NET Web API
Frontend: React
Database: SQL Server
Export kịch bản load test


????️ CÔNG NGHỆ SỬ DỤNG
Backend: .NET (Clean Architecture nhẹ)
Frontend: React (Canvas + Dashboard)
Database: SQL Server (kết hợp JSON storage)
AI tools:
GitHub Copilot
ChatGPT
Google Stitch (UI generation)
Optional: Docker, CI/CD cơ bản


???? NỘI DUNG KHÓA HỌC (Overview)
Khóa học không dạy “framework từng dòng”, mà dạy:

Tư duy system design thông qua việc build app thật
Workflow dùng AI như một Senior Developer
Cách biến ý tưởng → kiến trúc → code → mô phỏng → đo lường


???? SYLLABUS CHI TIẾT


Module 0: Vibe Coding & The New Workflow


Bài 1: Tư duy Vibe Coding – Khi "Ý niệm" trở thành code.

Bài 2: Thiết lập môi trường: .NET 8, React, SQL Server & Docker.

Bài 3: Project Rules: Cấu hình "luật chơi" cho AI (Copilot/Cursor) để code luôn sạch.



Module 1: UI/UX Design với Google Stitch


Bài 4: Prompting trong Google Stitch: Từ ý tưởng sơ đồ đến giao diện trực quan.

Bài 5: Thiết kế Layout cho Playground: Canvas, Toolbar và Property Panel.

Bài 6: Export Stitch sang React & Tailwind: Cách xử lý code UI do AI sinh ra.



Module 2: Kiến trúc Dữ liệu & System Design Modeling


Bài 7: Phân tích Domain: Làm sao để máy tính hiểu được "Load Balancer" hay "Database"?

Bài 8: Thiết kế JSON Schema cho System Diagram: Nodes, Edges và Data Props.

Bài 9: Quản lý State của sơ đồ với React Flow & Context API.



Module 3: Xây dựng Canvas với React Flow


Bài 10: Tích hợp React Flow vào dự án: Khởi tạo và cấu hình cơ bản.

Bài 11: Custom Nodes: Tạo các thành phần hệ thống chuyên biệt (icon, input, status).

Bài 12: Logic kết nối: Xử lý kéo thả, ràng buộc kết nối và lưu trữ bản vẽ.



Module 4: Backend Core với .NET & SQL Server


Bài 13: Clean Architecture tối giản: Tổ chức Project cho mục tiêu Gen Code.

Bài 14: API Management: Quản lý Diagrams, Scenarios và Runs.

Bài 15: SQL Server Hybrid Storage: Kết hợp sức mạnh của Relational và JSON data.



Module 5: Simulation Engine – Trái tim của Playground


Bài 16: Thuật toán tính toán hiệu năng: Latency, Throughput và Capacity.

Bài 17: Mô phỏng Rule-based: Cách ước tính P50, P95 từ các tham số của Node.

Bài 18: Phát hiện "Điểm nghẽn" (Bottleneck) tự động dựa trên sơ đồ.



Module 6: AI-Assisted Code Generator (Tính năng "Sát thủ")


Bài 19: Tích hợp LLM API (OpenAI/Anthropic) vào .NET Backend.

Bài 20: Kỹ thuật Diagram-to-Prompt: Biến JSON Schema thành yêu cầu cho AI.

Bài 21: Xây dựng hệ thống Template & Refiner để sinh Code Skeleton (.NET & React).



Module 7: Metrics, Dashboard & Comparison


Bài 22: Trực quan hóa dữ liệu mô phỏng với Chart.js/Recharts.

Bài 23: Tính năng So sánh (A/B Architecture): Monolith vs Microservices.

Bài 24: Dashboard Metrics: Hiển thị Error Rate, Cost và Performance.



Module 8: Load Testing & thực tế hóa bản vẽ


Bài 25: Export kịch bản Load Test: Từ sơ đồ sang file k6 (JavaScript).

Bài 26: Đối chiếu: Simulation vs. Real-world Benchmarking.

Bài 27: Technical Design Document: Tự động hóa việc viết tài liệu từ bản vẽ.



Module 9: Production Readiness & Career


Bài 28: Bảo mật: JWT Auth & Phân quyền bản vẽ.

Bài 29: CI/CD & Dockerize: Đưa Playground lên Cloud (Azure/AWS).

Bài 30: Tổng kết: Cách dùng Playground để "Pass" mọi vòng System Design Interview.


⭐ GIÁ TRỊ KHÁC BIỆT CỦA KHÓA HỌC
Không chỉ “vẽ system design” → chạy & đo
Không chỉ dùng AI → biết kiểm soát AI
Xây dựng một sản phẩm hoàn chỉnh, không phải demo rời rạc

▶ More information about TEDU:
Website: https://tedu.com.vn
Email: [email protected]
https://www.youtube.com/@teduvn

▶ CLICK TO SUBSCRIBE: https://www.youtube.com/@teduvn
#systemdesign #vibecoding #react

DO NOT REUPLOAD