Projekt: Marsjański Dashboard Kolonii

Gratulacje - dotarłeś do finałowego projektu modułu "Stan i zdarzenia"! W poprzednich lekcjach poznałeś

useState

, obsługę zdarzeń, przepływ danych,

useEffect

i kontrolowane formularze. Teraz połączysz całą tę wiedzę w jedną spójną aplikację.

Twoim zadaniem jest zbudowanie Marsjańskiego Dashboardu Kolonii - interaktywnego panelu zarządzania bazą na Marsie. Ra, twój kosmiczny przewodnik, zebrał wymagania od centrum dowodzenia. Misja: napisać aplikację React, która monitoruje i kontroluje kluczowe systemy kolonii.

Co budujesz

Dashboard składa się z czterech połączonych sekcji:

1. Panel systemów kolonii - monitory atmosfery, zasilania, wody i temperatury
2. Centrum sterowania - przyciski do ręcznej regulacji parametrów
3. Formularz rejestracji astronautów - kontrolowany formularz do dodawania załogi
4. Dziennik zdarzeń - automatyczny log monitorowany przez

   useEffect

Wszystkie sekcje muszą ze sobą współpracować - zmiany w jednym panelu wpływają na inne.

Wymagania techniczne

1. Wiele stanów (useState)

Każdy system kolonii ma własny stan:

1const [atmosphere, setAtmosphere] = useState(78);
2const [power, setPower] = useState(85);
3const [water, setWater] = useState(62);
4const [temperature, setTemperature] = useState(-10);
5const [crew, setCrew] = useState([
6  { id: 1, name: 'Anna Kowalska', role: 'Komandor' },
7  { id: 2, name: 'Jan Wiśniewski', role: 'Inżynier' }
8]);

2. Obsługa zdarzeń

Każdy system ma przyciski do regulacji. Pamiętaj o zakresach bezpiecznych:

1const handleAtmosphereBoost = () => {
2  setAtmosphere(prev => Math.min(100, prev + 5));
3  addLogEntry('Zwiększono poziom O2 o 5%');
4};

3. Kontrolowany formularz rejestracji

Formularz do dodawania nowych astronautów do załogi:

1const [newCrew, setNewCrew] = useState({ name: '', role: '' });
2
3const handleCrewChange = (event) => {
4  const { name, value } = event.target;
5  setNewCrew(prev => ({ ...prev, [name]: value }));
6};
7
8const handleCrewSubmit = (event) => {
9  event.preventDefault();
10  if (!newCrew.name.trim()) return;
11  setCrew(prev => [...prev, { id: Date.now(), ...newCrew }]);
12  setNewCrew({ name: '', role: '' });
13};

4. useEffect - monitoring i auto-aktualizacje

Monitoring stanu krytycznego:

1useEffect(() => {
2  if (power < 20) {
3    addLogEntry('ALARM: Krytycznie niski poziom zasilania!');
4  }
5}, [power]);

Symulacja auto-degradacji z cleanup:

1useEffect(() => {
2  const interval = setInterval(() => {
3    setWater(prev => Math.max(0, prev - 1));
4    setTemperature(prev => prev - 0.5);
5  }, 5000);
6
7  return () => clearInterval(interval);
8}, []);

5. Lifting state up - wspólny dziennik zdarzeń

Stan dziennika i funkcja

addLogEntry

żyją w komponencie głównym i są przekazywane w dół:

1function MarsColonyDashboard() {
2  const [log, setLog] = useState([]);
3
4  const addLogEntry = (message) => {
5    setLog(prev => [
6      { id: Date.now(), time: new Date().toLocaleTimeString(), message },
7      ...prev
8    ].slice(0, 20));
9  };
10
11  return (
12    <div>
13      <SystemsPanel onLog={addLogEntry} />
14      <CrewPanel onLog={addLogEntry} />
15      <EventLog entries={log} />
16    </div>
17  );
18}

Struktura komponentów

1MarsColonyDashboard (stan główny)
2├── SystemsPanel (props: wartości + callbacki)
3│   └── SystemGauge × 4
4├── CrewPanel (props: crew, formularz, callbacki)
5│   ├── CrewList
6│   └── CrewForm
7└── EventLog (props: entries)

Dane płyną w dół przez props, zdarzenia w górę przez callbacki -- serce jednokierunkowego przepływu danych w React!

Kryteria oceny

1. useState -- minimum 4 stany (atmosfera, zasilanie, woda, temperatura) + stan załogi + stan formularza
2. Obsługa zdarzeń -- przyciski regulujace parametry z zabezpieczeniami (min/max)
3. Kontrolowany formularz -- dodawanie nowych astronautów z walidacją
4. useEffect -- monitoring stanu krytycznego + symulacja auto-degradacji z cleanup
5. Lifting state up -- wspólny dziennik zdarzeń dostępny z wielu komponentów
6. Komponentyzacja -- minimum 3 osobne komponenty komunikujące się przez props

Powodzenia, pilotze! Ten projekt to Twoja pierwsza prawdziwa misja w świecie React -- pokaż, że potrafisz zarządzać kolonią na Marsie!