Từ Những Dòng Code Đầu Tiên Đến Dự Án Hoàn Thiện

Mở đầu

Blog cá nhân này không chỉ là một dự án mà còn là câu chuyện phát triển kỹ năng của tôi – từ một lập trình viên mới ra trường đến khi có thể public bài viết đầu tiên. Đó là hành trình của những lần thử nghiệm, thay đổi và hoàn thiện, với từng công nghệ được chọn lựa cẩn thận để mang lại hiệu quả tốt nhất.

Bước Khởi Đầu: Một Frontend Developer Mới Ra Trường

Khi nhận công việc đầu tiên sau khi tốt nghiệp, tôi bắt đầu với nền tảng cơ bản về Next.js – một công cụ mạnh mẽ cho frontend. Tôi quyết định tạo blog cá nhân này để thực hành kỹ năng, thử nghiệm công nghệ mới, và quan trọng nhất là khám phá giới hạn bản thân.

Phiên bản đầu tiên của blog đơn giản chỉ là một giao diện tĩnh sử dụng Material UI, nhưng đó là nơi tôi học được những bài học đầu tiên:

• Hiểu cách xây dựng UI cơ bản.

• Tập trung vào tối ưu hóa SEO và hiệu suất.

• Khám phá cảm giác hoàn thành một dự án cá nhân.

✨ Bài học rút ra: Hãy bắt đầu từ những thứ đơn giản nhất. Dự án cá nhân là nơi bạn không ngại sai và luôn có cơ hội để sửa.

Quá Trình Cải Tiến: Thử Nghiệm Và Học Hỏi

Blog này đã trải qua nhiều lần thay đổi công nghệ để đáp ứng nhu cầu mới:

1. Từ Material UI đến TailwindCSS

Ban đầu, tôi chọn Material UI vì nó cung cấp các thành phần giao diện mạnh mẽ. Nhưng càng làm, tôi càng thấy giao diện bị giới hạn và khó tùy chỉnh. Sau đó, tôi chuyển sang TailwindCSS, nơi mọi thứ trở nên đơn giản và linh hoạt hơn.

• TailwindCSS giúp giao diện của blog nhẹ hơn, độc đáo hơn, và dễ bảo trì hơn.

• Code CSS ngắn gọn, tối ưu hóa hiệu suất tải trang.

• Dễ dàng custom theme hoặc color palette cho dự án

2. Từ NextAuth đến Passport

Ban đầu, tôi dùng NextAuth để xử lý xác thực ngay trong Next.js, nhưng khi blog mở rộng, tôi nhận ra cần một giải pháp đồng nhất hơn. Vì vậy, tôi chuyển sang Passport.js với NestJS ở backend:

• NextAuth phù hợp cho dự án nhỏ, nhưng Passport.js cung cấp sự kiểm soát và linh hoạt cho hệ thống xác thực phức tạp.

• Mọi logic backend trở nên rõ ràng và dễ dàng mở rộng.

3. Từ Frontend đến Fullstack

Lúc bắt đầu, tôi chỉ làm frontend, nhưng để thêm tính năng như quản lý bài viết và người dùng, tôi bắt đầu học backend. NestJS trở thành lựa chọn hoàn hảo nhờ cấu trúc rõ ràng và hỗ trợ TypeScript.

Tech Stack Cuối Cùng: Sự Kết Hợp Hiện Đại Và Hiệu Quả

Sau nhiều lần cải tiến, đây là bộ tech stack cuối cùng mà tôi sử dụng:

Frontend:

• Next.js(app router): Tối ưu SEO và hiệu suất rendering.

• TailwindCSS: Tạo giao diện hiện đại, linh hoạt và nhanh gọn.

• React Icons: Thêm điểm nhấn sống động cho giao diện.

Backend:

• NestJS: Quản lý API và logic backend hiệu quả.

• PostgreSQL: Lưu trữ dữ liệu an toàn, ổn định.

• Redis: Caching tăng tốc API và giảm tải database.

• MinIO: Lưu trữ file và ảnh, thay thế AWS S3.

Hosting & Deployment:

• VPS + Nginx: Đảm bảo blog hoạt động ổn định, bảo mật.

• GitLab CI/CD: Tự động hóa kiểm tra và triển khai.

• Docker + Docker Compose: Quản lý môi trường phát triển và production nhất quán.

Another:

• tiptap: tạo ra những content thú vị.

Public Bài Viết Đầu Tiên: Cảm Giác Thành Tựu

Khi blog đã hoàn thiện các tính năng cơ bản, tôi public bài viết đầu tiên – chia sẻ kinh nghiệm học Next.js. Đó là một cột mốc quan trọng, đánh dấu hành trình từ một lập trình viên non trẻ đến một người tự tin triển khai dự án fullstack của riêng mình.

Bài Học Và Cảm Nhận

1. Đừng ngại thay đổi: Chọn công nghệ phù hợp với hiện tại, nhưng luôn sẵn sàng cải tiến khi nhu cầu thay đổi.

2. Kiên nhẫn với hành trình: Dự án cá nhân không chỉ là kết quả, mà còn là bài học quý giá trên đường đi.

3. Không ngừng học hỏi: Mỗi lần thử nghiệm là một cơ hội để phát triển kỹ năng.

Lời Kết

• Blog này không chỉ là một nền tảng chia sẻ mà còn là minh chứng cho sự trưởng thành trong nghề nghiệp của tôi. Nếu bạn cũng đang ấp ủ một dự án cá nhân, hãy bắt đầu ngay! Hành trình đó sẽ giúp bạn khám phá tiềm năng của chính mình. 😊

• Bạn nghĩ sao về hành trình này? Hãy chia sẻ câu chuyện của bạn với tôi nhé!