/ react

Kinoplenerowe.info

Chciałbym się podzielić pewnym projektem którego jestem głównym architektem, wykonawcą i designerem.

Serwis https://Kinoplenerowe.info to aplikacja SPA (Single Page Application) oparta o bibliotekę react.js, która ma na celu prezentacje informacji na temat wydarzeń kina plenerowego w Warszawie. Wiele instytucji rządowych, firm, pubów i lokali co roku w stolicy organizuje darmowe pokazy filmów, jednkaże nie ma jednego serwisu, ktory zbierał by wszytskie wydarzenia w jeden serwis.

Aplikacja https://Kinoplenerowe.info jest ciągle mocno ulepszana przez ze mnie, kiedykolwiek mam na to czas i nie jestem zajęty komercyjnymi projekatmi.
Ostatnio coraz częsciej działam i pracuje w technologii React.js, jest to biblioteka JavaScript stworzona przez Facebook do obsługi UI (User Interface). Może poświęce więcej czasu na omówienie tej technologii na blogu. Do tego czasu, krótka informacja techniczna dla zainteresowanych:

  • React v16
  • Apollo klient (graphQL)
  • Redux
  • Webpack 3
  • React Router 4

Główna inspiracją do wyglądu frontendu tego serwisu jest platforma Netflix, (jak już podglądać rozwiązania to u najlepszych). Plakatowa forma prezentacji filmów na serwisie plenerowego kina to według mnie najlepsze rozwiazanie prezentacji wydarzeń
Na dzisiaj serwis odwiedza około 50 / 60 unikalanych userów, ale widać co raz większe zainteresowanie co skłania mnie ku myśleniu, że design sprawdza się pod względem UX / UI.



Dodatkowo przewidziałem tworzenie "mojej listy" przez użytkowników serwisu. Jednakże ze wględu na to, że mamy nowe regulacje prawne (niesławne już RODO) a nie jestem zainteresowy zbieraniem, gromadzeniem i przetwarzaniem danych osobowych zdecydowałem się na zastosowanie local_storage czyli lokalnego zapisu informacji ( w tym wypadku id filmu). Moja lista więc działa po wyłaczeniu komputera, odświerzaniu serwisu aż do momentu usunięcia historii przeglądania użytkownika.

Backend aplikacji to Wordpress który łaczy się z SPA za pomocą GraphQL. Pomimo, że wtyczka wordpressowa nie jest jeszcze w wersji finalnej (na to chwilę wersja 0.8) nie miałem narazie żadnych problemów z implementacją "połacznia" aplikacji ani także z funkcjonowaniem Wordpressa.

Wybrałem wordpress na backend aplikacji z paru powodów, pierwsza wersja strony była zbudowana w wordpressie, więc chciałem zachować rózne wydarzenia i filmy z zeszłego sezonu, zebrała się ogromna baza plakatów i opisów które razem z współpomysłodawcą serwisu tworzymy na rzecz "zabawy" i oryginalnego kontentu serwisu. Druga sprawa to jedank ogromny ekosystem Wordpressa, nie używam go tylko jako CMS ale także do optymalizacji plakatów, automatyzacji wyświetlania i zdejmowania wydarzeń ze strony, importu wydarzeń za pomocą plików CSV.

Jako, że jestem fanem nowych technologii, kinoplenerowe.info jest także wyposażone w serviceworker.js, co sprawia, serwis z pełną pewnością można nazawać Progressive Web App. Progresywne apki łaczą ze sobą najlepsze strony stron internetowych (online) wraz aplikacjami offline. Serwis zostal zaprogramowany aby renderować się szybciej w trybie Lie-Fi (czyli w trybie kiedy nasza sięć komórkowa chwilo nie wyrabia lub ma słaby zasięg). Więcej info o PWA pod tym wpisem

W przyszłości planuje dodać mape kin plenerowych na serwisie, oraz przeniesienie serwisu na aplikacje mobilną za pomocą React Native.

Zachęcam do korzystania z serwisu, wszystkie projekcje opisane na https://Kinoplenerowe.info są darmowe, większość wydarzeń odbywa się po zachodzie słońca.

Pozdarwiam
SpaceGhost