Figma projektu https://www.figma.com/design/O1ZFkM0Ugian1oUkMcq8qX/Untitled?node-id=1733-5461&t=uwr78V10NVNWzq6F-1
🔒 TECHNICZNE ZADANIE
FRONTEND-REALIZACJA WEDŁUG MAKIET FIGMA
(BEZ BACKENDU / BEZ LOGIKI / BEZ PRZECHOWYWANIA)
1. Cel prac
Stworzyć interfejs użytkownika strony ściśle według makiet Figma (pixel-perfect)
❗ Wyłącznie frontendowa realizacja, bez implementacji logiki serwera, przechowywania danych i procesów biznesowych.
Wynik prac musi być całkowicie gotowy do późniejszego podłączenia backendu, ale nie zawierać jego implementacji.
2. Źródło projektu
Jedynym źródłem prawdy są makiety Figma
Realizacja odbywa się 1 do 1:
wymiary
marginesy
czcionki
kolory
stany elementów
Jakiekolwiek odchylenia od Figma są zabronione bez uzgodnienia
3. Granice odpowiedzialności frontendu (KRYTYCZNE)
🚫 Frontend NIE MA PRAWA:
Frontend TYLKO wyświetla interfejs.
4. Formy (OBOWIĄZKOWE)
4.1 Zachowanie form
Wszystkie formy:
są realizowane ściśle według Figma
zawierają wizualną walidację (required, error-state)
NIE PRZECHOWUJĄ danych
NIE WYSYŁAJĄ danych na serwer
4.2 Wysyłanie formy
Przy submit:
console.log('Form submit mock', formData);
❗ Używana jest JS-zastępcza, bez fetch / axios / API.
5. Listy, karty, tabele
5.1 Źródło danych
Wszystkie listy są realizowane statycznie
Dane są zakodowane na stałe (mock-data)
Struktura HTML musi być gotowa pod API
Przykład:
<div class="items-list">
<!-- items from API later -->
</div>
❗ Żadnej logiki ładowania danych.
6. Autoryzacja / rejestracja
6.1 Ściśle tylko UI
Realizacja ekranów logowania / rejestracji
Pola, przyciski, stany błędów — tylko wizualnie
Żadnej weryfikacji loginu/hasła
6.2 Zachowanie
console.log('Auth UI only');
❗ NIE:
JWT
cookies
localStorage
ról
dostępu
7. Przycisk i działania
7.1 Wszystkie przyciski
7.2 Zachowanie przycisków
console.log('Button clicked');
8. Okna modalne / popupy
9. Responsywność
Obowiązkowe punkty przerwania:
Realizacja ściśle według responsywnych makiet Figma
Samowolne rozwiązania są zabronione.
10. Wymagania techniczne
11. Przygotowanie pod backend (ALE BEZ JEGO REALIZACJI)
Frontend ma obowiązek:
<!-- backend: data will be injected here -->
12. Kryteria akceptacji
Praca jest akceptowana jeśli:
Realizacja wizualnie zgadza się z Figma
Brak zapytań sieciowych
Brak przechowywania danych
Brak logiki biznesowej
Cała interaktywność — zastępniki
Kod gotowy do podłączenia backendu
13. Zabronione bez uzgodnienia
❌ Samodzielnie:
WSZYSTKO MUSI DZIAŁAĆ I WYGLĄDAĆ JAK W FIGMIE!