Stwórz własną aplikację w React

Żeby przygotować się do kursu, musisz przeczytać ten dokument i postępować zgodnie z instrukcjami. Mamy nadzieję, że podczas naszego wyzwania oswoisz się z środowiskiem programistycznym, poznasz najważniejsze koncepcje i będziesz zmotywowana_y do tego, żeby kontynuować ciężką pracę i naukę! 💪

Stworzysz reużywalne komponenty na podstawie dołączonego designu. Zadanie będzie polegało na stworzeniu i ostylowaniu kilku małych prezentacyjnych komponentów, które będą wykorzystywane w wielu miejscach aplikacji. Tego rodzaju komponenty bardzo często określa się jako Atomy. Zadanie powinno być wykonywane przy pomocy narzędzia Storybook. Więcej na temat sposobu jego wykorzystania dowiesz się podczas kursu.
‍
‍
To zadanie pozwoli Ci m.in.:
✅ Zapoznać się z repozytorium kodu,
✅ Wykorzystać swoją wiedzę z CSS,
JS i React-a w praktyce,
✅ Poznać pracę z biblioteką gotowych komponentów Ract-owych (MUI),
✅ Stworzyć reużywalne komponenty na podstawie dołączonego designu.
‍

Komunikacja z serwerem (API) i prezentowanie otrzymanych danych dla użytkowniczki_a jest kluczową umiejętnością każdego frontend developera 😉 I to na tym skupimy się w tym zadaniu.

To zadanie pozwoli Ci m.in.:
✅ Przeprowadzić komunikację z serwerem przy pomocy REST API,
✅ Wyświetlić w tabeli dane zaciągane z serwera dane,
✅ Obsłużyć stany końcowe zapytania - stan błędu,ładowania oraz braku danych,
✅ Reagować na akcje użytkownika i wykonywać zapytanie DELETE by usuwać rekordy.

Zadanie będzie polegało na utworzeniu elementów wyświetlanych na stronie głównej naszej aplikacji. Wykorzystasz wiedzę z poprzednich tygodni aby stworzyć komponent “organizm”. Jak widzisz duża część tego zadania pokrywa się z zadaniem z poprzedniego tygodnia. Niejednokrotnie tak będzie w pracy zawodowej na stanowisku programisty.
‍
To zadanie pozwoli Ci m.in.:
✅ Utrwalić wiedzę na temat zapytań z poprzedniego zadania,
✅ Poznać i wykorzystać kolejny komponent udostępniany w bibliotece React Mui,
✅ Zarządzać stanem komponentu przy pomocy React.useState,
✅ Zapoznać się bliżej z odświeżaniem pobranych z serwera danych.

Frontend development to nie tylko wyświetlanie danych to także ich gromadzenie poprzez m.in formularze. W tym zadaniu umożliwisz użytkownikowi dodawanie i zapisywanie swoich wydatków i wpływów.

To zadanie pozwoli Ci m.in.:
✅ Nauczyć się pracy z formularzami,
✅ Przygotować metody walidacji danych,
✅ Zarządzać stanem formularza samodzielnie lub przy pomocy biblioteki,
✅ Wykorzystywać zapytania typu POST.

W czasie trwania kariery front end developera przynajmniej raz w wymaganiach zadania pojawi się zdanie “Zaprezentuj dane na wykresie...” 🙂 Przygotujemy Cię do tego! Po ukończeniu tego zadania użytkownik naszej aplikacji będzie mógł zobaczyć podsumowanie swoich operacji na wygodnych wykresach.

To zadanie pozwoli Ci m.in.:
✅ Lepiej poznać sposoby odświeżania danych przy pomocy react-query,
✅ Spróbować swoich sił w renderowaniu wykresów,
✅ Wykorzystać JavaScript do transformacji przychodzących danych,
✅ Zapoznać się z kolejną biblioteką npm - react-chart-2-js.

Ważnym elementem pracy Front End Developera jest dbanie o użytkownika, który korzysta z naszej aplikacji. Robimy to na różnorodne sposoby od dbania o dostępność strony (a11y), jej prędkość na różnej jakości połączeniach internetowych, czy dbając o niski czas potrzebny na “ogarnięcie” ekranu przez użytkownika. W tym zadaniu zmierzysz się z innym ważnym elementem - informacją zwrotną na temat podejmowanych akcji, czyli notyfikacjami.

To zadanie pozwoli Ci m.in.:
✅ Stworzyć własne hooki
✅ Ujednolicić obsługę błędów w przypadku akcji użytkownika
✅ Poznać kolejne komponenty MUI

Zadanie polega na ulepszeniu mechanizmu pobierania danych dla tabeli Ledger aby wspierało paginację przy komunikacji z serwisem, która pozwoli użytkownikowi przeglądać dane w bardziej wydajny sposób.

Do tego momentu, korzystał(aś|eś) z gotowych testów automatycznych do każdego zadania, czas aby się to zmieniło.W tym module rozwiniesz testy automatyczne, które zostały przygotowane do Ledger.widget.jsx i dodasz w nich wsparcie dla paginacji.

W obecnych czasach większość aplikacji front-endowych powstaje w TypeScript, zamiast w JavaScript. TypeScript jest nadzbiorem JavaScript, co oznacza, że zawiera wszystkie funkcje języka JavaScript i dodatkowe funkcje, takie jak statyczne typowanie, interfejsy, klasy i wiele innych. W tym zadaniu przepiszesz komponenty oraz funkcje używane przez Ledger.widget.jsx z JavaScript-u na TypeScript.

W ciągu ostatnich kilku tygodni zbudował_ś solidne podstawy swojej wiedzy z programowania w React. Teraz nadszedł czas, aby przedstawić go światu 🌍 i podjąć kroki, aby odpowiednio zaprezentować Twoje nowe umiejętności 🎓 Poznasz dobre praktyki budowania CV, profilu na LinkedIn czy portfolio. Otrzymasz od nas także Job Tracker, który pomoże Ci lepiej zarządzać swoimi procesami rekrutacyjnymi.