100 stars. Tôi build. MIT license. Miễn phí.
Chuyện này chắc không còn xa lạ.
Có một sản phẩm cần cả website lẫn app điện thoại. Thế là mở hai chục tab. Web framework. Mobile framework. UI kit. API layer. Validation. Auth. Database. Email. Cache. Files. Logs. Docker để chạy trên máy. Cách đưa nó lên server. Rồi thêm một AI agent có thể nhìn vào repo mà không tự nghĩ ra một kiến trúc khác.
Vài tuần sau, đống công cụ gần như đã chịu nói chuyện được với nhau. Còn ý tưởng thì nguội ngắt.
Mua sắm công nghệ bắt đầu giống làm kỹ thuật. Trong khi thứ quan trọng nhất, sản phẩm, vẫn chưa được bắt tay vào làm.
Repo này là một lời bỏ phiếu cho việc bỏ qua màn mua sắm đó. Một monorepo cho web và mobile, được tổ chức bằng Vite+. Những công cụ đã đủ tốt, được giới thiệu cho nhau để ta có thể tập trung ship feature.
Thỏa thuận
Stack bên dưới là kế hoạch. Code mới là phần thưởng.
Khi repo này đạt 100 stars, tôi sẽ build nó và phát hành dưới MIT license. Miễn phí để dùng, miễn phí để sửa, miễn phí để đưa thẳng vào sản phẩm của mình. Không khóa học. Không paywall. Không có một gói enterprise ngồi chắn ngay những thứ ta thực sự cần.
Một star mất hai giây. Nó có nghĩa: hãy build phần hệ thống nhàm chán, để tôi được build phần thú vị.
Có thể ta muốn đợi đến khi code tồn tại. Nhưng code chỉ tồn tại khi có đủ vote. Chờ đợi chính là cách một stack tốt mãi nằm trong một bài blog.
Star repo: https://github.com/VienDinhCom/vite-plus-full-stack
Ta đang vote cho cái gì?
Web và mobile. Một API. Một schema. Một auth. Một database. Từ laptop đến server.
Một monorepo
Vite+ là toolchain thống nhất đứng sau command vp. Một công cụ gom những thứ trước đây ta phải tự nối bằng tay: Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt và Vite Task. Miễn phí, MIT license.
Một file config. Một bộ command: vp install, vp dev, vp check, vp test, vp build, vp run.
vp check format, lint và type-check chỉ trong một lượt, đồng thời tự sửa những lỗi mà nó biết cách sửa. Test dùng lại resolve và transform setup của app. Test runner tương thích với Jest API, mặc định cô lập các test và thậm chí có thể chạy test trong browser thật.
Những con số về tốc độ là tuyên bố của Vite+, và chúng khá cụ thể. Core viết bằng Rust. Build production có thể nhanh hơn webpack tới 40 lần. Linting nhanh hơn ESLint khoảng 50 đến 100 lần. Formatting nhanh hơn Prettier tới 30 lần. Hot module replacement vẫn gần như tức thì. Trong monorepo, Vite Task cache công việc và chạy các package theo đúng thứ tự dependency.
Ta chỉ phải duy trì một toolchain. Cùng một command có cùng một ý nghĩa ở mọi package.
Web và mobile, cùng một ngôn ngữ
TanStack Start là web app. Full-stack React với type-safe routing, server-side rendering, streaming và server functions, chạy trên TanStack Router. Routes, loaders và links vẫn nằm đúng chỗ. Start bổ sung phần server. Một server function hiện ngay trong đoạn code gọi nó, với validator đứng ở đầu vào.
Expo là mobile app. Đây là React Native framework được đội ngũ React Native khuyến nghị: iOS, Android và web, cùng một hệ sinh thái native API lớn. File-based routing. Typed routes. Biết React là có thể ship app điện thoại. Swift hay Kotlin chỉ xuất hiện khi một màn hình thực sự cần đến chúng.
Cùng TypeScript. Hai client. Một sản phẩm.
UI thuộc về mình
Tailwind CSS cho cả web và mobile. Utility classes nằm ngay trong markup, rồi được ghép thành design mà ta thực sự muốn. Production build sẽ loại bỏ những CSS chưa từng dùng.
shadcn/ui cho web components. Accessible, composable và được copy thẳng vào repo để ta tự sửa. Button là của ta. Library release không phải ông chủ của ta.
React Native Reusables cho mobile. shadcn/ui được đưa sang React Native, style bằng Nativewind hoặc Uniwind. UI trên điện thoại và UI trên website có thể cùng một gu.
Một API, hai client
oRPC là nơi định nghĩa và implement server API. Cả hai client đều gọi API với end-to-end types. Khi partner, tài liệu hoặc một ngôn ngữ khác cần một HTTP contract bình thường, OpenAPI đã có sẵn. Có adapter cho TanStack Start và Expo, integration với Better Auth, cùng các helper hạng nhất cho TanStack Query.
TanStack Query quản lý server state. Component khai báo dữ liệu cần gì. Cache tự dedupe những request đang chạy, retry, refetch ở background và giữ stale data trên màn hình trong lúc network bắt kịp. Mutation có thể cập nhật UI trước rồi đồng bộ lại với server sau. Web và mobile cùng một cách làm.
Schema đi được khắp nơi
Zod là ngôn ngữ schema. TypeScript-first, không dependency, đủ nhỏ để chạy cả server lẫn client. Mô tả payload một lần. Parse khi dữ liệu đi vào. Infer type từ chính object đó. oRPC nhận Zod thông qua Standard Schema, nên API contract và validator thực chất là một.
T3 Env parse environment variables bằng chính Zod schema đó. Thiếu key thì app fail ngay lúc startup, kèm một message đọc được. Còn hơn là chạy thêm ba màn hình rồi mới crash. Server variables và client variables được tách riêng. Đọc server secret từ client thì nó cố tình throw error.
Auth, data và những thứ còn lại của một sản phẩm thật
Better Auth nằm ngay trong application code. Email và password, sessions, social sign-in, organizations, roles, two-factor, passkeys và cả một danh sách plugin dài. Config là một file có thể review ngay trong pull request.
Drizzle ORM quản lý Postgres bằng TypeScript: schema, queries và migrations. Row-Level Security nằm trong database. User nhìn thấy row của mình vì Postgres nói thế, kể cả khi handler quên mất một where.
Những service xung quanh phần lõi:
- React Email viết email dưới dạng React components và gửi qua provider mà ta đang dùng.
- Redis giữ cache, rate limits và những state sống trong thời gian ngắn.
- Twilio lo phần điện thoại.
- Amazon S3 lưu file ở production. Trên laptop, RustFS nói cùng S3 API, nên code upload không cần đổi. RustFS là open source, Apache 2.0 và viết bằng Rust.
- OpenTelemetry thu thập traces, metrics và logs một lần, rồi export sang backend nào ta muốn sau này. oRPC có thể ghi lại những span đó xuyên suốt procedure call.
Laptop trước, server sau
Docker chạy các local services: Postgres, Redis, RustFS và Mailpit. Mailpit là một SMTP server nhỏ với web inbox. Nó render HTML, kiểm tra links, chấm điểm spam và cung cấp API cho test. Email reset password sẽ nằm ngay trên máy của ta cho đến khi ta quyết định một inbox thật nên nhận nó.
Với VPS, Kamal deploy containerized app lên những Ubuntu server bình thường. Zero-downtime deploy, rolling restart và accessory services. Đưa IP address và SSH key cho nó. Nó cài Docker rồi ship. Đây cũng là cách 37signals từng dùng để đưa app của họ lên phần cứng mà họ kiểm soát.
Ta cũng có thể deploy ở nơi mình đã có account: Amazon AWS, Vercel, Google Cloud, Railway, Fly.io và những nơi khác. TanStack Start giữ nguyên routes và server boundaries khi deploy target thay đổi. Kamal là con đường VPS. Cả stack vẫn portable.
Agent đã biết nhà ở đâu
OpenCode là coding agent open source. Chạy trong terminal, desktop app hoặc IDE. Claude, GPT, Gemini, local model hoặc bất kỳ hơn 75 provider nào. Nó không lưu code hay context của ta.
Ba công cụ giúp nó luôn biết mình đang đứng ở đâu trong repo:
- CodeGraph xây một local code knowledge graph và sync khi file thay đổi. Agent tốn ít token hơn để đi tìm đường. Graph vẫn nằm trên máy, và OpenCode đã hỗ trợ nó.
- Ponytail hướng agent đến thay đổi nhỏ nhất nhưng vẫn giải quyết được vấn đề. Dòng code tốt nhất là dòng code không cần phải viết.
- DBHub là MCP server tiết kiệm token cho Postgres và các database khác. Mặc định chỉ có hai tools, để context window còn chỗ cho task. Read-only mode, row limits và timeouts có sẵn cho những lúc một câu hỏi không nên biến thành migration.
Ta sẽ làm gì với nó?
Dùng nó. Ship feature.
Màn hình là React. Style là Tailwind. Component là của ta. Payload là Zod schema. Call là oRPC. Cache là TanStack Query. Session là Better Auth. Row là Postgres, phía sau có RLS. Email là một React component. File nằm trên S3. Trace được OpenTelemetry thu lại. Agent nhìn được graph, database và cả instruction bảo nó viết ít code hơn.
Từng công cụ trong số đó vốn đã tốt.
Thứ còn thiếu là sự thống nhất giữa chúng.
Đến lượt ta
Nếu đây là hệ thống mà ta sẽ ngồi ráp trong một cuối tuần rồi tiếp tục duy trì trong nhiều năm, hãy vote.
100 stars. Tôi build. MIT license. Miễn phí.
Top comments (0)