Cześć!
Na samym wstępie chcemy Ci bardzo podziękować za poświęcony czas i udział w naszym procesie rekrutacyjnym. Cieszymy się, że tu jesteś! Przygotowaliśmy dla Ciebie zadanie, które pozwoli nam lepiej poznać Twój styl pisania kodu i podejście do rozwiązywania problemów.
Twoim zadaniem jest wdrożenie interaktywnego komponentu slidera na podstawie dostarczonego projektu graficznego. W projekcie znajduje się prototyp animacji, ale jeżeli uznasz, że jesteś w stanie wdrożyć takie animacje, które zapewnią bardziej atrakcyjny efekt wizualny - śmiało!
Aby ułatwić Ci pracę, zebraliśmy najważniejsze założenia projektu:
- Pełny ekran: Komponent slidera powinien zajmować cały dostępny viewport przeglądarki.
- Responsywność (Desktop): W tym zadaniu oceniamy jedynie responsywność desktopową. Skup się na przedziale szerokości ekranu od 1280px do 3840px.
- Dynamiczne dane (CMS): Treści wyświetlane w sliderze muszą być zasilane z zewnętrznego pliku
sampleData.json. Symuluje to pobieranie danych z systemu CMS. Pamiętaj, że dane mogą ulec zmianie, więc Twój kod powinien być elastyczny i gotowy na różne warianty. - Obsługa multimediów: Poszczególne slajdy mogą zawierać zarówno obrazy (image), jak i wideo (video). Twój komponent musi to uwzględniać i poprawnie renderować odpowiedni typ mediów.
- Dowolność narzędzi: Masz pełną swobodę w doborze narzędzi! Możesz wykorzystać dowolne paczki i biblioteki (np. do animacji czy obsługi slidera) – zrób to tak, jak uważasz za słuszne.
Projekt przygotowaliśmy w Figmie. Możesz z niego skorzystać na dwa sposoby:
- Podgląd online: Zobacz projekt w Figmie
- Plik źródłowy: Pobierz plik .fig do zaimportowania
Gdy uznasz, że zadanie jest gotowe, udostępnij swój kod w repozytorium (GitHub, GitLab, Bitbucket itp.).
Link do repozytorium prześlij na adres: bartosz@247studio.co
Trzymamy kciuki, życzymy powodzenia i przede wszystkim – dobrej zabawy przy kodowaniu! W razie jakichkolwiek pytań, śmiało dawaj znać. Powodzenia! 🤞