Warning! netlify limits some of the functionalities(random picture, search)
Uwaga! netlify ogranicza niektóre funckcjonalności(losowy obraz, wyszukiwanie)
- Clone github repository
- npm install
- npm start
I used react router to enable navigating between diferent pages. Each page with content uses custom hook and request required data
eg. useDogList hook gets breeds & subBreeds list and pass to DogList component
Axios http-client was used for http requests as it will be more easy to customize request options in the future and improve the app
I added i18 next translation to show i am aware of this library and importance of internationalization process.
I used svg icons manually downloaderd from font-awesome website
I used form tag to enable submit on ENTER click
I added simple built-in validation with input required attribute
I used separate css-module for each component to support style encapsulation.
I used css-variables to collect colors in one place. They may be changed easily
Zastosowałem react-router do zmiany stron, strony z danymi pobierają je za pomocą custom-hooków
np useDogList hook pobiera liste ras i pod-ras psów. Następnie dane wyświetlane są w komponencie DogList
Użyłem http-clienta żeby łatwiej wysyłać żądania do API oraz umożliwić zmianę opcji żądań(np. nagłówków) w przyszłości
Dodałem tłumaczenia przez biblotekę i18-next żeby pokazać że kojarzę temat internacjonalizacji
Użyłem ikon w formacie svg pobranych ze strony font-awesome
Użyłem html tagu form żeby w prosty sposób umożliwić wysyłanie submitu po kliknęciu ENTER
Dodałem prostą validację do imputu za pomocą atrybutu required
Użyłem css modules żeby rozdzielić style do odzielnych plików co zapewnia enkapsulację styli
Użyłem zmiennych css żeby w prosty sposób można było edytować kolory aplikacji