Розробка фронтенду кабінету Ad Network за макетами Figma (інтерактивний UI)
Опис:
Потрібно реалізувати фронтенд веб-кабінету Ad Network за готовими макетами Figma. Потрібна адаптивна, акуратна верстка та інтерактивність елементів інтерфейсу (таби, фільтри, форми, таблиці, dropdown, date range тощо). На цьому етапі бекенд може бути відсутній — допускаються мок-дані / імітація запитів.
Екрани/розділи (згідно макетів):
Auth (автентифікація)
Реалізувати екрани та логіку (UI-сторону) за макетами Figma:Sign In: форма входу (email/username + password), валідація, стани помилок/успіху, disabled/loading для кнопки.
Sign Up (реєстрація): розширена форма “залиште інформацію про себе/компанію” (як у прикладі), поля:
Username*
Company name*
Password* + Confirm password* (перевірка співпадіння)
First name*, Last name*
Email* + Confirm email* (перевірка співпадіння + формат)
Country* (select / dropdown)
Currency* (select / dropdown)
Account type (radio): Publisher / Advertiser
Conditions*: checkbox “I read, understand and accept …” + клікабельні посилання на Terms & Conditions та Privacy Policy
Comments and additional information (textarea, optional)
Кнопка SIGNUP активна лише при валідній формі; показувати помилки під полями.
Forgot Password: форма запиту скидання паролю (email), валідація, стани success/error.
Check email: інформаційний екран після запиту скидання.
Create new password: форма нового паролю + підтвердження, валідація та стани.
- Загальні вимоги до Auth:
UI-стани елементів: focus/hover/disabled/error/loading згідно дизайну.
Повідомлення про помилки: required, формат email, співпадіння password/email.
Допускається реалізація на мок-даних/імітації запитів (без реального бекенду на цьому етапі).
Dashboard layout: сайдбар з навігацією (Campaigns / Reports / Tracking / Finance / Admin panel / Settings), хедер з балансом.
Campaigns:
список кампаній (таблиця: ID, Name, Status, Format, Pricing, Model, Actions)
фільтри: статуси, ad formats, таби статусів (Active / In review / Rejected / Stopped / Archived)
сторінки Create campaign та Edit campaign з секціями: General Details, Pricing, Budget, Creatives (можливість додати кілька креативів), Targeting (країни/міста, proxy, connection type, device, OS/версії, browsers/мови), Start Options.
Reports (статистика/звітність)
сторінка звітів/статистики (у макетах може бути підписана як “design”, але зміст — Reports)
таблиця/візуалізація метрик (згідно UI у Figma)
фільтри та керування відображенням (період/діапазон дат, кампанія/статус/інші фільтри, якщо вони передбачені макетами)
стани: loading / empty / error (на мок-даних або через API-шар)
Finance:
поповнення (instant/non-instant методи), промокод, показ деталей (комісія/ліміти/гаманець), налаштування email-нотифікації по балансу
Top Up History: таблиця транзакцій + фільтри (період, transaction id).
Tracking:
сторінка Postback Tracking: показ URL, копіювання, кнопка update, форма тесту (target url + test), стани “немає конверсій за 24 години”.
Settings (My account):
User data (email, ім’я/прізвище, месенджер тип/ID, країна/місто/адреса)
зміна пароля (old/new/repeat).
Вимоги до реалізації:
Pixel-perfect відповідність Figma (відступи, шрифти, стани кнопок/інпутів).
Адаптивність мінімум: desktop + tablet (можна обговорити mobile, якщо потрібно).
Інтерактивність:
робота табів/фільтрів/випадаючих списків
валідація форм (обов’язкові поля, формат URL/email, password repeat)
стани loading/empty/error для таблиць/запитів (на моках)
Архітектура: компонентний підхід, перевикористовувані компоненти (Input, Select, Table, Tabs, Button, Modal).
Данні: мок-дані або інтеграція через абстрактний API-шар (щоб потім підключити реальний бекенд).
Якість: ESLint/Prettier, зрозуміла структура проєкту, README як запустити.
Технології (побажання, можна запропонувати свої):
React + Next.js (або Vue/Nuxt)
TypeScript
TailwindCSS / або інша сучасна UI-стилізація
Form library (React Hook Form) + schema validation (Zod/Yup) — за бажанням
Результат (deliverables):
Репозиторій (GitHub/GitLab) з готовим фронтендом
Зібраний проєкт, який запускається локально (npm/yarn/pnpm)
Реалізовані всі екрани з макетів + клікабельні сценарії (на моках)
Критерії приймання:
Усі екрани з Figma реалізовані та навігація між ними працює
Форми мають базову валідацію і зрозумілі стани
Таблиці/фільтри працюють на мок-даних
Візуально відповідає макетам
Що я надам виконавцю:
Посилання на Figma + доступ
UI-ассети (іконки/логотипи), якщо є
(опційно) список полів/правила валідації, якщо треба деталізувати
-
1 день1111 UAH
9004 69 0 1 день1111 UAH
Доброго дня, Юрій!
Перечитав опис проєкту. Маю досвід роботи з next.js, tailwind css та іншими бібліотеками, які використовуються для якісної верстки, валідації форм і загальної UI-логіки.
Я вже працював із подібними секціями, які ви описали в завданні, і маю великий досвід у верстці та побудові інтерфейсів на next.js.
Буду радий взятися за цей проєкт. Чи можете надіслати дизайн у Figma для попереднього ознайомлення?
-
7 днів10 000 UAH
1543 15 0 7 днів10 000 UAH
Добрий день.
Готов зробити фронтенд для Вашого сайту.
В мене є великий опит в фронтенд розробці.
Пишіть, обговоримо.
-
25 днів27 000 UAH
1447 20 1 25 днів27 000 UAH
Доброго дня, Юріє!
Я, Віталій, - досвідчений React розробник із 5+ роками досвіду, буду радий допомогти вам з створенням веб-кабінету Ad Network. Я б хотів побачити Figma, що дзінатися який є дизайн сайту, також після завершення всієї верстки, можу також і допомогти з написанням бекенду під цей проект
У результаті нашої співпраці ви отримаєте:
- Розробку "під ключ" – від розробки коду до підключення доменів і залиття коду на сервер
- Надійний, оптимізований, захищений і швидкий веб-кабінет
- Прозорість у роботі та постійну комунікацію
… - Гарантується Підтримку після завершення проєкту
Перегляньте моє портфоліо:
Freelancehunt
Готовий обговорити ваш проєкт і запропонувати найкраще рішення. Напишіть мені – знайдемо оптимальний підхід!
-
25 днів25 999 UAH
345 2 1 25 днів25 999 UAH
Привіт! Я розробник Webflow з більш ніж 1,5-річним досвідом роботи фрілансером. Я створюю чіткі, адаптивні та орієнтовані на конверсію веб-сайти – цільові сторінки, бізнес-сайти, CMS та електронну комерцію – повністю в Webflow.
Я зосереджуюсь на чіткій структурі, плавних анімаціях та простому управлінні контентом. Я чітко дотримуюсь термінів, забезпечую простоту процесу та швидко відповідаю. Готовий обговорити ваші цілі та запропонувати найкраще рішення.
Можу розробити для вас сайт під ключ сучасний та з суперовим дизайном, оскільки дизайнери з якими я співпрацюю є найкращими в своїй справі, надаю мої проєкти:
https://only-winstar.webflow.io
https://tarosite.webflow.io/
https://acegames-478200.webflow.io/
https://www.kingdental.com.ua
… https://www.fl-ukraine.com/
https://www.obriy-roofspace.com.ua/
https://epoxyboss.ca
https://stuk-site-3de2c0b8ef2c69e6f2a3eed8f75f8.webflow.io
З повагою, Ярослав
-
50 днів27 000 UAH
1524 15 0 50 днів27 000 UAH
Доброго вечора, маю великий досвід у виконанні таких замовлень. Більше 5 років займаюсь розробкою під ключ. Буду радий співпраці!
Приклади роботи відправлю в пп
-
50 днів27 000 UAH
907 28 0 50 днів27 000 UAH
Вітаю!
Маю досвід розробки кастомних CRM (iGaming) найрізноманітнішої складності на NextJS+Shadcn+Tailwind+RHF+TanstackQuery.
Буду радий обговорити деталі та подільшій співпраці.
Дякую.
Гарного дня.
-
30 днів20 000 UAH
260 30 днів20 000 UAH
Доброго дня, подібний проект я робив на курсову (потім дипломну) буду радий допомогти зробити ваш. Ціну і вартість вказую приблизні
-
21 день27 000 UAH
513 3 0 21 день27 000 UAH
Привіт, багато робив сайтів за фігма дизайном на замовлення. Ось приклад ucjester.pro
Можу реалізувати і ваш.
-
15 днів15 000 UAH
24 7 1 15 днів15 000 UAH
Привіт.
У мене є досвід і бажання працювати.
Я виконую роботу в узгоджений термін.
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Підтримка та розвиток сайту клінінгової компанії
919 UAH
Шукаю веб-розробника / вебмайстра для довгострокової підтримки та розвитку сайту клінінгової компанії. Сайт: https://donely.ca Про проєкт DoneLy Home Services — компанія з надання послуг прибирання в Канаді, яка активно розвивається та розширює географію роботи. Шукаю… Javascript та Typescript, Веб-програмування ∙ 1 день 21 година тому ∙ 59 ставок |
Розробка сайту по ТЗ на FramerПотрібно зробити сайт по цим параметрам що в тз https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Називайте реальний рейт на основі цього дизайну HTML та CSS верстання, Javascript та Typescript ∙ 2 дні 23 години тому ∙ 27 ставок |
Розробка інтерактивної карти Palworld для сайтуПотрібно розробити інтерактивну карту Palworld за прикладом: https://palworld.gg/map Нам потрібна не просто статична картинка, а повноцінна інтерактивна карта, де користувач може дивитися локації, вмикати / вимикати категорії об’єктів, шукати потрібні точки та взаємодіяти з… HTML та CSS верстання, Javascript та Typescript ∙ 4 дні 13 годин тому ∙ 32 ставки |
Розробка платформи AM Mobility (автосервіс, парковка, страхування, оренда автомобілів)
259 653 UAH
Шукаємо команду або досвідченого Full Stack розробника для створення MVP платформи AM Mobility. AM Mobility — це єдина цифрова екосистема для автомобілістів, що об'єднує в одному додатку та веб-платформі: парковку; автосервіс; шиномонтаж; автомийку; оренду автомобілів;… Javascript та Typescript, Веб-програмування ∙ 9 днів 20 годин тому ∙ 119 ставок |
Gsap анімації
1000 UAH
Доброго дня. Треба внести правки в поточному проєкті. Потрібен фахівець, який добре працює на gsap/lenis Треба зробити анімацію карточок. Детально ТЗ тут: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Треба проявити креатив та… Javascript та Typescript, Веб-програмування ∙ 10 днів 1 година тому ∙ 21 ставка |
Київ