Projekt realizujący stronę fikcyjnej pizzerii w formie Single Page Application (SPA).
Stos technologiczny:
- HTML5
- CSS3
- JavaScript (ES6+)
- Node.js (serwer do uruchomienia aplikacji)
- Sklonuj repozytorium:
git clone https://github.com/PoProstuWitold/pizzeria pizzeria- Przejdź do folderu
pizzeria
cd pizzeriaZ racji, że aplikacja używa dynamicznego importowania komponentów oraz History API, wymagane jest uruchomienie jej z poziomu serwera. W tym celu należy użyć polecenia node server.mjs będąc w głównym katalogu projektu. Wymagane jest środowisko Node.js. Aplikacja była realizowana pod ten sposób uruchamiania.
Aplikacja posiada też obraz dockerowy, który można odpalić wykonując kolejno poniższe polecenia:
docker buildx b -t poprostuwitold/pizzeria .docker run -p 3005:3005 -–pid=host -it poprostuwitold/pizzeriaJeśli powyższa komenda z jakiegoś powodu nie zadziała można użyć (na niektórych urządzeniach działają obie, a na innych tylko ta poniższa):
docker run --network=host --pid=host -it poprostuwitold/pizzeriaW obu przypadkach aplikacja będzie dostępna pod adresem localhost:3005 lub TWOJE_IPv4:3005.
server.mjs - Prosty serwer Node.js serwujący aplikację na porcie 3005.
src - Główny katalog. Znajdują się tu foldery: assets (obrazki), css (arkusze stylów), js (pliki JavaScript) oraz plik index.html.
Dockerfile i .dockerignore - Pliki potrzebne do zbudowania i uruchomienia obrazu dockerowego.
"/" - Strona startowa aplikacji. Pseudolosowo generowane recenzje.
"/o-nas" - Informacje o autorze.
"/menu" - Menu restauracji.
"/galeria" - Dynamicznie generowana galeria z użyciem API serwisu Pixabay przy pomocy Fetch API oraz znacznika HTML dialog, który na Can I Use ma ponad 96% wsparcia. W przypadku błędu z wczytaniem obrazków, renderowany jest błąd 400 Bad Request.
"/kontakt" - Informacje kontaktowe oraz mapa Google z lokalizacją pizzerii.
"/rezerwacja" - Szczegółowo walidowany formularz rezerwacji oraz lista wszystkich rezerwacji użytkownika z możliwością ich edycji oraz usunięcia. Zapisywane jako tablica w localStorage z użyciem JSON.parse() oraz JSON.stringify().
"/*" - Strona z błędem 404 Not Found.
Wszystkie obrazki są na licencji Pixabay, czyli w skrócie dozwolone jest używanie tych obrazków za darmo bez wzmianki autorów, aczkolwiek zabronione jest wykorzystywanie ich w celach komercyjnych.