Chuyển tới nội dung chính
Trịnh Thị Mai
Đã hoàn thành

Mai Portfolio — Hồ sơ nghề nghiệp & Freelance Hub

Một hệ thống portfolio song ngữ và hành trình freelance được phát triển như một sản phẩm thực tế, với website Next.js dùng CMS PostgreSQL và ứng dụng Flutter đồng hành vẫn vận hành trên luồng dữ liệu Apps Script/Google Sheets.

Vai trò
Solo developer — product, architecture, backend, web & mobile
Nền tảng
Web
Thời gian
2026

Tổng quan dự án

Lĩnh vực
Portfolio kỹ thuật cá nhân — một hệ thống công khai để trình bày trung thực công việc chuyên môn, freelance và cá nhân, được xây dựng và duy trì bởi chính chủ nhân của nó.
Sản phẩm
Không chỉ là một CV tĩnh hay một trang portfolio, đây là một sản phẩm song ngữ để trình bày công việc nghề nghiệp, dự án freelance và sản phẩm cá nhân theo dữ liệu có cấu trúc. Website Next.js hiện sử dụng PostgreSQL làm nguồn CMS chính và có khu vực Admin được xác thực để quản lý nội dung. Ứng dụng Flutter đồng hành vẫn sử dụng API Apps Script/Google Sheets hiện có; việc chuyển mobile sang nguồn dữ liệu dựa trên PostgreSQL là một bước riêng chưa bắt đầu. Apps Script cũng vẫn tham gia luồng tiếp nhận Review, trong khi việc kiểm duyệt, xác nhận consent và xuất bản Review trên website được quản lý riêng trong hệ thống web.
Người dùng
Các khách hàng và nhà tuyển dụng tiềm năng muốn hiểu tôi thực sự đã làm gì và cách tôi tiếp cận việc bàn giao — và với bất kỳ ai tò mò về chính hệ thống này, đây là một case study thực tế cho cùng những thói quen kỹ thuật được mô tả ở những nơi khác trong portfolio này.
Lý do ra đời
Một CV tĩnh hay một trang portfolio đơn giản có thể liệt kê những gì tôi đã làm, nhưng không thể trung thực thể hiện trạng thái thực tế của một dự án freelance đang triển khai, phân biệt một đề xuất với công việc đã bàn giao, hay tách bạch điều gì công khai được với điều gì cần giữ bảo mật theo từng khách hàng. Một CV là một bức ảnh chụp nhanh; hệ thống này cần là một sản phẩm được duy trì, có cấu trúc.
Vấn đề
Gom công việc chuyên môn, các dự án freelance và sản phẩm cá nhân vào một nơi trình bày công khai trung thực, có cấu trúc, song ngữ — một nơi có thể thể hiện trạng thái thực tế của một dự án (đang thực hiện, tạm dừng, chỉ mới đề xuất, đã hoàn thành) mà không bao giờ ngụ ý nhiều chắc chắn hay tiến độ hơn những gì đã được xác nhận thực sự, đồng thời giữ những chi tiết mang tính thương mại hoặc cá nhân ở chế độ riêng tư ngay từ cấu trúc hệ thống, chứ không chỉ dựa vào quy ước.

Vai trò & đóng góp của tôi

Tôi xây dựng hệ thống theo từng giai đoạn: định hình kiến trúc và hợp đồng dữ liệu; triển khai backend Apps Script/Sheets ban đầu; xây website Next.js và ứng dụng đồng hành Flutter; thay dữ liệu mẫu bằng các dự án thực tế; bổ sung tiến độ, cột mốc và luồng Reviews; sau đó chuyển nguồn dữ liệu chính của web sang PostgreSQL và xây khu vực Admin để quản lý nội dung trực tiếp. Giai đoạn gần đây tập trung vào an toàn vận hành: tách môi trường development/production, bảo vệ thao tác ghi dữ liệu, bổ sung CI, kiểm soát deploy, và siết quy trình consent trước khi một Review có thể xuất hiện công khai.

