Portfolio Front-end Developera

Zaczniemy od innej strony.

Rekrutujesz pracownika. Dostałeś/-aś sto CV. Masz jedno miejsce. Jak wybierzesz kogo zaprosisz na rozmowę? 

Czynników decyzyjnych może być dużo. Jedno jest pewne: CV musi się wyróżnić. 

Czym może się wyróżnić CV? 

• przede wszystkim kwalifikacjami wymaganymi na dane stanowisko – ale załóżmy, że nadal pozostaje ich sporo (CV spełniających wymagania),
• plusem może być to, że dana osoba ma wykształcenie kierunkowe – jeśli rzeczywiście ma to znaczenie na danym stanowisku (albo dla rekrutera) = tu nie ma uniwersalnej odpowiedzi, a wojny typu: “studia są bleee” vs. “studia++” bez kontekstu są totalnie pozbawione sensu,

Czasem dostaje pytanie: czy w CV lub portfolio umieszczać kursy, które się ukończyło? Np. na Udemy? 

Nie mogę mówić za wszystkich, ale moim zdaniem słabo to wygląda. To tylko mówi, że kupiłeś/-aś taki kurs, może wygenerowałeś/-aś certyfikat na koniec. Nie mówi za dużo o Twoich umiejętnościach. Lepiej by o Twoich umiejętnościach mówiły projekty. 

Inna sprawa, jeśli to bardziej znaczące (i często dużo droższe kursy). Np. na mnie robi wrażenie wzmianka o Udacity, Front-end Masters czy skończonym bootcampie. To jest coś, co może Cię wyróżnić, ale musisz się jeszcze wybronić. W przypadku bootcampów, jeśli ktoś zbyt często się “przejechał” na takich osoba, wzmianka może zadziałać przeciwnie do zamierzonego efektu. Jeśli ktoś nie kojarzy takich platform jak Udacity czy Front-end Masters – wzmianka również może nie zadziałać w ogóle.

Jakie projekty? 

A o jakie stanowisko pracy się starasz? Jakie umiejętności są wymagane? 

HTML + CSS ? Zakoduj prosty landing page, z wykorzystaniem wyłącznie HTML i CSS (oczywiście możesz wykorzystać CSS Grid’a, Flexbox’a, itd., ale pomiń np. JavaScript) 

Duży nacisk na JavaScript? 

Pokaż swoim projektem, że go znasz. Może to być bardzo prosty, banalny projekt, prezentujący np. jakiś counter? Może skorzystaj z któregoś z pomysłów zaprezentowanych tutaj. 

W ofercie pracy informacja o wymaganej znajomości komunikacji z REST API? 

Skorzystać z jakiegoś fake API (może JSONPlaceholder – Fake online REST API for developers ?). Skomunikuj się z nim (może wykorzystując axiosa? a może w ofercie pracy zaznaczyli konieczność znajomości fetch API?). 

Stwórz prostą aplikację, która pobiera np. w przypadku JSONPlaceholdera:

Posty mają wiele komentarzy. Stwórz więc coś a’la blog. Wyświetl listę postów. Po kliknięciu w post, wyświetl dany post i pod nim listę komentarzy. 

Projekt, w którym chcesz zaprezentować swoje umiejętności w zakresie JavaScriptu, nie musi być zaawansowany od strony UI. Ale warto to zaznaczyć. “Prosty UI + komunikacja z REST API via axios”. Swoje umiejętności w zakresie UI możesz zaprezentować w innym projekcie. To nie jest tak, że każdy projekt ma być “idealny” pod każdym względem. Każdy projekt może prezentować inny zakres posiadanych umiejętności. 

Jednocześnie w portfolio warto mieć jakiś projekt “flagowy”. Albo wiele projektów “flagowych” dla różnych umiejętności. 

W ofercie pracy wymagają React JS? 

Pokaż, że go znasz. Pokaż, że znasz jego kluczowe elementy. Stwórz proste SPA (Single Page Application). Dodaj routing. Komunikację z API. Warto na pewno dodać formularze. Pokaż, że znasz hooks. Jeśli będziesz pracować przy aplikacji – pokaż, że potrafisz taką stworzyć. 

Wymagane Gatsby? GraphQL? 

Pokaż swoim projektem, że je znasz. 

W projekcie wymagają znajomości TDD? 

Stwórz projekt, zgodnie z tym podejście. Dodaj narzędzie do code coverage. 

I nade wszystko dodawaj skrypty! Nie każ rekruterowi zbyt długo myśleć jak odpalić projekt (jeśli zdecyduje się go ściągnąć!). Umieść w Readme.md instrukcję jak to zrobić. Sprawdź czy jest poprawna. Przetestuj ścieżkę jaką będzie musiał wykonać rekruter. Sclonuj projekt z repozytorium. Najlepiej na innej maszynie – unikniesz sytuacji gdy używasz narzędzi, które masz zainstalowane globalnie (a rekruter może ich nie mieć). 

A najlepiej! Zdeploy’uj gdzieś swoją aplikację (AWS S3? Heroku? Google Cloud Platform?). Owszem, rekruter techniczny powinien być w stanie na podstawie kodu stwierdzić jak ona może wyglądać, działać. Ale jeśli CV filtruje osoba, która nie zna się na kodzie, ale za to zwróci uwagę na działające demo? 

Poza tym wierzcie mi, nie każdemu chce się przeglądać aż tak szczegółowo kod aplikacji. Kliknięcie w demo jest zazwyczaj prostsze. I zaostrza ciekawość. Wtedy można podejrzeć, a jak ktoś zrobił, np. funkcjonalność filtrowania w tym przypadku? 

Uwaga! Jeśli mówimy już o aplikacjach, ważnym obszarem jest autoryzacja i autentykacja. Ale! Wtedy w Demo umieść informacje o testowych danych autoryzacyjnych! Żeby nie było tak, że na wejściu Twojej genialnej aplikacji jest panel logowania, ale tylko Ty masz dane potrzebne by się do niej zalogować 😛 Stwórz jakiegoś user’a testowego i podaj jego dane. Albo po prostu wyłącz etap logowania i po prostu pokaż całą aplikację. 

Moim zdaniem, jeśli już tworzysz portfolio, nie umieszczaj tam losowych projektów. Wszystkiego nad czym pracowałeś/-aś. Możesz umieścić link do Githuba. Jeśli komuś będzie zależało – podejrzy inne Twoje prace. W portfolio umieść prace, którymi chcesz się pochwalić. Opisz je pokrótce. Jakie technologie się na nie składają? 

I bądź przygotowany/-a na to, że ktoś Cię o to zapyta 😉 Że ktoś spyta Cię dlaczego zrobiłeś/-aś tak a nie inaczej. Co było największym problemem w tym projekcie i dlaczego? Ale to nie jest egzamin. Możesz powiedzieć, że nie pamiętasz, że akurat ten projekt robiłeś/-aś dawno. 

Uwaga! Zwróć uwagę, że Twoje portfolio to nic innego jak Landing page. Także samo Twoje portfolio także możesz umieścić w swoim portfolio (xD). Wymień technologie jakie wykorzystałeś/-aś w celu jego stworzenia. 

Dodam, że projekt i kod mówią więcej niż tysiąc słów 🙂 

Masz już swoje portfolio? Podzielisz się w komentarzu?

W razie jakichkolwiek pytań, śmiało dawaj znać w komentarzach, na Discordzie, forum lub wysyłając zapytanie na pytania@zanetajazdzyk.pl!

Artykuły w ramach serii

<< JavaScript & algorytmyJavaScript – projekty dla początkujących – cz. I >>