vibe.j2team.org

vibe.j2team.org

Sẽ thế nào nếu cả nhóm J2TEAM Community vibe code cùng nhau?

Trang chủ là một Launcher, dẫn link tới các trang con do thành viên tạo ra. Mọi người tự do vibe code thoải mái trên trang của mình!

🚀 J2TEAM Launch - Nền tảng ra mắt sản phẩm dành cho developer

Tech Stack

• Vue 3 - Progressive JavaScript Framework
• TypeScript - JavaScript với static typing
• Vite - Build tool thế hệ mới
• Tailwind CSS - Utility-first CSS framework
• Vue Router - Routing
• Pinia - State management
• VueUse - 200+ composables cho Vue
• Iconify - 200,000+ icons từ 150+ bộ icon

Trang nổi bật

Trang	Mô tả	Tác giả
Project 42	Where does everything begin?	sanghynh
Cờ Tướng Online	Cờ Tướng P2P với webcam — chơi online qua WebRTC, có chế độ xem	hwg
Cuộc sống hàng ngày của AI	Mô tả cuộc sống của AI bằng giao diện pixel	ngducnhatt
Gạch Bông đi cảnh	Game nối gạch bông truyền thống — Relaxing Music Video	hidang
CanChi	Lá số Tử Vi Đẩu Số — lập lá số theo ngày tháng năm sinh	duckocancode
What if?	Tương lai là muôn vàn ngã rẽ và lựa chọn, nếu là bạn, bạn sẽ chọn con đường nào?	Nhật ký học tập của Khang - KBOT
Đập Bug	Đập bug để giải tỏa áp lực coding! Đập càng nhanh, vibe càng cao	Jimmy Trần
Flash Card	Học từ vựng hoặc kiến thức mới với thẻ ghi nhớ	ldblckrs-258
Resume Builder	Soạn thảo CV bằng Markdown và xem preview đẹp real-time	Nguyen Hoang Thong
Piano ảo	Chơi đàn piano ngay trên trình duyệt — dùng chuột hoặc bàn phím	Dinh San

Xem thêm…

Bắt đầu

pnpm install
pnpm dev

Nguyên tắc

1. Không có database — dự án không sử dụng database

2. Luôn có link về trang chủ — mỗi trang con phải có link quay lại trang chủ

3. Ngôn ngữ: tiếng Việt (ưu tiên) hoặc tiếng Anh

4. Không trùng ứng dụng con đã có — kiểm tra danh sách trang trước khi tạo mới

5. Mỗi trang con hoạt động độc lập — chỉ làm việc trong thư mục trang của mình

6. Responsive — trang phải hiển thị tốt trên mobile

7. Không thêm dependency mới trừ khi thật sự cần và được approve. Các thư viện sau đã được cài sẵn — tự do sử dụng:

   • @vueuse/core — 200+ composables cho Vue
   • @iconify/vue — 200,000+ icons từ 150+ bộ icon
   • shiki — Syntax highlighter

   Các thư viện sau được chấp thuận sẵn và có thể thêm mà không cần approve:

   • vue-konva — Thư viện canvas 2D cho vẽ, game, đồ hoạ tương tác

8. Ghi rõ tên tác giả trong file meta.ts của trang

Cách tham gia

1. Fork repo và clone về máy
2. Tạo branch mới từ main (ví dụ: git checkout -b feat/tên-trang)
3. Tạo trang mới bằng script:

   pnpm create:page <tên-trang>
   

   Script sẽ hỏi tên hiển thị, mô tả, tác giả, Facebook URL (tuỳ chọn) và danh mục, rồi tự tạo src/views/<tên-trang>/index.vue + meta.ts.
4. Code trang của bạn trong index.vue
5. Tạo Pull Request và chờ merge!

Xem trang mẫu: src/views/hello-world/

Xem hướng dẫn thiết kế: docs/DESIGN_SYSTEM.md

Cấu trúc dự án

src/
  views/
    HomePage.vue                 # Trang chủ (launcher)
    hello-world/
      index.vue                  # Trang mẫu
      meta.ts                    # Thông tin trang (tên, mô tả, tác giả)
    <tên-của-bạn>/
      index.vue                  # Trang của bạn
      meta.ts                    # Thông tin trang của bạn
  router/index.ts                # Cấu hình routes
  stores/                        # Pinia stores

Các lệnh thường dùng

Lệnh	Mô tả
pnpm dev	Chạy dev server
pnpm build	Build production
pnpm test:unit	Chạy unit tests
pnpm lint	Lint code
pnpm format	Format code
pnpm create:page <slug>	Tạo trang mới từ template

IDE

VS Code + Vue (Official)

Contributors

Made with contrib.rocks.

Star History