DEV Community: Vien Dinh

Vite Plus Full Stack cho phát triển Web & Mobile với AI Agents

Vien Dinh — Mon, 05 Oct 2026 04:14:13 +0000

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í.

Star VienDinhCom/vite-plus-full-stack now!

ESMate: An Anti-Fatigue Toolkit for JavaScript/TypeScript Development

Vien Dinh — Tue, 23 Dec 2025 14:37:00 +0000

Starting a new JavaScript or TypeScript project often feels like a battle against configuration. Before you write a single line of business logic, you're usually stuck setting up ESLint, Prettier, TypeScript, Tailwind CSS, and testing tools. It's a repetitive, draining ritual.

ESMate answers a simple question: "How do we make modern JavaScript development smooth and easy, even in the Node.js world?"

Inspired by the developer experience of Deno, ESMate provides a suite of tools and packages designed to simplify the modern web development workflow. It’s not a new runtime, but a helper layer that makes living in the Node.js ecosystem much more pleasant.

Here is a tour of the ESMate ecosystem and how it can supercharge your development.

The Core Tools

1. esmate (CLI)

The esmate CLI is the heart of the toolkit. It unifies common tasks into a single, cohesive interface.

Lint & Format: Wraps ESLint and Prettier with zero-config defaults.
- esmate lint / esmate fmt: Check and auto-fix your code.
Task Runner: A powerful task runner compatible with npm scripts but enhanced. Supports both sequential and parallel execution defined right in your package.json.

npm install -D esmate

2. create-esmate

Forget copying and pasting old config files. create-esmate is a scaffolding tool that sets up modern apps instantly. It supports React, Vue, Solid, Svelte, Astro, and Next.js out of the box.

npm create esmate@latest

You can also choose from robust templates like:

react-spa: React + TanStack Router
react-astro: React + Astro + TanStack
react-next: React + Next.js + Drizzle + Stripe

The Packages

ESMate also provides a collection of packages that you can use individually or together.

@esmate/utils

A comprehensive utility belt. It re-exports and unifies:

es-toolkit: Modern, high-performance LODASH replacement.
math.js: For complex math operations.
String tools: Advanced string manipulation (title casing, typo fixing).

@esmate/react

React development made easier.

Hooks: Includes the full power of ahooks (useRequest, usePagination).
Custom Hooks: specialized hooks like useImmutableState (powered by Immer) and useSearchParams.

@esmate/shadcn

If you use shadcn/ui, you'll love this. It bundles shadcn components, hooks, and styles into a single installable package.

Zero Config: Works with Tailwind automatically.
Pre-built UI: Import components like import { Button } from "@esmate/shadcn/components/ui/button".
Bundled Deps: No need to manually install zod, react-hook-form, or radix-ui primitives—they are all re-exported.

@esmate/eslint & @esmate/prettier

Opinionated but configurable setups "for humans".

@esmate/eslint: A wrapper around @antfu/eslint-config tuned for React, Vue, Astro, and Svelte.
@esmate/prettier: Includes the Tailwind CSS plugin and sensible defaults.

Why Switch?

We believe developers should spend their time building, not configuring. ESMate lets you skip the boilerplate ritual and get straight to the work that matters.

Give it a try today: https://github.com/VienDinhCom/esmate

Enhance Your English Listening Skills with Hocify: The Game-Changing Transcription Tool!

Vien Dinh — Sun, 22 Oct 2023 10:32:35 +0000

Hey there! Are you trying to get better at understanding English when people talk? Well, I have something super cool for you. It's called Hocify! With Hocify, you can practice your listening skills by transcribing what you hear. Sounds fun, right?

Here's how it works. First, you open up Microsoft Edge, a type of internet program. If you have a newer Windows, you probably already have it. If you use a Mac or Linux, you can download it for free from this link: https://www.microsoft.com/vi-vn/edge/download

Next, you click on this link: https://www.hocify.com/transcribe. You can find a story or something you like in English and copy and paste it into the Hocify box to start practicing. If you want to hear the part you're typing again, just press the Play button. If you don't understand a word, no worries! Just click on the Hint button, and Hocify will help you out.

Now, you might be wondering, "Why use Hocify?" Well, imagine when you were young and learning how to spell in your own language. It's kind of like that, but for English! By transcribing what you hear, you not only train your ears to catch difficult words, but you also learn how to write those words correctly.

You might be thinking, "Transcribing English is hard and takes so much time!" I get it. Normally, you'd have to download audio, use a special program to listen and replay, and then check if you wrote everything correctly. It can be exhausting! But with Hocify, you don't need any fancy stuff. Just find a text you like, copy, and paste it. Hocify will help you transcribe with a standard American accent right away.

Oh, and one more thing! Make sure to use Hocify with Microsoft Edge on Windows, Mac, or Linux for the best experience.

Using Hocify to transcribe doesn't just improve your listening, but it also helps with your pronunciation. It's like hitting two birds with one stone! You'll become a pro in understanding and speaking English in no time. Unlike passive listening methods, active listening through transcribing helps you truly understand how a word is pronounced and spelled.

Hocify makes the whole learning process smooth and enjoyable, just like playing a game without any pressure. Give Hocify a try! You won't regret it. Have fun learning and improving your listening skills with Hocify!

Click here to start transcribing in English with Hocify: https://www.hocify.com/transcribe