Felépítem a React vagy Next.js front-endedet egy Figma tervből, és összekötöm az API-ddal

A tervezés elkészült, az API készen áll vagy majdnem készen áll, de a felhasználók által látott képernyők még nem léteznek. Én csak a frontendet építem: a backendje, az auth szolgáltatója és a tárhelye változatlan marad, és a kód az Ön repositoryjába kerül. A szállítás után 14 napig ingyenesen javítok mindent, ami nem úgy működik, ahogy megegyeztünk.

A Starter csomaggal egy képernyőt vagy oldalt kap a Figma fájljából, reszponzív és típusos formában, az adatok az API-ból érkeznek, vagy egy mockból, amíg a végpont létezik. A Standard csomag legfeljebb öt képernyőt tartalmaz, amelyek az API-hoz vannak kötve, betöltési, üres és hibaállapotokkal, valamint validált űrlapokkal. Az Advanced csomag legfeljebb tizenkét képernyőt tesz lehetővé, és hozzáadja a bejelentkezési képernyőket, amelyek az Ön hitelesítési szolgáltatójával működnek, az alkalmazásban használt megosztott komponenseket és a fő folyamatok tesztjeit.

Szorosan követem a tervet: a térközök, a betűtípus mérete és a színek a Figma fájlból származnak. Ha egy képernyőnek nincs mobil verziója, javaslatot teszek rá az építés előtt, ahelyett, hogy találgatnék. A Next.js az App Routerrel az alapértelmezett; az egyszerű React Vite-tel is megfelelő, ha nincs szüksége szerveroldali renderelésre. A stílushoz Tailwind CSS-t vagy CSS modulokat használok, attól függően, hogy melyik van már a projektjében.

Az eredményt Chrome-ban, Firefoxban és Edge-ben asztali gépen, valamint Chrome-ban egy valódi Android telefonon ellenőrzöm.

Két nyilvános példa a frontend munkámra a portfólióban található: egy Next.js webáruház szűrőkkel, kosárral és pénztárral, valamint a saját kétnyelvű oldalam.

Csak írásban dolgozom, megbeszélések nélkül. A képernyők és a mögöttük lévő végpontok listázva vannak, mielőtt elkezdeném, egy előnézeti link mutatja a munkát, ahogy növekszik, és minden munkanapon rövid előrehaladási jegyzet érkezik a chatbe.

A projekt befejezésének lépései
1. Képernyőlista – Átnézem a Figma fájlt és az API dokumentációját, és felírom az egyes képernyőket, azok állapotait és az általuk hívott végpontokat. Ön megerősíti a listát a kódolás előtt.
2. Alap és megosztott részek – Projektbeállítás vagy az Ön meglévő repositoryja, színek és betűtípusok a Figmából, valamint az elrendezés és a komponensek, amelyeket minden képernyő újra felhasznál.
3. Képernyők és adatok – Minden képernyő a terv szerint készül el és csatlakozik az API-hoz, betöltési, üres és hibaállapotokkal. A hiányzó végpont egy mockot kap, amelyet könnyű cserélni.
4. Felülvizsgálati kör az előnézeti linken – Ön végigkattintja és egy listában elküldi a javításokat. Én kijavítom őket, és újra megmutatom ugyanazt a linket.
5. Átadás – A kód az Ön repositoryjában, egy rövid megjegyzés a struktúráról és a futtatásról, valamint az Advanced csomagban a tesztek, amelyeket minden kiadás előtt futtathat.