SkillShop jest aplikacją stworzoną by umożliwić wykwalifikowanym specjalistom oraz ich klientom szybką i pozbawioną pośredników komunikację. Każdy z zalogowanych użytkowników może nieodpładnie dodać nieograniczoną liczbę ogłoszeń lub skontaktować się z firmami oraz indywidualnymi fachowcami z całej Polski.

https://infoshareacademy.github.io/jfddr2-unasdziala-app/

Projekt SkillShop został utworzony przy pomocy biblioteki React (strona front-endowa) oraz platformy Firebase (strona back-endowa). Na aplikację składają się poniższe komponenty:

-> App
--> Navbar
--->SearchBar
---> SignUpUser
---> SignIn User
---> AddService
---> UserPanel
----> UserService
-----> ModifyService
--> Main
---> LandingPage
---> ServiceList
----> Service
-----> ServiceDetails
--> Footer

1 App - Komponent root'owy, stanowiący kontener dla wszystkich pozostałych. Poza tym są w nim zdefiniowane wszystkie stany (patrz pkt 3) oraz odbywa się w nim pobieranie danych - listy usług przechowywanych za pomocą usługi Cloud Firestore (patrz pkt 2).

2 Navbar - Komponent nagłówka. Zawiera logo (stanowiące również odnośnik, który po kliknięciu przenosi użytkownika do strony startowej aplikacji), pasek umożliwiający wyszukiwanie konkretnych usług oraz przyciski, które po naciśnięciu umożliwiają poruszanie się po głębiej zagęszczonych komponentach aplikacji. Przed zalogowaniem się użytkownik widzi przyciski "Rejestracja" oraz "Logowanie". Tak jak ich nazwy wskazują odsyłają one komponentów umożliwających założenie konta lub autentykację osoby korzystających ze SkillShop. Po zalogowaniu się przyciski "Rejestracja" oraz "Logowanie" znikają, a pojawiają się kolejne: "Dodaj usługę", "Panel Użytkownika" oraz "Wyloguj użytkownika". Ich działanie zostanie opisane poniżej.

2.1 SearchBar - Komponent zawiera input oraz przycisk wyszukania. Po naciśnięciu przycisku użytkownik jest odsyłany do komponentu ServiceList, który wyświetla listę usług pobranych z bazy danych ale przefiltrowanych na podstawie wartości wpisanej w input.
2.2 AddService - Komponent zostaje wyrenderowany po naciśnięciu przycisku "Dodaj usługę". Zawiera szereg inputów odpowiadających za poszczególne pola dokumentu kolekcji "Services" w firebasie (patrz pkt 2). Za każdym razem kiedy dany input jest wypełniany równocześnie update'owany jest stan "form" w komponencie. Stan ten odwzorowuje dokument kolekcji services w Cloud Firestore. Z chwilą naciśnięcia przycisku stan "form" jest przekazywany jako argument do metody "add", która dodaje nowy dokument do ww. kolekcji.
2.3 UserPanel - Wyświetla te usługi które zostały dodane przez zalogowanego obecnie użytkownika. Są one filtrowane na podstawie pola "user" w dokumentach kolekcji.
2.3.1 UserService - Komponent umożliwiający modyfikacje lub usunięcie usługi dodanej przez zalogowanego użytkownika. Zawiera dwa przyciski. Po naciśnięciu przycisku "modyfikuj" renderowany jest komponent "ModifyService". Po naciśnięciu przycisku "usuń" wykonywana jest metoda "delete" usuwająca service z kolekcji na Firebase.
2.3.1.1 ModifyService - Komponent w wyglądzie i działaniu podobny do AddService (w istocie wykorzystujący te same klasy CSS). Jedyna znacząca różnica polega na tym, że po naciśnięciu przycisku wykonywnana jest metoda "update" (zamiast "add"), która modyfikuje istniejące pola dokumentu w Firestore.

3. Main - Komponent, w którym wyświetlana jest większość informacji na stronie. Służy w istocie za kontener dla komponentów LandingPage i ServiceList. Zawiera również znacznik Switch, zawierający route'y dla ww. komponentów.

3.1 LandingPage - Stanowi niejako "stronę startową". Składają się na niego "kafelki", umożliwające po naciśnięciu przeniesienie do komponentu ServiceList z listą usług wyfiltrowaną na podstawie odpowiedniej kategorii.
3.2 ServiceList - Podobnie jak "UserPanel" wyświetla listę usług na podstawie kolekcji Services. Jest widoczny również dla niezalogowanych użytkowników. Usługi mogą zostać wyświetlone wszysktie (bez żadnych filtrów), wyfiltrowane na podstawie kategorii lub na podstawie wartości wpisanej w input komponentu SearchBar.

3.2.1 Service - Komponent zawierający podstawowe informacje dot. danej usługi. Zawiera button "Szczegóły" odsyłający do komponentu ServiceDetails.
3.2.1.1 ServiceDetails Komponent zawierający szczegółowe informacje dot. danej usługi. Zalogowanym użytkownikom umożliwia wyświetlenie danych kontaktowych do osoby, która umieściła ofertę w aplikacji. Niezalogowanych odsyła do okien rejestracji lub logowania.

4 Footer - Stopka strony aplikacji.

Od strony back endu aplikacja SkillShop korzysta z funkcjonalności platformy Firebase. Zapewnia ona przede wszystkim możliwość przechowywania danych w Cloud FireStore oraz umożliwia zaimplementowanie mechanizmów rejestracji i autentykacji użytkowników.

1. Autentykacja - Odbywa się na podtawie emaila i hasła podanych przez użytkowników.Odpowiednie mechanizmy są w całości obsługiwane przez FIREBASE i zapewniają bezpieczeństwo oraz zgodność z zasadami ochrony danych osobowych.

2. Cloud Firestore - to usługa umożliwia tworzenie struktur danych zwanych "kolekcjami", zawierających pomniejsze obiekty zwane jako "dokumenty". Dla celów aplikacji SkillShop stworzono pojedynczą kolekcję o nazwie "Services". Każdy dokument kolekcji posiada następujące pola:
   
   

   title: Tytuł ogłoszenia
   category: Kategoria usług
   fullName: Imię i nazwisko osoby dodającej ogłoszenie
   email: adres email ww. osoby
   phoneNumber: numer telefonu ww/ osoby
   city: miasto w jakim świadczone są usługi
   address: adres kontaktowy
   description: krótki opis świadczonych usług
   detailDescription: dokłądny opis świadczonych usług,
   price: cena usług
   user: pole wskazujące na użytkownika, który dodał service
   date: data dodania service'u
   

Maciej Paluszyński
Bartosz Leśniewski
Liliia Saleck
Janusz Różański