music-map

music-map - Aplikacja webowa, stworzona do łatwej lokalizacji i sortowania festiwali muzycznych na podstawie potrzeb użytkownika.

Uruchomienie lokalne

1/ Kopiujemy repozytorium:

git clone https://github.com/Jedrzej1940518/ztpai2023-music-map.git

2/ przechodzimy do folderu ztpai2023-music-map

3/ tworzymi plik .env zgodnie z .env_example - można użyć mojego API key do google maps wysłanego przez teams.

4/ uruchamiamy aplikacje:

Linux (Na mojej maszynie pierwsze budowanie ~3 minut):

sudo docker-compose build && sudo docker-compose up

Windows (Na mojej maszynie pierwsze budowanie ~20 minut):

Uruchamiamy docker desktop

docker-compose build && docker-compose up

5/ Przy pierwszym uruchomieniu aplikacji, baza danych zostanie zainicjalizowana plikiem “init.sql”. Na podstawie bazy danych, Sequelize utworzy nasze modele. Ponieważ docker nie ma natywnego mechanizmu pozwalającego nam zsynchronizować ten proces, po inicjalizacji bazy danych powinniśmy zrestartować kontener backend!. Mamy wtedy pewność, że baza została zainicjalizowana przed próbą wygenerowania modeli przez Sequelize. Wymagane to jest tylko w przypadku pustej bazy danych. Kolejne uruchomienia aplikacji powinny przebiegać bez problemu

Wymagania funkcjonalne:

1. Integracja z Google Maps: Wyświetlanie mapy z zaznaczonymi lokalizacjami festiwali muzycznych.

2. Filtracja Datowa: Możliwość wyboru zakresu dat festiwali za pomocą suwaka czasu (sliding timeline).

3. Filtracja według Gatunku Muzycznego: Opcja filtrowania festiwali na podstawie ich gatunku muzycznego.

4. Zapisywanie Ulubionych: Umożliwienie użytkownikom zapisywania festiwali do listy ulubionych.

5. Filtracja Tylko Ulubione: Możliwość filtrowania mapy, aby pokazywała tylko ulubione festiwale.

6. Proces Logowania i Rejestracji: System logowania i rejestracji dla użytkowników, umożliwiający personalizację i zapisywanie ustawień.

7. Interakcja z Użytkownikiem: Funkcjonalności umożliwiające użytkownikom interakcję z mapą, np. klikanie na festiwale dla uzyskania szczegółowych informacji.

8. Responsywność: Aplikacja powinna być dostosowana do różnych rozmiarów ekranu i urządzeń.

9. Zabezpieczenia: Zapewnienie bezpieczeństwa danych użytkownika i zabezpieczeń przed nieautoryzowanym dostępem.

Technologie:

Zdecydowaliśmy się na architekturę klient-serwer. Backend jest napisany obiektowo i korzysta z techniki ORM.

Frontend (klient) - React.js

Backend(serwer) - Express.js, PostgreSQL

Technologie wspierające:

Docker - uruchamianie serwisów Frontend, Backend i Database

Sequelize - generowanie modeli na podstawie tabel PostgreSQL

Swagger - generowanie dokumentacji API

Używane biblioteki:

Frontend

fontawesome - gwiazdka “ulubione”

validator - walidacja formatu email

multi-range-slider-react - suwak z datą

react-google-maps - ułatwienie pracy z API google maps

Backend

cors - obsługa cors

jswonwebtoken - generowanie i weryfikacja tokenów JWT

cookie - obsługa cookies do przechowywania tokenu JWT

cookie-parser - parsowanie cookies

pg - do debuggowania

Dokumentacja API (Swagger):

Screeny aplikacji:

Widok domyślny

Menu filtrowania po gatunkach muzycznych

Menu Logowania

Menu rejestracji

Test responsywności - wszystkie elementy są widoczne i łatwo obsługiwalne