Ще изградя вашия React или Next.js фронтенд от Figma дизайн и ще го свържа с вашето API

Дизайнът е готов и API е готов или почти готов, но екраните, които потребителите ще виждат, все още не съществуват. Аз изграждам само предния край: вашият бекенд, доставчик на удостоверяване и хостинг остават такива, каквито са, а кодът отива във вашето хранилище. В продължение на 14 дни след доставката, аз поправям всичко, което не работи, както сме се договорили, безплатно.

Със Starter получавате един екран или страница от вашия Figma файл, адаптивен и типизиран, с данни, идващи от вашето API, или от макет, докато крайната точка не съществува. Standard покрива до пет екрана, свързани с вашето API, със състояния на зареждане, празно и грешка и форми с валидация. Advanced позволява до дванадесет екрана и добавя екрани за вход, които работят с вашия доставчик на удостоверяване, споделени компоненти, използвани в цялото приложение, и тестове за основните потоци.

Следвам дизайна отблизо: разстоянията, мащабът на шрифта и цветовете идват от Figma файла. Когато екран няма мобилна версия, предлагам такава преди да я изградя, вместо да гадая. Next.js с App Router е моят стандарт; обикновен React с Vite е добре, когато не се нуждаете от сървърно рендиране. За стилизиране използвам Tailwind CSS или CSS Modules, което вече има вашият проект.

Проверявам резултата в Chrome, Firefox и Edge на десктоп, и в Chrome на реален Android телефон.

Два публични примера за моята работа по предния край са в портфолиото: Next.js магазин с филтри, количка и каса, и моят собствен двуезичен сайт.

Работя само писмено, без срещи. Екраните и крайните точки зад тях са изброени преди да започна, линк за предварителен преглед показва работата, докато расте, и кратка бележка за напредъка идва в чата всеки работен ден.

Стъпки за завършване на вашия проект
1. Списък с екрани – Преглеждам Figma файла и вашата API документация и записвам всеки екран, неговите състояния и крайните точки, които извиква. Вие потвърждавате списъка преди какъвто и да е код.
2. Основни и споделени части – Настройка на проекта или вашето съществуващо хранилище, цветове и тип от Figma, както и оформлението и компонентите, които всеки екран използва повторно.
3. Екрани и данни – Всеки екран е изграден според дизайна и е свързан с вашето API, със състояния на зареждане, празно и грешка. Липсваща крайна точка получава макет, който е лесен за смяна.
4. Кръг за преглед на линка за предварителен преглед – Вие кликвате и изпращате корекции в един списък. Аз ги поправям и показвам същия линк отново.
5. Предаване – Кодът във вашето хранилище, кратка бележка за структурата и как да го стартирате, и на Advanced, тестове, които можете да стартирате преди всяко издание.