10 Pet Project Để Practice Full-Stack Web Development

Đến một lúc nào đó, mọi developer đều cảm thấy tutorial trở nên nhạt nhẽo. Bạn đã follow along, build xong cái to-do app, thậm chí deploy nó rồi. Nhưng khi ai đó hỏi "bạn đã build gì?" — cái to-do app không thực sự gây ấn tượng được.

Gap giữa việc follow tutorial và skill development thật sự chỉ được lấp đầy bằng một thứ: build project mà buộc bạn phải giải quyết problem thực tế.

Không phải toy project. Không phải clone rồi bỏ dở sau khi làm xong landing page. Mà là những project challenge bạn across full stack — frontend, backend, database, authentication, deployment — và cho bạn thứ gì đó đáng để khoe trong interview hoặc show cho client.

Đây là 10 pet project, sắp xếp từ dễ đến khó. Mỗi cái nhắm vào những skill và technology cụ thể. Chọn cái nào khiến bạn hào hứng, rồi build nó cho xong.

---

Cách Tận Dụng Tối Đa Những Project Này

Trước khi nhảy vào danh sách, đây là cách approach để thực sự build được skill:

1. Đừng follow tutorial step-by-step. Dùng documentation, Stack Overflow, và AI tools — nhưng tự mình đưa ra architectural decision.
2. Deploy mọi project. Project chỉ chạy trên localhost không tính. Dùng Vercel, Railway, Fly.io, hoặc VPS.
3. Viết ít nhất basic test. Dù chỉ vài integration test cũng dạy bạn nhiều hơn là skip testing hoàn toàn.
4. Dùng version control đúng cách. Branch, meaningful commit, pull request (dù là tự PR cho mình). Đây là habit, không phải feature.
5. Document những gì bạn học được. Một README ngắn giải thích decision và trade-off của bạn ấn tượng hơn nhiều so với UI bóng bẩy.

---

Project 1: URL Shortener

Difficulty: ⭐ Beginner-friendly

Bạn sẽ build gì: Một service mà user paste URL dài vào và nhận lại URL ngắn. Click vào URL ngắn sẽ redirect về URL gốc.

Skill được practice:

✅ REST API design (POST để tạo, GET để redirect)
✅ Database modeling (bảng URLs với short code, original URL, click count, expiration)
✅ Unique ID generation (nanoid, base62 encoding, hoặc hash-based)
✅ Redirect handling (301 vs 302 và tại sao nó quan trọng)
✅ Basic analytics (click tracking, referrer logging)

Stack gợi ý: Next.js hoặc React + Express/Hono, PostgreSQL, Redis để cache hot URL

Challenge chính:

• Làm sao generate short code mà unique và chống collision?
• Làm sao handle link hết hạn?
• Làm sao ngăn abuse (rate limiting, spam detection)?

Stretch goal:

• Custom short code (ví dụ sho.rt/my-resume)
• QR code generation cho mỗi short link
• Dashboard hiển thị click analytics với chart
• Link expiration với configurable TTL

---

Project 2: Personal Finance Tracker

Difficulty: ⭐⭐ Intermediate

Bạn sẽ build gì: App theo dõi thu nhập và chi tiêu, phân loại transaction, và visualize spending pattern theo thời gian.

Skill được practice:

✅ CRUD operation với complex filtering và sorting
✅ User authentication và data isolation (mỗi user chỉ thấy data của mình)
✅ Date handling và timezone-aware query
✅ Data visualization (chart, graph, trend)
✅ Form validation ở cả client và server

Stack gợi ý: React/Next.js, Node.js + Express hoặc Hono, PostgreSQL, Chart.js hoặc Recharts

Challenge chính:

• Model category và subcategory như thế nào? (Flat list vs. tree structure)
• Handle recurring transaction ra sao? (Cron job vs. materialized entry)
• Tính running balance sao cho hiệu quả?

Stretch goal:

