Я створю ваш інтерфейс 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, тести, які ви можете запускати перед кожним випуском.