Mən sizin React və ya Next.js ön hissənizi Figma dizaynından quracağam və onu API-nizə qoşacağam

Dizayn tamamlanıb və API hazırdır və ya demək olar ki, hazırdır, lakin istifadəçilərin görəcəyi ekranlar hələ mövcud deyil. Mən yalnız ön hissəni qururam: sizin backend, auth provayderiniz və hostinqiniz olduğu kimi qalır və kod sizin repozitoriyanıza gedir. Çatdırılmadan 14 gün sonra, razılaşdığımız kimi işləməyən hər şeyi pulsuz olaraq düzəldirəm.

Starter ilə siz Figma faylınızdan bir ekran və ya səhifə əldə edirsiniz, həssas və yazılmış, məlumatları API-nizdən və ya son nöqtə mövcud olana qədər bir mockdan gəlir. Standard, API-nizə qoşulmuş beş ekrana qədər, yükləmə, boş və səhv vəziyyətləri və doğrulama ilə formaları əhatə edir. Advanced, on iki ekrana qədər icazə verir və auth provayderinizlə işləyən giriş ekranları, tətbiq boyunca istifadə olunan paylaşılan komponentlər və əsas axınlar üçün testlər əlavə edir.

Dizaynı yaxından izləyirəm: boşluq, tip ölçüsü və rənglər Figma faylından gəlir. Bir ekranın mobil versiyası olmadığı yerlərdə, onu qurmadan əvvəl təxmin etmək əvəzinə birini təklif edirəm. App Router ilə Next.js mənim defoltumdur; server renderinqinə ehtiyacınız olmadıqda Vite ilə sadə React yaxşıdır. Stil üçün Tailwind CSS və ya CSS Modulları istifadə edirəm, layihənizdə hansı varsa.

Nəticəni iş masasında Chrome, Firefox və Edge-də və real Android telefonunda Chrome-da yoxlayıram.

Ön hissə işimin iki ictimai nümunəsi portfelimdədir: filtrlər, səbət və ödəniş ilə Next.js mağazası və öz ikidilli saytım.

Mən yalnız yazılı şəkildə, görüşlər olmadan işləyirəm. Ekranlar və onların arxasındakı son nöqtələr başlamazdan əvvəl siyahıya alınır, önizləmə linki işi böyüdükcə göstərir və hər iş günü söhbətdə qısa bir irəliləyiş qeydi gəlir.

Layihənizi tamamlamaq üçün addımlar
1. Ekran siyahısı - Mən Figma faylını və API sənədlərinizi nəzərdən keçirirəm və hər bir ekranı, onun vəziyyətlərini və çağırdığı son nöqtələri qeyd edirəm. Hər hansı bir koddan əvvəl siyahını təsdiqləyirsiniz.
2. Əsas və paylaşılan hissələr - Layihənin qurulması və ya mövcud repozitoriyanız, Figma-dan rənglər və tip, və hər ekranın yenidən istifadə etdiyi layout və komponentlər.
3. Ekranlar və məlumatlar - Hər bir ekran dizayna uyğun qurulur və API-nizə qoşulur, yükləmə, boş və səhv vəziyyətləri ilə. Çatışmayan bir son nöqtə asanlıqla dəyişdirilə bilən bir mock alır.
4. Önizləmə linkində nəzərdən keçirmə raundu - Siz klikləyirsiniz və düzəlişləri bir siyahıda göndərirsiniz. Mən onları düzəldirəm və eyni linki yenidən göstərirəm.
5. Təhvil - Kod sizin repozitoriyanızda, struktur və necə işlədiləcəyi barədə qısa bir qeyd və Advanced-də, hər buraxılışdan əvvəl işlədə biləcəyiniz testlər.