Saya akan membangun front end React atau Next.js Anda dari desain Figma dan menghubungkannya ke API Anda

Desain sudah selesai dan API sudah siap atau hampir siap, tetapi layar yang akan dilihat pengguna belum ada. Saya hanya membangun front end: backend Anda, penyedia otentikasi, dan hosting tetap seperti adanya, dan kode masuk ke repositori Anda. Selama 14 hari setelah pengiriman, saya memperbaiki apa pun yang tidak berfungsi seperti yang kita sepakati, gratis.

Dengan Starter Anda mendapatkan satu layar atau halaman dari file Figma Anda, responsif dan diketik, dengan datanya berasal dari API Anda, atau dari mock sampai titik akhir ada. Standard mencakup hingga lima layar yang terhubung ke API Anda, dengan status memuat, kosong, dan kesalahan serta formulir dengan validasi. Advanced memungkinkan hingga dua belas layar dan menambahkan layar masuk yang berfungsi dengan penyedia otentikasi Anda, komponen bersama yang digunakan di seluruh aplikasi, dan pengujian untuk alur utama.

Saya mengikuti desain dengan cermat: spasi, skala tipe, dan warna berasal dari file Figma. Jika sebuah layar tidak memiliki versi seluler, saya mengusulkan satu sebelum membangunnya daripada menebak. Next.js dengan App Router adalah default saya; React biasa dengan Vite baik-baik saja jika Anda tidak memerlukan rendering server. Untuk gaya, saya menggunakan Tailwind CSS atau CSS Modules, mana pun yang sudah ada di proyek Anda.

Saya memeriksa hasilnya di Chrome, Firefox, dan Edge di desktop, dan di Chrome di ponsel Android asli.

Dua contoh publik dari pekerjaan front-end saya ada di portofolio: toko Next.js dengan filter, keranjang, dan checkout, serta situs bilingual saya sendiri.

Saya hanya bekerja secara tertulis, tanpa rapat. Layar dan titik akhir di belakangnya dicantumkan sebelum saya mulai, tautan pratinjau menunjukkan pekerjaan saat berkembang, dan catatan kemajuan singkat datang di obrolan setiap hari kerja.

Langkah-langkah untuk menyelesaikan proyek Anda
1. Daftar layar - Saya meninjau file Figma dan dokumen API Anda dan menuliskan setiap layar, statusnya, dan panggilan titik akhir yang dilakukannya. Anda mengonfirmasi daftar sebelum kode apa pun.
2. Bagian dasar dan bersama - Pengaturan proyek atau repositori Anda yang sudah ada, warna dan tipe dari Figma, serta tata letak dan komponen yang digunakan kembali oleh setiap layar.
3. Layar dan data - Setiap layar dibangun sesuai desain dan terhubung ke API Anda, dengan status memuat, kosong, dan kesalahan. Titik akhir yang hilang mendapatkan mock yang mudah ditukar.
4. Putaran tinjauan pada tautan pratinjau - Anda mengklik dan mengirim koreksi dalam satu daftar. Saya memperbaikinya dan menunjukkan tautan yang sama lagi.
5. Serah terima - Kode di repositori Anda, catatan singkat tentang struktur dan cara menjalankannya, dan di Advanced, pengujian yang dapat Anda jalankan sebelum setiap rilis.