Main Project: Space Mission Command Center

Congratulations, astronaut! You have reached the final mission in the React Mastery module. It is time to combine all the technologies you have learned into one powerful system -- the Space Mission Command Center. This project is your ultimate test to prove you have mastered advanced React patterns.

Project Goal

You will build a dashboard for managing a space mission that combines key concepts from the entire module:

1. React Portals -- Modal Alert Windows

Use React Portals to render modal mission alert windows outside the main DOM tree. Alerts should appear above the interface with an overlay effect.

2. Internationalization (i18n)

Add a language switcher (PL/EN) to the header. The entire dashboard should change interface language dynamically using Context API and translation objects.

3. State Management with useReducer

Manage mission state (status, fuel, crew, systems) using

useReducer

. Define actions such as

LAUNCH_MISSION

,

UPDATE_FUEL

,

TOGGLE_SYSTEM

,

ADD_CREW_MEMBER

.

4. Compound Components

Create a

<Dashboard.Panel>

component using the Compound Components pattern that allows flexible composition of dashboard sections:

1<Dashboard>
2  <Dashboard.Header title="Mission Control" />
3  <Dashboard.Panel title="Systems">
4    <SystemsList />
5  </Dashboard.Panel>
6  <Dashboard.Panel title="Crew">
7    <CrewList />
8  </Dashboard.Panel>
9</Dashboard>

5. Error Boundaries

Wrap dashboard sections in Error Boundaries so that a failure in one panel does not crash the entire application. Display a friendly error message with an option to reload the section.

6. Performance Optimization

Apply

React.memo

to list components,

useMemo

for mission statistics calculations, and

useCallback

for event handlers passed to child components.

Application Structure

1App
2├── LanguageProvider (Context -- i18n)
3├── MissionProvider (useReducer -- state)
4├── Dashboard (Compound Component)
5│   ├── Dashboard.Header
6│   ├── Dashboard.Panel "Mission Status"
7│   │   └── ErrorBoundary
8│   │       └── MissionStatus (React.memo)
9│   ├── Dashboard.Panel "Systems"
10│   │   └── ErrorBoundary
11│   │       └── SystemsList (React.memo)
12│   └── Dashboard.Panel "Crew"
13│       └── ErrorBoundary
14│           └── CrewList (React.memo)
15└── Portal -> AlertModal (React Portal)

Requirements

1. Dashboard displays 3 panels: Mission Status, Systems, Crew
2. Language switcher (PL/EN) changes all interface labels
3. "Launch Mission" button changes status and consumes fuel (useReducer)
4. Systems can be toggled on/off
5. Alert modal (Portal) appears when fuel drops below 20%
6. Error Boundary displays fallback when a component throws an error
7. Memoization prevents unnecessary re-renders

Implementation Hints

Reducer for Mission State

1const initialState = {
2  status: 'preparing',
3  fuel: 100,
4  systems: [
5    { id: 1, name: 'Navigation', active: true },
6    { id: 2, name: 'Life Support', active: true },
7    { id: 3, name: 'Communications', active: false },
8  ],
9  crew: ['Kowalski', 'Nowak', 'Smith'],
10};
11
12function missionReducer(state, action) {
13  switch (action.type) {
14    case 'LAUNCH_MISSION':
15      return { ...state, status: 'in-flight', fuel: state.fuel - 20 };
16    case 'UPDATE_FUEL':
17      return { ...state, fuel: Math.max(0, state.fuel + action.payload) };
18    case 'TOGGLE_SYSTEM':
19      return {
20        ...state,
21        systems: state.systems.map(s =>
22          s.id === action.payload ? { ...s, active: !s.active } : s
23        ),
24      };
25    case 'ADD_CREW_MEMBER':
26      return { ...state, crew: [...state.crew, action.payload] };
27    default:
28      return state;
29  }
30}

Context for i18n

1const translations = {
2  pl: { launch: 'Rozpocznij misję', fuel: 'Paliwo', systems: 'Systemy' },
3  en: { launch: 'Launch Mission', fuel: 'Fuel', systems: 'Systems' },
4};
5
6const LanguageContext = createContext();
7
8function LanguageProvider({ children }) {
9  const [lang, setLang] = useState('pl');
10  const t = translations[lang];
11  return (
12    <LanguageContext.Provider value={{ lang, setLang, t }}>
13      {children}
14    </LanguageContext.Provider>
15  );
16}

Portal for Alerts

1function AlertModal({ message, onClose }) {
2  return createPortal(
3    <div className="modal-overlay">
4      <div className="modal-content">
5        <h2>Alert!</h2>
6        <p>{message}</p>
7        <button onClick={onClose}>Close</button>
8      </div>
9    </div>,
10    document.getElementById('modal-root')
11  );
12}

Evaluation Criteria

• All 6 patterns (Portals, i18n, useReducer, Compound Components, Error Boundaries, memoization) must be implemented
• The application should work without console errors
• Language switching should update all labels
• The alert should appear automatically when fuel is low

Use the code editor below as a starting point. Expand the application with the missing features and adapt it to the structure described above.