• Import CSV/bank statement
• Đặt budget với alert khi sắp chạm limit
• Multi-currency support với exchange rate conversion
• Report tháng/năm export thành PDF

---

Project 3: Markdown Blog Engine

Difficulty: ⭐⭐ Intermediate

Bạn sẽ build gì: Một blog platform mà author viết post bằng Markdown, có live preview editor, tagging, và public-facing blog.

Skill được practice:

✅ Markdown parsing và rendering (MDX, remark/rehype pipeline)
✅ Rich text editing experience (live preview, syntax highlighting)
✅ SEO implementation (meta tag, Open Graph image, sitemap)
✅ Static generation vs. server-side rendering trade-off
✅ File upload handling (image trong post)

Stack gợi ý: Next.js với MDX, PostgreSQL hoặc file-based storage, Cloudinary hoặc S3 cho image

Challenge chính:

• Live preview mà không lag (debouncing, virtual DOM diffing)
• Image upload và optimization pipeline
• Draft vs. published state management
• SEO-friendly URL và metadata

Stretch goal:

• Multi-author support với role (admin, editor, author)
• Comment system (tự build, không dùng Disqus)
• RSS feed generation
• Full-text search across tất cả post
• Newsletter subscription integration

Đây chính là project mà mình dùng để build blog này. Nó dạy mình về Next.js, MDX rendering, và deployment nhiều hơn bất kỳ course nào.

---

Project 4: Real-Time Chat Application

Difficulty: ⭐⭐⭐ Intermediate-Advanced

Bạn sẽ build gì: Một messaging app với real-time message delivery, nhiều chat room, và online presence indicator.

Skill được practice:

✅ WebSocket implementation (Socket.io hoặc native WebSocket)
✅ Real-time state synchronization giữa các client
✅ User authentication và session management
✅ Message persistence và history loading
✅ Online/offline presence detection

Stack gợi ý: React + Socket.io, Node.js/Express, PostgreSQL + Redis (cho pub/sub và presence)

Challenge chính:

• Handle message ordering khi network không ổn định?
• Scale WebSocket across nhiều server instance? (Redis pub/sub)
• Load message history sao cho hiệu quả? (Cursor-based pagination)
• Handle reconnection một cách graceful?

Stretch goal:

• Chia sẻ file và image
• Message reaction (emoji)
• Typing indicator
• Read receipt
• End-to-end encryption (dùng Web Crypto API)

---

Project 5: Job Board / Listing Platform

Difficulty: ⭐⭐⭐ Intermediate-Advanced

Bạn sẽ build gì: Một platform mà employer đăng job listing và job seeker có thể search, filter, và apply.

Skill được practice:

✅ Search và filtering với nhiều criteria (location, salary, tag)
✅ Role-based access control (employer vs. job seeker vs. admin)
✅ Email notification (new job alert, application confirmation)
✅ File upload (resume, company logo)
✅ Pagination và performance optimization cho large dataset

Stack gợi ý: Next.js, PostgreSQL với full-text search, Redis cho caching, Resend cho email

Challenge chính:

• Build efficient full-text search mà không cần Elasticsearch? (PostgreSQL tsvector)
• Handle resume file upload sao cho secure?
• Implement saved search với email alert?
• Ngăn chặn spam job posting?

Stretch goal:

• Applicant tracking system (ATS) cho employer
• Salary range visualization và market comparison
• Company profile với review
• Application status tracking cho job seeker
• Admin dashboard với moderation tool

---

Project 6: E-Commerce Store

Difficulty: ⭐⭐⭐ Intermediate-Advanced

Bạn sẽ build gì: Một online store hoàn chỉnh với product catalog, shopping cart, checkout flow, và order management.

Skill được practice:

✅ Shopping cart state management (server-side vs. client-side vs. hybrid)
✅ Payment integration (Stripe Checkout hoặc Payment Intent)
✅ Inventory management và race condition
✅ Order lifecycle (pending → paid → shipped → delivered)
✅ Admin panel cho product và order management

