Zaprojektuj architekturę i napisz kod strony internetowej [opis strony] w JavaScripcie - Prompt do ChatGPT
Zamień pomysł w produkcyjną aplikację: kompletna architektura, gotowy kod, CI/CD, bezpieczeństwo, testy, SEO, wdrożenie, KPI i jasny plan startu.
Co robi ten prompt:
- Generuje kompletną architekturę front-endową dla aplikacji webowej na podstawie zdefiniowanych przez użytkownika wymagań. - Tworzy kod startowy dla kluczowych komponentów, zarządzania stanem i routingu, zapewniając solidne fundamenty dla projektu. - Pełni rolę wirtualnego architekta oprogramowania, rekomendując technologie i najlepsze praktyki do budowy skalowalnych aplikacji.
Rola i Kontekst: Jesteś ekspertem Full-Stack Developerem i Architektem Oprogramowania z ponad 15-letnim doświadczeniem w tworzeniu skalowalnych aplikacji webowych w ekosystemie JavaScript. Twoim zadaniem jest myślenie systemowe, przewidywanie problemów i projektowanie czystych, modułowych rozwiązań, które są łatwe w utrzymaniu i rozbudowie.
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 pod dalszy rozwój projektu, zgodnych z najlepszymi praktykami branżowymi.
Format Odpowiedzi: Odpowiedź musi być zorganizowana w poniższych sekcjach, używając nagłówków Markdown.
1. Analiza i Rekomendacja Technologiczna
Krótko uzasadnij wybór rekomendowanego frameworka/biblioteki (lub Vanilla JS) w kontekście wymagań projektu. Wskaż 2-3 kluczowe biblioteki pomocnicze (np. do zarządzania stanem, routingu, zapytań HTTP) i wyjaśnij ich rolę.
2. Architektura Aplikacji (Struktura Katalogów)
Przedstaw rekomendowaną strukturę katalogów projektu w formie drzewa. Opisz krótko przeznaczenie każdego kluczowego folderu (np. src/components, src/pages, src/services, src/hooks).
/src
/api
/components
/common
/layout
/hooks
/pages
/store
/utils
App.js
index.js
3. Kluczowe Komponenty (Przykładowy Kod)
Wygeneruj kod dla 3-4 kluczowych komponentów, które stanowią rdzeń aplikacji (np. Header, TaskItem, TaskList). Umieść każdy fragment kodu w osobnym, odpowiednio oznaczonym bloku kodu (np. // src/components/layout/Header.js).
4. Zarządzanie Stanem Aplikacji
Zaproponuj strategię zarządzania stanem (np. Context API, Redux Toolkit, Zustand, Pinia). Przedstaw prosty przykład implementacji (np. definicja store lub slice) do obsługi jednej z głównych funkcjonalności.
5. Routing (Nawigacja)
Zdefiniuj podstawową konfigurację routingu aplikacji, pokazując jak zmapować ścieżki URL na konkretne komponenty/strony (np. /, /login, /dashboard).
6. Instrukcje Uruchomieniowe
Wylistuj krok po kroku komendy terminala niezbędne do zainicjowania projektu, instalacji zależności i jego uruchomienia lokalnie.
Najważniejsze: Skup się na modułowości i skalowalności. Struktura plików i komponentów musi być intuicyjna i gotowa na rozbudowę o nowe funkcjonalności. Wygenerowany kod musi być czysty, dobrze skomentowany w kluczowych miejscach i zgodny z nowoczesnymi standardami ES6+. Zaproponuj architekturę, która minimalizuje "boilerplate" i pozwala na szybkie rozpoczęcie pracy deweloperskiej.
Jak używać tego prompta:
Należy uzupełnić pola w nawiasach kwadratowych w sekcji 'Dane wejściowe', takie jak [Szczegółowy opis strony] czy [Główne funkcjonalności]. Podaj konkretne informacje, aby model mógł wygenerować precyzyjną odpowiedź. Przykład uzupełnionych danych: Szczegółowy opis strony: Prosta aplikacja To-Do z logowaniem użytkownika i synchronizacją z chmurą, Preferowany framework/biblioteka JavaScript: React, Grupa docelowa: studenci.
Dobrze wiedzieć
Ten prompt jest idealny do szybkiego prototypowania pomysłów lub rozpoczynania nowych projektów z dobrze zorganizowaną strukturą. Pozwala zaoszczędzić czas na początkowej konfiguracji, umożliwiając deweloperom skupienie się bezpośrednio na logice biznesowej. Zaproponowana architektura kładzie nacisk na modułowość i rozdzielenie odpowiedzialności (separation of concerns), co jest kluczowe dla długoterminowej łatwości utrzymania projektu i współpracy w zespole. Pamiętaj, że oprócz wygenerowanej struktury technicznej, warto od samego początku uwzględnić wymagania niefunkcjonalne, takie jak dostępność (a11y), internacjonalizacja (i18n) czy bezpieczeństwo. Strukturę projektu można łatwo rozszerzyć o dedykowane katalogi, np. src/locales na pliki z tłumaczeniami, co ułatwi wdrożenie tych aspektów w późniejszym etapie rozwoju aplikacji.