Kho repo duoc binh chon

Tất cả API free dùng để test rất đáng dùng

UI. HeroUI (previously NextUI) is a production-ready React component library that combines the accessibility rigor of React Aria with the utility-first styling of Tailwind CSS v4. It ships a clean compound component API (Card.Header, Card.Content, Select.Item, …), requires no <Provider> wrapper, and works out of the box with React 19 and Next.js.

## Frontend portfolio ca nhan

Next.js 14 + Tailwind + framer-motion. Trang chinh:

• Home - landing voi hero animation
• /repos - GitHub Repo Hub (trang dang xem)
• /shop - e-commerce demo
• /dashboard - personal dashboard voi task tracking + AI

### Diem nhan ky thuat

• Server component cho SSR - tang SEO + first paint
• Client component cho interactive - chat, dashboard
• Middleware auth check - khong phai check o tung page

Cai hay nhat la tach biet server/client component ro rang - ban dau toi hay mix, dan den hydration mismatch rat kho debug.

## Utility-first CSS framework

TailwindCSS thay doi cach toi viet CSS. Tu ghet den yeu trong 1 tuan.

### Tai sao tot

• Khong phai dat ten class - flex items-center gap-4 la du
• Design system thong nhat - scale 4, 8, 12, 16... khong bi lan
• JIT mode - chi render class su dung, bundle nho
• Responsive prefix - md:flex lg:grid cuc ky de

### Khi nao KHONG nen dung

• Team khong quen utility class (giao tiep kho)
• Project rat nho (< 5 page) - CSS thuan la du
• Can customize CSS output (Tailwind generate nhieu class du)

Neu bi nang, thu cai dat 1 ngay voi 1 component. Se hieu.

## ORM toi yeu thich nhat

Prisma la type-safe ORM cho Node.js. Diem manh:

• Schema-driven - mot file schema.prisma lam source of truth
• Auto-generated types - khong can viet type cho model
• Migration tool - tu generate SQL
• Studio UI - xem/sua data truc quan

### So sanh voi TypeORM/Sequelize

Prisma nhanh hon nhieu ve DX, dac biet voi complex relation. Nhuoc diem la query engine binary lam Docker image lon hon.

### Tip quan trong

Su dung select va include ro rang de tranh N+1. Luon bat query log trong dev de thay SQL dang chay.

## Framework toi dung hang ngay

Next.js la framework React production. Toi khong contribute code vao day (chua du level), nhung hoc duoc rat nhieu qua viec doc source:

### Pattern hay

• App Router - nested layout, server component, streaming
• Turbopack - Rust-based bundler, sieu nhanh
• Image optimization - tu dong gen srcset, lazy load

### Tai sao no tot cho production

• ISR (Incremental Static Regeneration) cho content it doi
• SSR cho SEO-critical pages
• API routes de viet backend mini
• Middleware cho auth/redirect/A/B test

Neu moi bat dau voi React, hoc Next.js luon thay vi CRA.

## Mot du an production-ready

Day la monorepo backend chinh cua website portfolio + e-commerce cua toi. Tech stack gom co:

• NestJS + Express + TypeScript
• Prisma + PostgreSQL
• Redis cho cache + rate-limit
• WebSocket cho messaging thoi gian thuc
• Docker Compose de deploy

### Bai hoc rut ra

• Rate limit nen dat o Nginx + app - khong chi o mot cho. Dat ca hai giup giam tai cho backend.
• Tach service + controller - service chua business logic thuan, controller chi parse request. De test hon rat nhieu.
• Prisma transaction quan trong - mot so flow (tao repo + tag join) can transaction de tranh race condition.

Repo nay dang chay tren VPS that va xu ly traffic that, khong phai demo.