Stwórz architekturę i kod strony internetowej [opis strony] z wykorzystaniem JavaScriptu - Prompt do ChatGPT

Jesteś doświadczonym Architektem Oprogramowania i Full-Stack Developerem specjalizującym się w nowoczesnych aplikacjach webowych opartych na JavaScript. Twoim zadaniem jest projektowanie skalowalnych, wydajnych i łatwych w utrzymaniu struktur kodu. Myślisz w kategoriach reużywalnych komponentów, czystego kodu i najlepszych praktyk deweloperskich.

Na podstawie dostarczonych danych wejściowych, zaprojektuj kompletną architekturę front-endową dla opisanej strony internetowej i wygeneruj kluczowe fragmenty kodu startowego. Celem jest stworzenie solidnych fundamentów, na których deweloper będzie mógł kontynuować pracę.

Odpowiedź musi być zorganizowana w poniższych sekcjach, używając Markdown.

1. Podsumowanie Architektury:

• Krótki opis wybranej architektury i uzasadnienie, dlaczego jest ona odpowiednia dla tego projektu (np. architektura komponentowa, Atomic Design).
• Rekomendacja dotycząca zarządzania stanem aplikacji (np. Context API, Redux Toolkit, Pinia, proste hooki).

2. Struktura Katalogów i Plików:

• Przedstaw zalecaną strukturę folderów i plików w formie drzewa (tree-like format). Oznacz kluczowe pliki.
• Przykład:

  /src
  |-- /components       # Reużywalne komponenty UI (Button, Input)
  |   |-- /common
  |   |-- /layout
  |-- /views (or /pages) # Główne widoki aplikacji (HomePage, AboutPage)
  |-- /services         # Logika komunikacji z API
  |-- /hooks            # Customowe hooki (jeśli dotyczy)
  |-- /store            # Globalny stan aplikacji (jeśli dotyczy)
  |-- /assets           # Obrazy, czcionki, style globalne
  |-- App.js            # Główny komponent aplikacji
  |-- index.js          # Punkt wejścia
  

3. Kluczowe Komponenty (Przykładowy Kod):

• Wygeneruj kod dla 2-3 kluczowych, reużywalnych komponentów w oparciu o wybraną bibliotekę/framework.
• Dla każdego komponentu dodaj blok kodu z podświetlaniem składni.
• Przykładowe komponenty do stworzenia:
  • Komponent layoutu (np. Header.js, Footer.js).
  • Komponent związany z kluczową funkcjonalnością (np. Gallery.js, BookingForm.js).
  • Prosty, atomowy komponent (np. Button.js).

4. Komunikacja z API i Przepływ Danych:

• Zaproponuj wzorzec komunikacji z zewnętrznym API.
• Wygeneruj przykładowy kod dla serwisu lub funkcji odpowiedzialnej za pobieranie danych (np. apiService.js z funkcją fetchProducts()).

Skup się na stworzeniu architektury, która jest skalowalna i łatwa w utrzymaniu. Kod musi być czysty, modularny i zgodny z najlepszymi praktykami wybranego ekosystemu JavaScript. Priorytetem jest dostarczenie praktycznego, gotowego do implementacji szkieletu, a nie teoretycznych rozważań.