Projekt do portfolio Frontend Developera - co powinien zawierać

Po opanowaniu takich języków i narzędzi, jak HTML, CSS, JS, React oraz Redux, pewnie nie tylko rozglądasz się za pierwszą pracą jako Junior Frontend Developer, ale także szukasz pomysłu na projekt do portfolio. 

Taki projekt powinien być Twoją wizytówką, powinien pokazywać jakość Twojego kodu oraz demonstrować to, czego się nauczyłeś. Właśnie dlatego postanowiłem stworzyć ten artykuł, w którym naprowadzę Cię na to, co powinien zawierać porządny projekt do portfolio, a na końcu podam kilka pomysłów na jego realizację.

Bądź niczym przedsiębiorca!

Na samym początku musisz się zabawić w przedsiębiorcę. Przedsiębiorcą jest osobą, która szuka rozwiązań problemów w otaczającym go świecie. Zapytaj znajomych, rodziców, czego im brakuje, albo zastanów się jaki problem możesz rozwiązać za pomocą swoich umiejętności. Chodzi o to, żeby Twoja mini aplikacja rozwiązywała realny problem biznesowy. 

To już będzie pierwszy krok do sukcesu! Pamiętaj jednak, że zgodnie z tym, co mówił sam Steve Jobs: “To me, ideas are worth nothing unless executed”, oprócz samego pomysłu, równie ważny jest sposób jego realizacji. Dlatego poniżej przedstawię elementy, które moim zdaniem powinny znaleźć się w portfolio od strony kodu i implementacji…

Routing i Lazy Loading

Twoja aplikacja powinna mieć kilka podstron. Wykorzystaj, więc bibliotekę react-router-dom, stwórz routing aplikacji, który pozwoli na przełączanie się pomiędzy komponentami w zależności od linku w adresie strony, bez przeładowania strony.

<Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
        <Route path="/">
          <Home />
        </Route>
</Switch>

Podczas projektowania strony należy również zwrócić uwagę na prędkość ładowania stron. Dzięki podzieleniu strony na lazy moduły, dany moduł pobierany jest dopiero wtedy, gdy użytkownik wejdzie na stronę. Moduły dzięki temu dociągane są dynamicznie, co podwyższa prędkość ładowania. Leniwe moduły powinny być renderowane w komponencie Suspense, który odpowiada za wyświetlanie innego komponentu w trakcie ładowania. Do komponentu Suspense możemy podać routing naszej aplikacji lub wiele “leniwych” komponentów.

import React, {Suspense} from "react"
const OtherComponent=React.lazy(() => import("./OtherComponent"))
const MyComponent= () => {
    return (
        <Supsense fallback={<div>Loading...</div>}>
            <OtherComponent/>
        </Supsense>
    )
}

Obsługa stanów podczas akcji

Niektóre akcje podczas działania aplikacji wymagają pobrania danych z zewnętrznego API oraz wymagają obliczeń, których wykonanie może zająć dość dłuższą chwilę... Pamiętaj, aby podczas wykonywania takich operacji, poinformować użytkownika, że coś się dzieje w tle za pomocą loadera. 

Niektóre z takich akcji może się też nie udać. Błędy nie tylko trzeba obsłużyć w kodzie, ale też należy poinformować użytkownika, co poszło nie tak. Możesz wyświetlić notyfikację z informacją o błędzie.

Hooki useState, useEffect, useMemo, useCallback

W aplikacji zademonstruj, że prawidłowo potrafisz używać hooków takich jak: useState, useEffect, useMemo i useCallback. Podczas pokazywania swojej aplikacji na rekrutacji, możesz zabłysnąć poprzez wytłumaczenie, dlaczego użyłeś rzadziej wykorzystywane hooki — useMemo i useCallback. Pokaż, że wiesz jak pracować ze skomplikowanymi obiektami w hooku useState i że umiesz pobierać dane podczas pierwszego ładowania komponentu hookiem useEffect.

ContextAPI

ContextAPI Reacta to potężne narzędzie, które w niektórych miejscach może nawet całkowicie zastąpić Reduxa. Plusem tego rozwiązania jest to, że jest to integralna część Reacta.js, a nie niezależna biblioteka. Tak więc, wykorzystując contextAPI, nie musimy doinstalować innych paczek npm. Najprostszym przykładem wykorzystania contextAPI jest stworzenie ThemeProvidera, czyli zmiennej przechowującej kontekst. Pokaże to nie tylko, że umiesz korzystać z omawianego narzędzia, ale również, że potrafisz tworzyć dynamiczne style dla komponentów.  Stwórz komponent do przełączania pomiędzy dark i light mode, a następnie projektuj komponenty, tak aby korzystały z theme. 

Redux

W swoim projekcie możesz użyć również najnowszych technologii, np. czyli zgodnie z zaleceniem twórców, powinniśmy użyć osobnej biblioteki do obsługi Reduxa — Redux Toolkita. 

