Zbuduję Twój front-end React lub Next.js na podstawie projektu Figma i połączę go z Twoim API

Projekt jest gotowy, a API jest gotowe lub prawie gotowe, ale ekrany, które zobaczą użytkownicy, jeszcze nie istnieją. Buduję tylko front-end: Twój backend, dostawca uwierzytelniania i hosting pozostają bez zmian, a kod trafia do Twojego repozytorium. Przez 14 dni po dostawie naprawiam bezpłatnie wszystko, co nie działa zgodnie z naszymi ustaleniami.

W pakiecie Starter otrzymujesz jeden ekran lub stronę z pliku Figma, responsywną i z typowaniem, z danymi pochodzącymi z Twojego API lub z makiety, dopóki punkt końcowy nie będzie istniał. Pakiet Standard obejmuje do pięciu ekranów połączonych z Twoim API, z obsługą stanów ładowania, pustych i błędów oraz formularzy z walidacją. Pakiet Advanced pozwala na do dwunastu ekranów i dodaje ekrany logowania, które współpracują z Twoim dostawcą uwierzytelniania, współdzielone komponenty używane w całej aplikacji oraz testy dla głównych przepływów.

Ściśle przestrzegam projektu: odstępy, skala typograficzna i kolory pochodzą z pliku Figma. Tam, gdzie ekran nie ma wersji mobilnej, proponuję ją przed budową, zamiast zgadywać. Next.js z App Routerem jest moim domyślnym wyborem; czysty React z Vite jest w porządku, gdy nie potrzebujesz renderowania po stronie serwera. Do stylizacji używam Tailwind CSS lub CSS Modules, w zależności od tego, co już jest w Twoim projekcie.

Sprawdzam wynik w Chrome, Firefox i Edge na komputerze stacjonarnym oraz w Chrome na prawdziwym telefonie z Androidem.

Dwa publiczne przykłady mojej pracy front-endowej znajdują się w portfolio: sklep internetowy Next.js z filtrami, koszykiem i kasą oraz moja własna dwujęzyczna strona.

Pracuję wyłącznie pisemnie, bez spotkań. Ekrany i punkty końcowe, które za nimi stoją, są wymienione przed rozpoczęciem, link podglądu pokazuje postępy pracy, a krótka notatka o postępach pojawia się na czacie każdego dnia roboczego.

Kroki do ukończenia Twojego projektu
1. Lista ekranów – Przeglądam plik Figma i dokumentację Twojego API, a następnie zapisuję każdy ekran, jego stany i wywołania API. Potwierdzasz listę przed napisaniem jakiegokolwiek kodu.
2. Podstawa i współdzielone części – Konfiguracja projektu lub Twoje istniejące repozytorium, kolory i typografia z Figmy, a także układ i komponenty, które każdy ekran ponownie wykorzystuje.
3. Ekrany i dane – Każdy ekran jest budowany zgodnie z projektem i połączony z Twoim API, z obsługą stanów ładowania, pustych i błędów. Brakujący punkt końcowy otrzymuje makietę, którą łatwo zamienić.
4. Runda przeglądu na linku podglądu – Klikasz i wysyłasz poprawki w jednej liście. Naprawiam je i ponownie pokazuję ten sam link.
5. Przekazanie – Kod w Twoim repozytorium, krótka notatka o strukturze i sposobie uruchomienia, a w przypadku pakietu Advanced, testy, które możesz uruchomić przed każdą wersją.