Tôi sẽ xây dựng giao diện người dùng React hoặc Next.js của bạn từ thiết kế Figma và kết nối nó với API của bạn

Thiết kế đã hoàn thành và API đã sẵn sàng hoặc gần sẵn sàng, nhưng các màn hình mà người dùng sẽ thấy vẫn chưa tồn tại. Tôi chỉ xây dựng giao diện người dùng: phần phụ trợ, nhà cung cấp xác thực và lưu trữ của bạn vẫn giữ nguyên, và mã sẽ được đưa vào kho lưu trữ của bạn. Trong 14 ngày sau khi giao hàng, tôi sẽ sửa bất kỳ lỗi nào không hoạt động như chúng ta đã thỏa thuận, miễn phí.

Với Starter, bạn nhận được một màn hình hoặc trang từ tệp Figma của mình, đáp ứng và được nhập, với dữ liệu của nó đến từ API của bạn, hoặc từ một mô phỏng cho đến khi điểm cuối tồn tại. Standard bao gồm tối đa năm màn hình được kết nối với API của bạn, với các trạng thái tải, trống và lỗi và các biểu mẫu có xác thực. Advanced cho phép tối đa mười hai màn hình và thêm các màn hình đăng nhập hoạt động với nhà cung cấp xác thực của bạn, các thành phần được chia sẻ được sử dụng trên toàn ứng dụng và các kiểm thử cho các luồng chính.

Tôi tuân thủ chặt chẽ thiết kế: khoảng cách, tỷ lệ kiểu chữ và màu sắc đến từ tệp Figma. Trường hợp màn hình không có phiên bản di động, tôi đề xuất một phiên bản trước khi xây dựng thay vì đoán. Next.js với App Router là mặc định của tôi; React thuần với Vite là tốt khi bạn không cần kết xuất phía máy chủ. Để tạo kiểu, tôi sử dụng Tailwind CSS hoặc CSS Modules, tùy theo dự án của bạn đã có.

Tôi kiểm tra kết quả trong Chrome, Firefox và Edge trên máy tính để bàn, và trong Chrome trên điện thoại Android thực.

Hai ví dụ công khai về công việc giao diện người dùng của tôi có trong danh mục đầu tư: một cửa hàng Next.js với các bộ lọc, giỏ hàng và thanh toán, và trang web song ngữ của riêng tôi.

Tôi chỉ làm việc bằng văn bản, không có cuộc họp. Các màn hình và các điểm cuối đằng sau chúng được liệt kê trước khi tôi bắt đầu, một liên kết xem trước hiển thị công việc khi nó phát triển, và một ghi chú tiến độ ngắn gọn được gửi trong cuộc trò chuyện mỗi ngày làm việc.

Các bước để hoàn thành dự án của bạn
1. Danh sách màn hình - Tôi xem qua tệp Figma và tài liệu API của bạn và ghi lại từng màn hình, các trạng thái của nó và các lệnh gọi API mà nó thực hiện. Bạn xác nhận danh sách trước khi viết bất kỳ mã nào.
2. Các phần cơ bản và được chia sẻ - Thiết lập dự án hoặc kho lưu trữ hiện có của bạn, màu sắc và kiểu chữ từ Figma, và bố cục và các thành phần mà mọi màn hình sử dụng lại.
3. Màn hình và dữ liệu - Mỗi màn hình được xây dựng theo thiết kế và được kết nối với API của bạn, với các trạng thái tải, trống và lỗi. Một điểm cuối bị thiếu sẽ nhận được một mô phỏng dễ dàng hoán đổi.
4. Vòng xem xét trên liên kết xem trước - Bạn nhấp qua và gửi các chỉnh sửa trong một danh sách. Tôi sửa chúng và hiển thị lại cùng một liên kết.
5. Bàn giao - Mã trong kho lưu trữ của bạn, một ghi chú ngắn gọn về cấu trúc và cách chạy nó, và trên Advanced, các kiểm thử bạn có thể chạy trước mỗi bản phát hành.