Redux Toolkit został zbudowany, wykorzystując najlepsze praktyki, upraszcza pisanie aplikacji z wykorzystaniem Reduxa. Rozwiązuje on najczęstsze problemy, które były bolączką Reduxa, czyli:

• Konfigurowanie Redux Store-a było zbyt skomplikowane,
• Dba o to, by Redux był użyteczny, więc należy dodać wiele paczek,
• Redux wymaga zbyt dużo ‘boilerplate code’,

W swojej karierze zawodowej oczywiście możesz natrafić na implementację “czystego Reduxa” w projekcie, ale pokaż, że nie żyjesz przeszłością i legacy kodem, a uczysz się najnowszych standardów i aktualnych technologii.

Podział plików i Clean Code

React daje nam swobodę w tworzeniu i podziale plików, tak więc możesz w pełni dostosować architekturę aplikacji pod siebie. Jednak drugą stroną modelu jest fakt, iż łatwo zaprojektować nieefektywny kod aplikacji, w którym znajdować się będzie wiele anti-patternów i złych rozwiązań. 

Dlatego proponuję Ci podział komponentu tak, aby plik component.jsx opisywał sposób wyświetlania omawianego komponentu, logika była zawarta w custom hooku (w pliku useComponent.js), a style umieszczone w pliku component.scss. 

Dzięki temu zachowamy czystość kodu i łatwo odnajdziemy się w plikach, jeżeli natkniemy się na buga. Od razu będziemy wiedzieli, czy wynika on z logiki, wyświetlania czy stylowania komponentu i w odpowiednim pliku będziemy mogli od razu wprowadzić poprawki.

API lub JSON-serwer

Częstym problemem front-end developerów jest konieczność skorzystania z API w swoim projekcie (co często może przysparzać wiele problemów i kłopotów). Wówczas możesz wykorzystać jedno z publicznych API lub skorzystać z narzędzia json-serwer, które pozwala nam na mockowanie funkcjonalności back-endowej. 

Jeżeli skorzystasz z publicznego API, stwórz widoki i wyświetlaj w nich dostępne dane. To pokaże, że potrafisz korzystać z dokumentacji zewnętrznych i chętnie korzystasz z cudzych rozwiązań. 

Narzędzie json-serwer pozwala nam natomiast na stworzenie prostego REST API na nasze własne potrzeby (dzięki temu będziemy mieli pełną możliwość customizacji i modyfikacji zachowań).

GIT

Jedną z ważniejszych umiejętności każdego programisty jest wykorzystanie systemu kontroli wersji — GIT. Podczas implementacji aplikacji, ćwicz jego używanie, commituj i wysyłaj swój kod do zdalnego repozytorium, twórz gałęzie, merguj, baw się GIT Flowem — tak, aby się z nim maksymalnie oswoić.

TypeScript (opcjonalnie)

TypeScript coraz częściej pojawia się w mile widzianych wymaganiach na stanowisko junior frontend developera. Niewątpliwie użycie TypeScriptu w projekcie, zwiększy Twoje szanse na zatrudnienie. W uproszczeniu można powiedzieć, że jest to “JavaScript na sterydach”. Omawiany język pozwala bowiem na zabezpieczenie aplikacji przed niedoskonałościami jak np. możliwość wykorzystywania modułów i interfejsów. Dodatkowo system typowania, na którym opiera się TS, umożliwia wykrywanie bugów już podczas pisania aplikacji.

Na koniec...

Na zakończenie, zgodnie z wcześniejszą obietnicą, chciałbym podzielić się z Tobą pomysłami na projekty do portfolio. Wybierz najciekawszą pozycją i postaraj się zaimplementować ją w kodzie! 

Pomysł nr 1

Aplikacja do rezerwacji stolika w restauracji na dany termin i złożenia zamówienia do tej rezerwacji.

Pomysł nr 2

Aplikacja do prowadzenia ewidencji użytkowania pojazdów w firmie. W firmach zajmujących się handlem pracuje wiele kierowców i przedstawicieli handlowych. Każdy z nich może wziąć dowolny pojazd, często pojazd jest u mechanika i istnieje konieczność skorzystania z innego. Stwórz aplikację, która przechowa i wyświetli dane kto i w jakim terminie korzysta z pojazdu. Kto zarezerwował pojazd na dany dzień, gdzie pojedzie, które pojazdy są u mechanika. Jaki przebieg ma pojazd i czy nie potrzebuje naprawy.

Pomysł nr 3

Aplikacja do obserwowania swojego portfolio inwestycyjnego. Aplikacja umożliwia dodawanie aktywa i ceny jego zakupu. Następnie dzięki wykorzystaniu API, oblicza obecny zwrot z inwestycji, obecną wartość aktywa i całkowity zwrot z inwestycji. Aplikacja pozwala również, na sprawdzenie historii swoich inwestycji i wygenerowanie raportu z danego okresu inwestycyjnego.

Oryginał tekstu możesz przeczytać tutaj.