Projekt koncowy -- Architektura kosmicznej stacji

Czas na podsumowanie wszystkiego, czego nauczylismy sie w tym module! Twoim zadaniem jest zaprojektowanie i zbudowanie Mission Control Dashboard -- panelu kontroli misji kosmicznej, wykorzystując wszystkie poznane wzorce.

Wymagania projektu

Twoj projekt powinien wykorzystywać:

1. Composition -- Wieloslotowy layout (

   header

   ,

   sidebar

   ,

   main

   )
2. Container/Presentational -- Separacja logiki od UI
3. Custom hooks -- Wyodrebniona logika (np.

   useMission

   ,

   useCrewFilter

   )
4. Compound Components -- System zakladek lub accordion
5. Atomic Design -- Organizacja komponentów w atomy, molekuly, organizmy

Architektura projektu

1MissionDashboard/
2  atoms/
3    StatusBadge     -- wyświetla status misji (active/completed/failed)
4    ProgressBar     -- pasek postepu misji
5    IconButton      -- przycisk z ikona
6  molecules/
7    MissionCard     -- karta misji (StatusBadge + tytul + ProgressBar)
8    CrewMember      -- czlonek zalogi (avatar + imie + rola)
9  organisms/
10    MissionList     -- lista misji z filtrowaniem
11    CrewPanel       -- panel zalogi z wyszukiwaniem
12    Tabs/Tab/Panel  -- compound component z zakladkami
13  hooks/
14    useMission      -- logika zarzadzania misjami
15    useFilter       -- logika filtrowania
16    useToggle       -- przelacznik stanow

Kluczowe wzorce w projekcie

Custom Hook -- useMission

1function useMission() {
2  const [missions, setMissions] = useState(initialMissions);
3  const [filter, setFilter] = useState('all');
4
5  const filteredMissions = useMemo(() => {
6    if (filter === 'all') return missions;
7    return missions.filter(m => m.status === filter);
8  }, [missions, filter]);
9
10  const updateStatus = (id, status) => {
11    setMissions(prev =>
12      prev.map(m => m.id === id ? { ...m, status } : m)
13    );
14  };
15
16  return { missions: filteredMissions, filter, setFilter, updateStatus };
17}

Compound Components -- Tabs

1function MissionControl() {
2  return (
3    <Tabs defaultTab={0}>
4      <Tabs.TabList>
5        <Tabs.Tab index={0}>Misje</Tabs.Tab>
6        <Tabs.Tab index={1}>Zaloga</Tabs.Tab>
7        <Tabs.Tab index={2}>Systemy</Tabs.Tab>
8      </Tabs.TabList>
9
10      <Tabs.TabPanel index={0}>
11        <MissionList />
12      </Tabs.TabPanel>
13      <Tabs.TabPanel index={1}>
14        <CrewPanel />
15      </Tabs.TabPanel>
16      <Tabs.TabPanel index={2}>
17        <SystemsOverview />
18      </Tabs.TabPanel>
19    </Tabs>
20  );
21}

Composition -- Dashboard Layout

1function DashboardLayout({ header, sidebar, children }) {
2  return (
3    <div className="dashboard">
4      <header className="dash-header">{header}</header>
5      <div className="dash-body">
6        <aside className="dash-sidebar">{sidebar}</aside>
7        <main className="dash-content">{children}</main>
8      </div>
9    </div>
10  );
11}
12
13function App() {
14  return (
15    <DashboardLayout
16      header={<TopBar title="Mission Control" />}
17      sidebar={<StatusPanel />}
18    >
19      <MissionControl />
20    </DashboardLayout>
21  );
22}

Wskazowki implementacyjne

Krok 1: Custom hooks

Zacznij od wyodrebnienia logiki do custom hookow. Kazdy hook powinien miec jedna odpowiedzialnosc:

1// useToggle -- prosty przelacznik stanow
2function useToggle(initial = false) {
3  const [value, setValue] = useState(initial);
4  const toggle = useCallback(() => setValue(v => !v), []);
5  return [value, toggle];
6}
7
8// useFilter -- logika filtrowania z debounce
9function useFilter(items, filterFn) {
10  const [query, setQuery] = useState('');
11
12  const filteredItems = useMemo(() => {
13    if (!query) return items;
14    return items.filter(item => filterFn(item, query));
15  }, [items, query, filterFn]);
16
17  return { filteredItems, query, setQuery };
18}

Krok 2: Atomy i molekuly

Zbuduj proste, wielokrotnego uzytku komponenty:

1// Atom -- StatusBadge
2function StatusBadge({ status }) {
3  const colors = {
4    active: '#00e676',
5    completed: '#64b5f6',
6    failed: '#f44336',
7  };
8  return (
9    <span style={{ background: colors[status], padding: '4px 12px', borderRadius: '20px' }}>
10      {status}
11    </span>
12  );
13}
14
15// Molekula -- MissionCard (laczy atomy)
16function MissionCard({ mission, onStatusChange }) {
17  return (
18    <div className="mission-card">
19      <h3>{mission.name}</h3>
20      <StatusBadge status={mission.status} />
21      <ProgressBar value={mission.progress} />
22    </div>
23  );
24}

Krok 3: Organizmy z Compound Components

Polacz molekuly w wieksze struktury:

1// MissionList -- organizm z filtrowaniem
2function MissionList() {
3  const { missions, filter, setFilter, updateStatus } = useMission();
4
5  return (
6    <div>
7      <FilterBar value={filter} onChange={setFilter} />
8      {missions.map(m => (
9        <MissionCard key={m.id} mission={m} onStatusChange={updateStatus} />
10      ))}
11    </div>
12  );
13}

Krok 4: Zloz w template

Na koncu polacz wszystko w layout z kompozycja.

Kryteria oceny

1. Composition -- layout z przynajmniej 3 slotami (header, sidebar, main)
2. Container/Presentational -- separacja logiki od widoku w co najmniej 2 komponentach
3. Custom hooks -- minimum 2 wlasne hooki z reuzywalna logika
4. Compound Components -- system zakladek lub accordion ze wspoldzelonym stanem
5. Atomic Design -- widoczna organizacja w atomy, molekuly, organizmy

Powodzenia, pilotze! Pokaz, że potrafisz projektowac architekture React jak prawdziwy inzynier kosmiczny!