Figma tasarımından React veya Next.js ön ucunuzu oluşturacağım ve API'nize bağlayacağım

Tasarım tamamlandı ve API hazır veya neredeyse hazır, ancak kullanıcıların göreceği ekranlar henüz mevcut değil. Sadece ön ucu oluşturuyorum: arka ucunuz, kimlik doğrulama sağlayıcınız ve barındırmanız olduğu gibi kalır ve kod deponuza gider. Teslimattan sonra 14 gün boyunca, anlaştığımız gibi çalışmayan her şeyi ücretsiz olarak düzeltirim.

Başlangıç paketiyle Figma dosyanızdan duyarlı ve yazılı bir ekran veya sayfa alırsınız, verileri API'nizden veya uç nokta mevcut olana kadar bir taklitten gelir. Standart, API'nize bağlı beş ekrana kadar, yükleme, boş ve hata durumları ve doğrulama içeren formları kapsar. Gelişmiş, on iki ekrana kadar izin verir ve kimlik doğrulama sağlayıcınızla çalışan giriş ekranları, uygulama genelinde kullanılan paylaşılan bileşenler ve ana akışlar için testler ekler.

Tasarımı yakından takip ediyorum: boşluk, yazı tipi ölçeği ve renkler Figma dosyasından gelir. Bir ekranın mobil sürümü yoksa, tahmin etmek yerine oluşturmadan önce bir tane öneririm. App Router ile Next.js varsayılanımdır; sunucu tarafı oluşturmaya ihtiyacınız olmadığında Vite ile düz React uygundur. Stil için Tailwind CSS veya CSS Modülleri kullanırım, projenizde hangisi zaten varsa.

Sonucu masaüstünde Chrome, Firefox ve Edge'de ve gerçek bir Android telefonda Chrome'da kontrol ediyorum.

Ön uç çalışmalarıma ait iki genel örnek portföyde yer almaktadır: filtreler, bir sepet ve bir ödeme sayfası içeren bir Next.js mağazası ve kendi iki dilli sitem.

Sadece yazılı olarak çalışıyorum, toplantısız. Ekranlar ve arkalarındaki uç noktalar başlamadan önce listelenir, bir önizleme bağlantısı çalışmayı büyüdükçe gösterir ve her iş günü sohbette kısa bir ilerleme notu gelir.

Projenizi tamamlama adımları
1. Ekran listesi - Figma dosyasını ve API belgelerinizi incelerim ve her ekranı, durumlarını ve çağırdığı uç noktaları yazarım. Herhangi bir koddan önce listeyi onaylarsınız.
2. Temel ve paylaşılan parçalar - Proje kurulumu veya mevcut deponuz, Figma'dan renkler ve tür, ve her ekranın yeniden kullandığı düzen ve bileşenler.
3. Ekranlar ve veriler - Her ekran tasarıma göre oluşturulur ve API'nize bağlanır, yükleme, boş ve hata durumlarıyla. Eksik bir uç nokta, kolayca değiştirilebilecek bir taklit alır.
4. Önizleme bağlantısında inceleme turu - Tıklarsınız ve düzeltmeleri tek bir liste halinde gönderirsiniz. Onları düzeltir ve aynı bağlantıyı tekrar gösteririm.
5. Teslimat - Deponuzdaki kod, yapı ve nasıl çalıştırılacağına dair kısa bir not ve Gelişmiş'te, her sürümden önce çalıştırabileceğiniz testler.