fbpx

Wyzwanie: napisz serwis wideo cz. 1

Opublikowane przez Patryk Omiotek w dniu

Szkoła Reacta - wyzwanie 1

Przygotowałem dla Was pierwsze wyzwanie – zadaniem jest napisanie serwisu wideo zbliżonego do YouTube. W piątek, sobotę i niedzielę, umieszczę w tym wpisie film wideo z proponowanym rozwiązaniem.

To jak podejmujesz wyzwanie? 🙂 Swoim rozwiązaniem możesz podzielić się w grupie „Wymiataj w JS” na Facebooku. Jeśli masz pytania lub problemy z tym zadaniem, to również zadawaj śmiało pytania na grupie lub naszym Discordzie. I pamiętaj – nie ma głupich pytań, są tylko głupie odpowiedzi 🙂

Opis zadania

Stwórz za pomocą Reacta serwis wyświetlający Twoje ulubione filmy wideo. Na start możemy wykorzystać filmiki z YouTube albo Vimeo.

Z każdym nowym dniem, po moich podpowiedziach prawdopodobnie będziesz chciał/chciała refaktorować swój projekt. Nie krępuj się – nawet jest to wskazane 🙂

Założenia podstawowe – dane, czyli listę filmów będziemy trzymali w tej części w lokalnym pliku database.json. Później zamienimy to na komunikację z bazą danych poprzez REST API.

Wymagania

  • Stwórz nowy projekt za pomocą create-react-app
  • Pomyśl nad strukturą plików i katalogów – na razie luźno, później będziemy ją zmieniać
  • Stwórz plik database.json, który będzie zawierał listę obiektów:

[
  {
    "title": "Mój ulubiony filmik 1",
    "description": "Opis mojego ulubionego filmiku",
    "video_url": "Adres URL do filmu np.: https://youtu.be/Bey4XXJAqS8"
  },
  {
    "title": "Mój ulubiony filmik 2",
    "description": "Opis mojego ulubionego filmiku 2",
    "video_url": "https://youtu.be/Bey4XXJAqS8"
  }
]
  • Stwórz komponent do wyświetlania pojedyńczego filmu np. Video
  • Stwórz komponent, który będzie wyświetlał listę wideo i korzystał z komponentów Video np. może być to komponent VideoList.
  • Osadź komponent VideoList w głównej aplikacji czyli w App
  • W komponencie Video możesz skorzystać z narzędzia do generowania adresu URL do miniaturek: np.: http://www.get-youtube-thumbnail.com/
  • Do wyświetlania wideo wykorzystaj albo player HTML5 lub inną bibliotekę (np. Video.jsPlyr.io)

Pamiętaj, aby w tym zadaniu postarać się nie korzystać z routingu – tym zajmiemy się w innej części.

Filmy z podpowiedziami zostaną umieszczone w tym wpisie:

  • 25.09.2020 (piątek) – godz. 10:00
  • 26.09.2020 (sobota) – godz. 10:00
  • 27.09.2020 (niedziela) – godz. 10:00

Powodzenia! 🙂

Przykłady rozwiązania:

Część 1 (25.09.2020)

Część 2 (26.09.2020)

Część 3 (27.09.2020)

Kategorie: Wyzwania

Patryk Omiotek

Programuję w JavaScript po stronie przeglądarki i serwera, chętnie dzielę się wiedzą jako prelegent i trener IT oraz jestem tzw. rekruterem technicznym. Oznacza to, że podczas rozmów rekrutacyjnych sprawdzam techniczne umiejętności kandydatów ubiegających się na stanowiska Junior, Mid i Senior developerów.