Opracowanie frontendu panelu Ad Network według makiet Figma (interaktywny UI)
Opis:
Należy zrealizować frontend webowego panelu Ad Network według gotowych makiet Figma. Potrzebna jest responsywna, staranna szata graficzna oraz interaktywność elementów interfejsu (zakładki, filtry, formularze, tabele, dropdown, zakres dat itp.). Na tym etapie backend może być nieobecny — dopuszczalne są dane mockowe / symulacja zapytań.
Ekrany/sekcje (zgodnie z makietami):
Auth (autoryzacja)
Zrealizować ekrany i logikę (stronę UI) według makiet Figma:Logowanie: formularz logowania (email/nazwa użytkownika + hasło), walidacja, stany błędów/sukcesu, disabled/loading dla przycisku.
Rejestracja: rozszerzony formularz “zostaw informacje o sobie/firmie” (jak w przykładzie), pola:
Nazwa użytkownika*
Nazwa firmy*
Hasło* + Potwierdź hasło* (sprawdzenie zgodności)
Imię*, Nazwisko*
Email* + Potwierdź email* (sprawdzenie zgodności + format)
Kraj* (select / dropdown)
Waluta* (select / dropdown)
Typ konta (radio): Wydawca / Reklamodawca
Warunki*: checkbox “Przeczytałem, rozumiem i akceptuję …” + klikane linki do Warunków i Polityki Prywatności
Komentarze i dodatkowe informacje (textarea, opcjonalnie)
Przycisk REJESTRACJA aktywny tylko przy poprawnym formularzu; pokazywać błędy pod polami.
Zapomniałeś hasła: formularz żądania resetowania hasła (email), walidacja, stany sukcesu/błędu.
Sprawdź email: ekran informacyjny po żądaniu resetowania.
Utwórz nowe hasło: formularz nowego hasła + potwierdzenie, walidacja i stany.
- Ogólne wymagania dotyczące Auth:
Stany UI elementów: focus/hover/disabled/error/loading zgodnie z projektem.
Komunikaty o błędach: wymagane, format email, zgodność hasła/email.
Dopuszczalna realizacja na danych mockowych/symulacji zapytań (bez rzeczywistego backendu na tym etapie).
Układ pulpitu: pasek boczny z nawigacją (Kampanie / Raporty / Śledzenie / Finanse / Panel administracyjny / Ustawienia), nagłówek z bilansem.
Kampanie:
lista kampanii (tabela: ID, Nazwa, Status, Format, Cennik, Model, Akcje)
filtry: statusy, formaty reklam, zakładki statusów (Aktywne / W recenzji / Odrzucone / Zatrzymane / Archiwalne)
strony Utwórz kampanię oraz Edytuj kampanię z sekcjami: Szczegóły ogólne, Cennik, Budżet, Kreacje (możliwość dodania kilku kreacji), Targetowanie (kraje/miasta, proxy, typ połączenia, urządzenie, OS/wersje, przeglądarki/języki), Opcje startowe.
Raporty (statystyki)
strona raportów/statystyk (w makietach może być podpisana jako “design”, ale treść — Raporty)
tabela/wizualizacja metryk (zgodnie z UI w Figma)
filtry i zarządzanie wyświetlaniem (okres/zasięg dat, kampania/status/inne filtry, jeśli są przewidziane w makietach)
stany: loading / empty / error (na danych mockowych lub przez warstwę API)
Finanse:
doładowanie (metody instant/non-instant), kod promocyjny, pokazanie szczegółów (prowizja/limity/portfel), ustawienia powiadomień email o bilansie
Historia doładowań: tabela transakcji + filtry (okres, id transakcji).
Śledzenie:
strona Postback Tracking: pokaz URL, kopiowanie, przycisk aktualizacji, formularz testowy (target url + test), stany “brak konwersji w ciągu 24 godzin”.
Ustawienia (Moje konto):
Dane użytkownika (email, imię/nazwisko, typ/ID komunikatora, kraj/miasto/adres)
zmiana hasła (stare/nowe/powtórz).
Wymagania dotyczące realizacji:
Pixel-perfect zgodność z Figma (marginesy, czcionki, stany przycisków/inputów).
Responsywność minimum: desktop + tablet (można omówić mobile, jeśli to konieczne).
Interaktywność:
działanie zakładek/filtrów/wypadających list
walidacja formularzy (pola obowiązkowe, format URL/email, powtórzenie hasła)
stany loading/empty/error dla tabel/żądań (na mockach)
Architektura: podejście komponentowe, wielokrotnego użytku komponenty (Input, Select, Table, Tabs, Button, Modal).
Dane: dane mockowe lub integracja przez abstrakcyjną warstwę API (aby później podłączyć rzeczywisty backend).
Jakość: ESLint/Prettier, zrozumiała struktura projektu, README jak uruchomić.
Technologie (preferencje, można zaproponować własne):
React + Next.js (lub Vue/Nuxt)
TypeScript
TailwindCSS / lub inna nowoczesna stylizacja UI
Biblioteka formularzy (React Hook Form) + walidacja schematu (Zod/Yup) — opcjonalnie
Wynik (deliverables):
Repozytorium (GitHub/GitLab) z gotowym frontendem
Zbudowany projekt, który uruchamia się lokalnie (npm/yarn/pnpm)
Zrealizowane wszystkie ekrany z makiet + klikalne scenariusze (na mockach)
Kryteria akceptacji:
Wszystkie ekrany z Figma zrealizowane i nawigacja między nimi działa
Formularze mają podstawową walidację i zrozumiałe stany
Tabele/filtry działają na danych mockowych
Wizualnie odpowiada makietom
Co dostarczę wykonawcy:
Link do Figma + dostęp
UI-asety (ikony/logotypy), jeśli są
(opcjonalnie) lista pól/reguły walidacji, jeśli trzeba szczegółowo opisać
-
Dzień dobry.
Jestem gotów zrobić frontend dla Twojej strony.
Mam duże doświadczenie w rozwoju frontend.
Pisz, porozmawiamy.
-
9004 69 0 Dzień dobry, Jurij!
Przeczytałem opis projektu. Mam doświadczenie w pracy z next.js, tailwind css oraz innymi bibliotekami, które są używane do jakościowego kodowania, walidacji formularzy i ogólnej logiki UI.
Już pracowałem z podobnymi sekcjami, które opisałeś w zadaniu, i mam duże doświadczenie w kodowaniu i budowaniu interfejsów na next.js.
Będę zadowolony, mogąc zająć się tym projektem. Czy możesz przesłać projekt w Figma do wstępnego zapoznania się?
-
1447 20 1 Dzień dobry, Jurij!
Ja, Witalij, jestem doświadczonym programistą React z ponad 5-letnim doświadczeniem i chętnie pomogę Ci w stworzeniu panelu Ad Network. Chciałbym zobaczyć Figma, aby zrozumieć, jaki jest projekt strony, a także po zakończeniu całej szaty graficznej mogę również pomóc w napisaniu backendu do tego projektu.
W wyniku naszej współpracy otrzymasz:
- Rozwój "pod klucz" – od pisania kodu po podłączenie domen i wdrożenie kodu na serwer
- Niezawodny, zoptymalizowany, zabezpieczony i szybki panel
- Przejrzystość w pracy i stałą komunikację
… - Gwarantowane wsparcie po zakończeniu projektu
Zobacz moje portfolio:
Freelancehunt
Jestem gotów omówić Twój projekt i zaproponować najlepsze rozwiązanie. Napisz do mnie – znajdziemy optymalne podejście!
-
345 2 1 Cześć! Jestem deweloperem Webflow z ponad 1,5-letnim doświadczeniem jako freelancer. Tworzę przejrzyste, responsywne i skoncentrowane na konwersji strony internetowe – strony docelowe, strony biznesowe, CMS i e-commerce – w pełni w Webflow.
Skupiam się na przejrzystej strukturze, płynnych animacjach i prostym zarządzaniu treścią. Dokładnie przestrzegam terminów, zapewniam prostotę procesu i szybko odpowiadam. Jestem gotów omówić Twoje cele i zaproponować najlepsze rozwiązanie.
Mogę zaprojektować dla Ciebie nowoczesną stronę internetową z super designem, ponieważ projektanci, z którymi współpracuję, są najlepszymi w swoim fachu. Oto moje projekty:
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
Z poważaniem, Jarosław
-
1524 15 0 Dobry wieczór, mam duże doświadczenie w realizacji takich zamówień. Od ponad 5 lat zajmuję się tworzeniem pod klucz. Będę zadowolony ze współpracy!
Przykłady pracy wyślę w wiadomości prywatnej.
-
907 28 0 Witaj!
Mam doświadczenie w tworzeniu niestandardowych CRM (iGaming) o różnym stopniu skomplikowania na NextJS+Shadcn+Tailwind+RHF+TanstackQuery.
Będę zadowolony, aby omówić szczegóły i dalszą współpracę.
Dziękuję.
Miłego dnia.
-
260 Dzień dobry, podobny projekt robiłem na kursową (potem dyplomową) będę zadowolony, aby pomóc zrobić Państwa. Cenę i koszt podaję orientacyjne.
-
513 3 0 Cześć, dużo robiłem stron internetowych na zamówienie według designu w Figmie. Oto przykład ucjester.pro
Mogę zrealizować również Twój.
-
24 7 1 Cześć.
Mam doświadczenie i chęć do pracy.
Zrealizuję pracę w ustalonym terminie.
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Rozwój korporacyjnego systemu finansowego — React, TypeScript, Node.jsPoszukujemy doświadczonego programisty full-stack lub małego zespołu do stworzenia korporacyjnego systemu finansowego od podstaw. Wymagana jest realizacja pełnego cyklu rozwoju: projektowanie architektury, backend, frontend, baza danych, testowanie i uruchomienie systemu.… Javascript & Typescript, Programowanie stron internetowych ∙ 15 godzin 43 minuty temu ∙ 53 oferty |
Programista gier
4390 PLN
Poszukujemy doświadczonego dewelopera gier do dopracowania istniejącego projektu na PixiJS. Należy poprawić matematyczny system gry, przerobić i zbalansować rundy bonusowe, a także wprowadzić zmiany w obecnej logice gry. Wymagane jest doświadczenie w komercyjnej produkcji gier… Javascript & Typescript, Tworzenie gier ∙ 20 godzin 24 minuty temu ∙ 13 ofert |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 20 godzin 24 minuty temu ∙ 25 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 2 dni 11 godzin temu ∙ 31 ofert |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 218 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 7 dni 17 godzin temu ∙ 119 ofert |