Saya akan membina bahagian hadapan React atau Next.js anda daripada reka bentuk Figma dan menyambungkannya ke API anda

Reka bentuk telah siap dan API sedia atau hampir sedia, tetapi skrin yang akan dilihat pengguna belum wujud. Saya membina bahagian hadapan sahaja: bahagian belakang anda, penyedia pengesahan dan pengehosan kekal seperti sedia ada, dan kod akan masuk ke repositori anda. Selama 14 hari selepas penghantaran, saya membaiki apa sahaja yang tidak berfungsi seperti yang kita persetujui, secara percuma.

Dengan Starter anda mendapat satu skrin atau halaman daripada fail Figma anda, responsif dan ditaip, dengan datanya datang daripada API anda, atau daripada mock sehingga titik akhir wujud. Standard meliputi sehingga lima skrin yang disambungkan ke API anda, dengan status memuatkan, kosong dan ralat serta borang dengan pengesahan. Advanced membenarkan sehingga dua belas skrin dan menambah skrin log masuk yang berfungsi dengan penyedia pengesahan anda, komponen kongsi yang digunakan di seluruh aplikasi, dan ujian untuk aliran utama.

Saya mengikuti reka bentuk dengan teliti: jarak, skala jenis dan warna datang daripada fail Figma. Di mana skrin tidak mempunyai versi mudah alih, saya mencadangkan satu sebelum membina daripada meneka. Next.js dengan App Router adalah lalai saya; React biasa dengan Vite adalah baik apabila anda tidak memerlukan rendering pelayan. Untuk penggayaan saya menggunakan Tailwind CSS atau CSS Modules, mana-mana yang sudah ada dalam projek anda.

Saya menyemak hasilnya dalam Chrome, Firefox dan Edge pada desktop, dan dalam Chrome pada telefon Android sebenar.

Dua contoh awam kerja bahagian hadapan saya ada dalam portfolio: kedai Next.js dengan penapis, troli dan pembayaran, dan tapak dwibahasa saya sendiri.

Saya bekerja secara bertulis sahaja, tanpa mesyuarat. Skrin dan titik akhir di belakangnya disenaraikan sebelum saya bermula, pautan pratonton menunjukkan kerja semasa ia berkembang, dan nota kemajuan ringkas datang dalam sembang setiap hari bekerja.

Langkah-langkah untuk menyiapkan projek anda
1. Senarai skrin - Saya meneliti fail Figma dan dokumen API anda dan menulis setiap skrin, statusnya dan panggilan titik akhir. Anda mengesahkan senarai sebelum sebarang kod.
2. Bahagian asas dan kongsi - Persediaan projek atau repositori sedia ada anda, warna dan jenis daripada Figma, serta susun atur dan komponen yang digunakan semula oleh setiap skrin.
3. Skrin dan data - Setiap skrin dibina mengikut reka bentuk dan disambungkan ke API anda, dengan status memuatkan, kosong dan ralat. Titik akhir yang hilang mendapat mock yang mudah ditukar.
4. Pusingan semakan pada pautan pratonton - Anda klik dan menghantar pembetulan dalam satu senarai. Saya membetulkannya dan menunjukkan pautan yang sama sekali lagi.
5. Penyerahan - Kod dalam repositori anda, nota ringkas tentang struktur dan cara menjalankannya, dan pada Advanced, ujian yang boleh anda jalankan sebelum setiap keluaran.