Nhật ký phát triển Habit Tracker – Các giai đoạn 2-4

(Thực sự, tôi không thể chờ đợi—tôi đã nhảy qua ba giai đoạn cùng một lúc 😅)

Giới thiệu

Trong bài viết này, tôi sẽ chia sẻ hành trình phát triển ứng dụng Habit Tracker của mình trong các giai đoạn 2 đến 4. Chúng ta sẽ cùng nhau khám phá cách thiết lập Monorepo, thiết kế giao diện người dùng và triển khai frontend cho ứng dụng. Mục tiêu của tôi là tạo ra một ứng dụng quản lý thói quen dễ sử dụng và trực quan.

Nội dung chính

Giai đoạn 2 – Thiết lập Repository

Để bắt đầu, tôi đã quyết định sử dụng cấu trúc Monorepo với các thư mục riêng biệt cho frontend và backend. Điều này giúp tôi dễ dàng quản lý mã nguồn và các phụ thuộc cho cả hai phần của ứng dụng. Ở đây là các bước tôi đã thực hiện:

• Cấu hình TypeScript để đảm bảo tính an toàn của kiểu dữ liệu.
• Cài đặt ESLint để giữ cho mã nguồn sạch sẽ và tuân thủ theo các quy tắc lập trình.
• Thiết lập các tệp môi trường và cấu hình cần thiết cho cả hai phần.

Giai đoạn 3 – Thiết kế Giao diện Người dùng

Tôi đã xây dựng một Hệ thống Thiết kế đầy đủ, bao gồm:

• Màu sắc: Chọn bảng màu phù hợp với thương hiệu và mục đích ứng dụng.
• Kiểu chữ: Chọn kiểu chữ dễ đọc và phù hợp với giao diện.
• Khoảng cách: Đảm bảo rằng các phần tử trên giao diện được bố trí hợp lý.

Kế hoạch kiến trúc thành phần và quản lý trạng thái cũng rất quan trọng trong giai đoạn này. Tôi đã tạo ra một bố cục đáp ứng với Header và Sidebar giúp người dùng dễ dàng điều hướng ứng dụng.

Giai đoạn 4 – Triển khai Frontend

Trong giai đoạn này, tôi đã phát triển các thành phần cơ bản cho ứng dụng:

• Button, Input, Card, Modal: Các thành phần này giúp người dùng tương tác với ứng dụng một cách dễ dàng.
• Tạo bốn trang chính: Home, Danh sách Thói quen, Thêm Thói quen, Theo dõi.
• Hỗ trợ chủ đề Tối/Sáng sử dụng next-themes để người dùng có thể tùy chọn giao diện.
• Hỗ trợ RTL cho ngôn ngữ tiếng Ba Tư, giúp ứng dụng tiếp cận với nhiều người dùng hơn.
• Thiết kế điều hướng với một drawer di động giúp việc điều hướng trên thiết bị di động trở nên thuận tiện hơn.

Thách thức

Trong quá trình phát triển, tôi đã gặp một số thách thức như:

• Thiết lập biến CSS để chuyển đổi chủ đề.
• Quản lý trạng thái cho drawer điều hướng trên di động.
• Điều chỉnh bố cục RTL cho văn bản tiếng Ba Tư.

Giải pháp

Để giải quyết những thách thức này, tôi đã áp dụng một số giải pháp hiệu quả:

• Kết hợp biến CSS với next-themes để dễ dàng quản lý chủ đề.
• Thiết kế theo hướng mobile-first nhằm tối ưu hóa trải nghiệm người dùng trên thiết bị di động.
• Quản lý sự kiện chính xác cho drawer để đảm bảo tính tương tác tốt nhất.

Mẹo Kỹ thuật

Tôi đã sử dụng Route Groups trong Next.js App Router để tổ chức bảng điều khiển một cách sạch sẽ và logic hơn.

Các thực tiễn tốt nhất

• Luôn giữ cho mã nguồn sạch và có tổ chức.
• Sử dụng các công cụ như ESLint để phát hiện lỗi sớm.
• Thiết kế giao diện người dùng theo hướng người dùng để đảm bảo trải nghiệm tốt nhất.

Những cạm bẫy thường gặp

• Quá tải biến CSS có thể làm mã nguồn trở nên khó hiểu.
• Không tối ưu hóa cho di động có thể làm giảm trải nghiệm người dùng.

Mẹo Hiệu suất

• Xem xét việc sử dụng các thư viện nhẹ để cải thiện tốc độ tải trang.
• Tối ưu hóa hình ảnh và tài nguyên để giảm thời gian tải.

Giải quyết sự cố

Nếu bạn gặp phải vấn đề với việc chuyển đổi chủ đề hoặc điều hướng di động, hãy kiểm tra các biến CSS và đảm bảo rằng trạng thái của drawer được quản lý đúng cách.

Kết luận

Trong bài viết này, tôi đã chia sẻ hành trình phát triển Habit Tracker của mình từ giai đoạn thiết lập Monorepo đến triển khai giao diện người dùng. Các giai đoạn tiếp theo sẽ tập trung vào kết nối cơ sở dữ liệu và cải thiện thêm cho ứng dụng. Hãy theo dõi nhật ký hàng ngày của tôi để không bỏ lỡ những cập nhật mới nhất!

🔗 Theo dõi tiến trình hàng ngày: coding-daily-log
🔗 Kho lưu trữ dự án (có tài liệu chi tiết): Habit-Tracker

Tôi rất muốn nhận được phản hồi từ bạn! Hãy kiểm tra thư mục docs để xem tất cả các thách thức, giải pháp và quyết định hàng ngày—tôi hy vọng nó sẽ giúp bạn giải quyết những lỗi và lựa chọn thiết kế tương tự.