Thách thức & giải pháp

  1. Thách thức kỹ thuật

    Ba thách thức chính định hình dự án. Thứ nhất là thay đổi nguồn dữ liệu mà không làm mất tính nhất quán: hệ thống bắt đầu với Google Sheets/Apps Script vì nhẹ và nhanh, nhưng khi nhu cầu quản trị, kiểm duyệt và an toàn dữ liệu tăng lên, website được chuyển sang PostgreSQL làm nguồn dữ liệu chính. Thứ hai là giữ cùng một mô hình nội dung cho hai client có kiến trúc khác nhau — Next.js trên web và Flutter trên mobile — mà không để logic nghiệp vụ bị sao chép rồi âm thầm lệch nhau. Thứ ba là biến tính trung thực và quyền riêng tư thành quy tắc của hệ thống: trạng thái dự án phải phản ánh đúng thực tế, thông tin khách hàng mặc định được ẩn khi chưa có quyền công khai, tiến độ ước lượng phải được ghi rõ là ước lượng, và Review chỉ được xuất bản khi trạng thái, visibility và consent đều hợp lệ.

    Cách tôi tiếp cận

    Kiến trúc được tách theo lớp dữ liệu để mỗi client có thể phát triển và kiểm thử độc lập, đồng thời giữ cùng hợp đồng dữ liệu công khai. Website Next.js hiện đọc nội dung từ PostgreSQL qua transport/repository riêng và quản lý thay đổi qua khu vực Admin được xác thực; môi trường local và preview được ngăn kết nối nhầm tới cơ sở dữ liệu production. Flutter vẫn dùng transport HTTP tới Apps Script/Google Sheets, và cả hai client đều có thể chạy với dữ liệu mẫu trong quá trình phát triển. Review được tách rõ giữa tiếp nhận và xuất bản: Google Form/Apps Script tiếp nhận dữ liệu ở trạng thái chờ, còn website chỉ công khai Review sau bước kiểm duyệt và xác nhận consent trong Admin. Cách tổ chức này phản ánh quá trình hệ thống phát triển từ kiến trúc Sheets/Apps Script ban đầu sang CMS PostgreSQL cho web mà không giả định mobile đã được migrate hoặc hai nguồn dữ liệu đang tự đồng bộ.

    Kết quả tác động

    Hệ thống hiện quản lý 15 dự án thực tế thuộc các nhóm chuyên môn, freelance và cá nhân. Nội dung công khai được lấy từ dữ liệu dự án thật, không dùng dự án hư cấu để lấp đầy portfolio; ngay cả case study của chính portfolio này cũng phải tuân theo cùng các quy tắc về trạng thái, quyền riêng tư và mức độ thông tin được phép công khai.

Kiến trúc & công nghệ

Web: Next.js (App Router) + React + TypeScript, render phía server, next-intl cho định tuyến song ngữ và PostgreSQL/Neon làm nguồn dữ liệu CMS chính. Lớp dữ liệu được tách qua repository/transport để việc đọc công khai và thao tác Admin có ranh giới rõ ràng; các migration được quản lý có kiểm soát và thao tác production có guard riêng. Mobile: Flutter + Dart, Riverpod, go_router và Dio theo Clean Architecture thực dụng (domain/data/presentation). Hệ thống còn có luồng Reviews với kiểm duyệt và consent trước khi xuất bản, CI cho web/migration tooling, kiểm soát deploy Vercel, cùng các bộ kiểm thử tự động để giữ hành vi nhất quán khi dữ liệu và kiến trúc tiếp tục thay đổi.

Công nghệ

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Google Apps Script
  • Google Sheets
  • Flutter
  • Dart
  • Riverpod
  • go_router
  • Dio
  • Vitest
  • Testing Library
  • flutter_test

Dự án này thể hiện

Dự án này cố tình không được trình bày như một minh chứng cho trình độ chuyên sâu ở mọi công nghệ mà nó chạm tới — mục tiêu chưa bao giờ là khẳng định trình độ cấp cao đồng thời ở cả web, backend và mobile. Điều nó thể hiện là cùng một thói quen được mô tả xuyên suốt portfolio này: hiểu rõ hình dạng thực sự của một vấn đề trước khi xây dựng, chọn công cụ đơn giản/phù hợp thay vì công cụ gây ấn tượng (Sheets thay vì cơ sở dữ liệu, một hợp đồng API dùng chung thay vì mã nguồn dùng chung), và xem tính trung thực là điều hệ thống thực thi về mặt cấu trúc, chứ không phải điều cần nhớ để làm thủ công.

  • Phát triển Web
  • Phát triển Backend
  • Phát triển Android
  • Tích hợp bên thứ ba
  • Tự động hóa
  • Kiểm thử chất lượng
  • Phân tích yêu cầu

Tiến độ hiện tại

  1. Kiến trúc sản phẩm & nội dung

    Hoàn thành
  2. Hệ thống quản lý nội dung

    Hoàn thành
  3. Trải nghiệm Portfolio

    Hoàn thành
  4. Nội dung dự án thực tế

    Hoàn thành
  5. Theo dõi tiến độ & cột mốc

    Hoàn thành
  6. Hệ thống đánh giá

    Hoàn thành
  7. Ứng dụng đồng hành trên mobile

    Hoàn thành
  8. Hoàn thiện & sẵn sàng vận hành

    Hoàn thành

Bạn có dự án tương tự?

Chia sẻ sản phẩm hoặc vấn đề bạn đang gặp. Tôi sẽ trao đổi để tìm hướng hỗ trợ phù hợp.

Làm việc cùng tôi