Разработка фронтенда кабинета Ad Network по макетам Figma (интерактивный UI)
Описание:
Необходимо реализовать фронтенд веб-кабинета Ad Network по готовым макетам Figma. Нужна адаптивная, аккуратная верстка и интерактивность элементов интерфейса (вкладки, фильтры, формы, таблицы, выпадающие списки, диапазон дат и т.д.). На этом этапе бэкенд может отсутствовать — допускаются мок-данные / имитация запросов.
Экраны/разделы (согласно макетам):
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, повтор пароля)
состояния 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-ассеты (иконки/логотипы), если есть
(опционально) список полей/правила валидации, если нужно детализировать
-
7 дней10 000 UAH
7 дней10 000 UAH
Добрый день.
Готов сделать фронтенд для вашего сайта.
У меня есть большой опыт во фронтенд разработке.
Пишите, обсудим.
После выполнения я буду всегда на связи и поддерживать проект! -
1 день1111 UAH
9004 69 0 1 день1111 UAH
Добрый день, Юрий!
Перечитал описание проекта. У меня есть опыт работы с next.js, tailwind css и другими библиотеками, которые используются для качественной верстки, валидации форм и общей UI-логики.
Я уже работал с подобными секциями, которые вы описали в задании, и у меня большой опыт в верстке и построении интерфейсов на next.js.
Буду рад взяться за этот проект. Можете отправить дизайн в Figma для предварительного ознакомления?
-
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
1500 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
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 1 день 2 часа назад ∙ 28 ставок |
Разработка платформы AM Mobility (автосервис, парковка, страхование, аренда автомобилей)
260 189 UAH
Ищем команду или опытного Full Stack разработчика для создания MVP платформы AM Mobility. AM Mobility — это единая цифровая экосистема для автомобилистов, объединяющая в одном приложении и веб-платформе: парковку; автосервис; шиномонтаж; автомойку; аренду автомобилей;… Javascript и Typescript, Веб-программирование ∙ 6 дней 8 часов назад ∙ 116 ставок |
Gsap анимации
1000 UAH
Добрый день. Нужно внести правки в текущем проекте. Нужен специалист, который хорошо работает на gsap/lenis Нужно сделать анимацию карточек. Подробное ТЗ здесь: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Нужно… Javascript и Typescript, Веб-программирование ∙ 6 дней 14 часов назад ∙ 21 ставка |
Ищу наставника по Claude Code для запуска веб-проекта с нуля**Кратко о задаче:** Я новичок без опыта в программировании. Есть готовое ТЗ на разработку сайта (42 страницы, Next.js, PostgreSQL). Хочу реализовать его самостоятельно с помощью Claude Code - нужен специалист, который настроит среду и научит меня работать с инструментом. ---… Javascript и Typescript, Обучение ∙ 8 дней 13 часов назад ∙ 22 ставки |
Обновление дизайна на сайтеНужно обновить дизайн существующего сайта используя HTML, CSS, JS: освежить внешний вид, сделать его современным и адаптивным под мобильные устройства. Требуется добавить плавные анимации и интерактивные элементы . HTML и CSS верстка, Javascript и Typescript ∙ 9 дней 7 часов назад ∙ 97 ставок |
Киев