Stack gợi ý: Next.js, PostgreSQL, Stripe, S3 cho product image, Redis cho cart session

Challenge chính:

• Ngăn overselling khi hai user mua item cuối cùng cùng lúc? (Optimistic locking, database transaction)
• Handle payment failure và retry? (Webhook-based confirmation)
• Tính shipping cost và tax?
• Cart persistence — chuyện gì xảy ra khi user đóng browser?

Stretch goal:

• Product variant (size, color) với inventory per variant
• Discount code và promotional pricing
• Product review và rating
• Wishlist functionality
• Order tracking với email notification ở mỗi stage

---

Project 7: Project Management Tool

Difficulty: ⭐⭐⭐⭐ Advanced

Bạn sẽ build gì: Một tool kiểu Trello/Jira mà team có thể tạo project, thêm task, assign member, và track progress bằng Kanban board.

Skill được practice:

✅ Drag-and-drop UI (React DnD hoặc dnd-kit)
✅ Real-time collaboration (WebSocket cho live board update)
✅ Complex data modeling (project → board → column → card → comment)
✅ Team/organization management với invitation
✅ Activity logging và audit trail

Stack gợi ý: Next.js, PostgreSQL, Socket.io, dnd-kit, Redis

Challenge chính:

• Handle concurrent card move mà không bị conflict?
• Model position/ordering của card trong column sao cho hiệu quả?
• Implement activity feed mà capture mọi thay đổi?
• Handle permission ở level project, board, và card?

Stretch goal:

• Markdown support trong card description
• File attachment trên card
• Due date reminder và calendar view
• Filter và search across tất cả card
• Gantt chart view cho timeline planning

---

Project 8: API Gateway / Developer Portal

Difficulty: ⭐⭐⭐⭐ Advanced

Bạn sẽ build gì: Một platform mà developer có thể register, lấy API key, gửi request qua gateway, và xem usage analytics.

Skill được practice:

✅ API key management (generation, rotation, revocation)
✅ Rate limiting và throttling (token bucket, sliding window)
✅ Request proxying và transformation
✅ Usage metering và analytics dashboard
✅ Developer documentation và API explorer

Stack gợi ý: Node.js/Go cho gateway, React cho portal, PostgreSQL, Redis cho rate limiting, ClickHouse hoặc TimescaleDB cho analytics

Challenge chính:

• Implement rate limiting sao cho fair và performant? (Redis + Lua script)
• Proxy request với minimal latency overhead?
• Aggregate usage data mà không overwhelm database?
• Handle API versioning?

Stretch goal:

• Nhiều pricing tier với rate limit khác nhau
• Webhook delivery với retry logic
• API mocking cho development/testing
• SDK generation từ OpenAPI spec
• Health monitoring và uptime tracking

---

Project 9: Social Media Platform (Simplified)

Difficulty: ⭐⭐⭐⭐ Advanced

Bạn sẽ build gì: Một social platform đơn giản hóa với user profile, post, follow, like, và feed algorithm.

Skill được practice:

✅ Social graph modeling (follower, following, mutual connection)
✅ Feed generation algorithm (chronological vs. ranked)
✅ Media upload và processing (image resizing, compression)
✅ Notification system (in-app, email, push)
✅ Content moderation và reporting

Stack gợi ý: Next.js, PostgreSQL, Redis, S3 + image processing (Sharp), WebSocket cho notification

Challenge chính:

• Generate feed hiệu quả cho user follow hàng nghìn account? (Fan-out on write vs. fan-out on read)
• Handle media upload mà không block API? (Background job, pre-signed URL)
• Implement infinite scroll với consistent pagination?
• Ngăn chặn toxic content? (Basic content filtering, report system)

Stretch goal:

• Hashtag system với trending topic
• Direct messaging giữa user
• Story/temporary post tự hết hạn
• Content recommendation engine
• Account verification và trust system

