Programowanie
24.09.2025

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

Zbuduj stronę z pełną architekturą i produkcyjnym kodem w jednym miejscu. Skalowalność, szybkość, bezpieczeństwo, SEO/WCAG, testy, CI/CD i dokumentacja gwarantowane.

Co robi ten prompt:

  • Projektuje kompletną architekturę front-endową dla aplikacji internetowej na podstawie specyfikacji użytkownika.

  • Generuje rekomendowaną, skalowalną strukturę katalogów i plików, która jest zgodna z najlepszymi praktykami.

  • Tworzy przykładowe fragmenty kodu dla kluczowych komponentów i logiki komunikacji z API, dostarczając solidny szkielet do dalszej pracy.

full-stackCI/CDarchitekturaspecyfikacja

Treść prompta do skopiowania

Dane wejściowe:
Opis strony:
Grupa docelowa:
Kluczowe funkcjonalności (3-5 głównych):
Preferowany framework/biblioteka JavaScript:

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.

Zadanie (Cel): 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ę.

Format Odpowiedzi: 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()).

Najważniejsze: 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ń.

8

Jak używać tego prompta:

Aby użyć tego prompta, uzupełnij pola w sekcji 'Dane wejściowe'. Kluczowe pola to [Opis strony], [Grupa docelowa], [Kluczowe funkcjonalności] oraz [Preferowany framework/biblioteka JavaScript]. Przykład uzupełnionych danych:

  • Opis strony: Platforma do rezerwacji wizyt u fryzjera
  • Grupa docelowa: Klienci indywidualni z dużych miast
  • Kluczowe funkcjonalności: Kalendarz rezerwacji z wyborem usług, system logowania dla klientów, galeria z pracami fryzjerów, integracja z płatnościami online
  • Preferowany framework/biblioteka JavaScript: Vue

Dobrze wiedzieć

Wygenerowana architektura kładzie nacisk na podejście komponentowe, które jest fundamentem nowoczesnego front-endu. Dzielenie interfejsu na małe, niezależne i reużywalne części (komponenty) znacząco ułatwia zarządzanie złożonością projektu, przyspiesza rozwój i upraszcza testowanie. Taka modularna struktura pozwala na łatwiejszą współpracę w zespole, ponieważ różni deweloperzy mogą pracować nad odrębnymi komponentami bez wchodzenia sobie w drogę.

Po otrzymaniu wygenerowanego szkieletu, kolejnym krokiem powinno być skonfigurowanie środowiska deweloperskiego (np. za pomocą narzędzi takich jak Vite lub Create React App) i zaimplementowanie systemu routingu (np. React Router, Vue Router) w celu połączenia wygenerowanych widoków w spójną aplikację. Następnie warto skupić się na integracji wygenerowanych serwisów API z rzeczywistym backendem lub serwerem mockującym, aby ożywić aplikację danymi.

Sprawdź również