Final Project -- Space station architecture

Time to summarize everything we've learned in this module! Your task is to design and build a Mission Control Dashboard -- a space mission control panel, utilizing all the patterns we've covered.

Project requirements

Your project should use:

1. Composition -- Multi-slot layout (

   header

   ,

   sidebar

   ,

   main

   )
2. Container/Presentational -- Separation of logic from UI
3. Custom hooks -- Extracted logic (e.g.,

   useMission

   ,

   useCrewFilter

   )
4. Compound Components -- Tab system or accordion
5. Atomic Design -- Component organization into atoms, molecules, organisms

Project architecture

1MissionDashboard/
2  atoms/
3    StatusBadge     -- displays mission status (active/completed/failed)
4    ProgressBar     -- mission progress bar
5    IconButton      -- button with icon
6  molecules/
7    MissionCard     -- mission card (StatusBadge + title + ProgressBar)
8    CrewMember      -- crew member (avatar + name + role)
9  organisms/
10    MissionList     -- mission list with filtering
11    CrewPanel       -- crew panel with search
12    Tabs/Tab/Panel  -- compound component with tabs
13  hooks/
14    useMission      -- mission management logic
15    useFilter       -- filtering logic
16    useToggle       -- state toggle

Key patterns in the project

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}>Missions</Tabs.Tab>
6        <Tabs.Tab index={1}>Crew</Tabs.Tab>
7        <Tabs.Tab index={2}>Systems</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}

Implementation tips

Step 1: Custom hooks

Start by extracting logic into custom hooks. Each hook should have a single responsibility:

1// useToggle -- simple state toggle
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 -- filtering logic with 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}

Step 2: Atoms and molecules

Build simple, reusable components:

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// Molecule -- MissionCard (combines atoms)
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}

Step 3: Organisms with Compound Components

Combine molecules into larger structures:

1// MissionList -- organism with filtering
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}

Step 4: Assemble into a template

Finally, combine everything into a layout with composition.

Evaluation criteria

1. Composition -- layout with at least 3 slots (header, sidebar, main)
2. Container/Presentational -- separation of logic from view in at least 2 components
3. Custom hooks -- minimum 2 custom hooks with reusable logic
4. Compound Components -- tab system or accordion with shared state
5. Atomic Design -- visible organization into atoms, molecules, organisms

Good luck, pilot! Show that you can design React architecture like a true space engineer!