---

Project 10: Multi-Tenant SaaS Platform

Difficulty: ⭐⭐⭐⭐⭐ Expert

Bạn sẽ build gì: Một B2B SaaS application mà organization đăng ký, mời team member, và sử dụng shared service với data isolation giữa các tenant.

Skill được practice:

✅ Multi-tenancy architecture (shared database với tenant isolation vs. separate schema)
✅ Subscription billing (Stripe subscription, plan management, usage-based pricing)
✅ Organization management (invitation, role, SSO)
✅ Feature flag và plan-based feature gating
✅ Production-grade infrastructure (CI/CD, monitoring, logging)

Stack gợi ý: Next.js, PostgreSQL với Row-Level Security, Stripe Billing, Redis, Docker, GitHub Actions

Challenge chính:

• Isolate tenant data trong shared database? (Row-Level Security, tenant_id trên mọi table)
• Handle plan upgrade/downgrade giữa billing cycle?
• Implement SSO với SAML/OIDC cho enterprise customer?
• Manage database migration across tất cả tenant?

Stretch goal:

• Custom domain support per tenant
• Audit logging cho compliance
• Data export (GDPR compliance)
• Admin super-panel để manage tất cả tenant
• Usage-based billing với metering

---

Chọn Project Nào Phù Hợp Với Bạn

Không biết bắt đầu từ đâu? Đây là decision framework:

Quy tắc quan trọng nhất: chọn MỘT project và hoàn thành nó. Một URL shortener hoàn chỉnh dạy bạn nhiều hơn ba cái e-commerce store bỏ dở.

---

Điều Gì Khiến Pet Project Đáng Để Đưa Vào Portfolio

Build project chỉ là một nửa cuộc chiến. Đây là những thứ phân biệt pet project tầm thường với pet project thực sự gây ấn tượng:

1. Đã Deploy và Truy Cập Được

Một live URL luôn ấn tượng hơn GitHub repo. Dù chỉ trên free tier, hãy deploy nó. Vercel, Railway, Fly.io — chọn một cái và ship.

2. README Kể Một Câu Chuyện

Đừng chỉ liệt kê technology. Hãy giải thích:

• Tại sao bạn chọn stack này (và alternative nào bạn đã cân nhắc)
• Problem khó nhất bạn đã solve là gì
• Nếu làm lại bạn sẽ làm khác gì
• Architectural decision và trade-off

3. Handle Edge Case

Ai cũng build được happy path. Chuyện gì xảy ra khi:

• User submit form trống?
• Database connection bị mất?
• Hai user làm cùng một thứ cùng lúc?
• API trả về error?

Handle những thứ này cho thấy bạn think như professional, không phải tutorial-follower.

4. Có Test

Không cần 100% coverage. Nhưng có test cho critical path — authentication, payment, data integrity — cho thấy bạn care về quality.

5. Code Sạch

Không cần perfect. Sạch là được. Meaningful variable name, consistent pattern, không có commented-out code block, file organization hợp lý.

---

Tổng Kết

✅ Pet project lấp đầy gap giữa tutorial và skill development thật sự
✅ Bắt đầu với thứ phù hợp level hiện tại — đừng nhảy thẳng vào Project 10 ngày đầu tiên
✅ Deploy mọi thứ — project trên localhost không tính
✅ Focus vào việc hoàn thành MỘT project thay vì bắt đầu năm cái
✅ Biến project thành portfolio-worthy với test, documentation, và edge case handling

Những developer giỏi nhất mà mình biết đều có một nghĩa trang side project bỏ dở. Nhưng họ cũng đều có ít nhất một hai cái mà họ đã hoàn thành, deploy, và học sâu từ đó.

Project tiếp theo của bạn không cần phải revolutionary. Nó chỉ cần được hoàn thành.

Giờ thì chọn một project từ danh sách này và bắt đầu build đi.