nguyenkhangdev
Xây dựng trang cá nhân nguyenkhangdev: Portfolio + Blog + Admin Dashboard

Xây dựng trang cá nhân nguyenkhangdev: Portfolio + Blog + Admin Dashboard

16 views
ProjectsTechnology

Sau một thời gian sử dụng các nền tảng blog và portfolio rời rạc, mình nhận ra việc quản lý nội dung khá bất tiện và thiếu sự đồng bộ. Vì vậy, mình quyết định xây dựng một hệ thống riêng, kết hợp portfolio + blog + dashboard quản trị trong cùng một ứng dụng.

1. Tổng quan

1.1. Website gồm những gì

  • Portfolio: Giới thiệu bản thân, kỹ năng, kinh nghiệm và dự án
  • Blog: Nơi mình viết và chia sẻ kiến thức
  • Dashboard: Hệ thống quản trị nội dung cho blog

1.2.Đối tượng sử dụng

  • Người dùng: Xem portfolio và đọc blog
  • Admin (mình): Quản lý toàn bộ nội dung thông qua dashboard

2. Chi tiết

2.1. Trang portfolio

Trang này hoạt động như một CV online, bao gồm:

  • Thông tin cá nhân
  • Kỹ năng
  • Kinh nghiệm làm việc
  • Dự án đã thực hiện

2.2. Trang blog

2.2.1. Danh sách bài viết

Hiển thị tất cả bài viết và phân loại theo chủ đề.

2.2.2. Chi tiết bài viết

Nội dung bài viết đầy đủ, hỗ trợ rich text.

2.2.3. Bình luận

Người dùng có thể tương tác và để lại bình luận.

2.3. Dashboard

2.3.1. Tổng quan

Thống kê nhanh về bài viết, người dùng, bình luận.

2.3.2. Quản lý bài viết

CRUD: tạo mới, xem, chỉnh sửa, khóa, xóa bài viết.

2.3.3. Quản lý chủ đề

CRUD các chủ đề để phân loại bài viết.

2.3.4. Quản lý bình luận

Khóa hoặc xóa bình luận không phù hợp.

2.3.5. Quản lý người dùng

Khóa hoặc xóa tài khoản người dùng.

3. Công nghệ (tech stack)

  • Frontend / Fullstack: Next.js
  • UI: TailwindCSS, shadcn/ui
  • Backend & Database: Supabase
  • Editor: TinyMCE
  • Authentication: JWT
  • Deploy: Vercel
  • Domain: tenten.vn

4. Những vấn đề gặp phải

Đây là phiên bản thứ n của dự án sau nhiều lần thử nghiệm và thay đổi công nghệ.

Trước đó mình từng triển khai theo hướng tách frontend và backend thành 2 server riêng, nhưng cách này không tối ưu về tốc độ tải và triển khai.

Ở phiên bản này, mình chọn:

  • Next.js vì hỗ trợ SSR, giúp cải thiện SEO cho blog và tối ưu trải nghiệm người dùng.
  • Supabase để thay thế backend truyền thống, cung cấp sẵn database, authentication và storage.

Cách tiếp cận này giúp:

  • Đơn giản hóa kiến trúc hệ thống
  • Dễ deploy trên Vercel
  • Giảm đáng kể công sức quản lý backend

5. Hướng phát triển

Sau nhiều lần cải tiến, hiện tại hệ thống đã tương đối ổn định với các chức năng cơ bản.

Trong thời gian tới, mình sẽ:

  • Vận hành thực tế
  • Theo dõi trải nghiệm sử dụng
  • Tiếp tục cải tiến nếu cần thiết

6. Kết luận

Đây là một dự án mình đã đầu tư và cải tiến qua nhiều phiên bản. Không chỉ giúp mình luyện tập kỹ năng lập trình, mà còn là nơi để mình chia sẻ kiến thức và xây dựng portfolio cá nhân.

Nếu bạn có góp ý hoặc ý tưởng cải thiện, mình rất sẵn lòng lắng nghe.


Comments (0)

Please log in to leave a comment.