Project: Galactic Command Center

Throughout this module you've been building knowledge step by step: Context API, reducers, combining these tools, optimization. Now it's time to bring it all together in one project - the Galactic Command Center.

This is not another theoretical lesson. This is a project that you'll build yourself, using everything you've learned.

What will you build?

An application managing a fleet of spaceships with three independent systems, each with its own context:

• ThemeContext - a theme toggle (daytime mode "Sunrise" / nighttime mode "Deep Space")
• AuthContext - an authorization system (Captain logged in / logged out)
• MissionContext - the heart of the application: mission management via useReducer

Components on screen will consume different contexts depending on their needs.

Project requirements

1. ThemeContext

The context stores the current theme and a toggle function. The

ThemeToggle

component changes the theme, and the rest of the application reacts to the change (e.g., a CSS class on the main container).

1// Expected context structure
2{
3  theme: 'dark' | 'light',
4  toggleTheme: () => void
5}

2. AuthContext

The context stores captain data and enables login/logout. The login form should accept the captain's name. After logging in, display a greeting and a logout button.

1// Expected context structure
2{
3  captain: { name: string } | null,
4  login: (name: string) => void,
5  logout: () => void
6}

3. MissionContext with useReducer

This is the main part of the project. The reducer handles at least 4 action types:

1// Action types to implement
2'ADD_MISSION'      // adds a new mission to the list
3'UPDATE_STATUS'    // changes the status of an existing mission
4'ASSIGN_SHIP'      // assigns a ship to a mission
5'COMPLETE_MISSION' // marks a mission as completed
6
7// Example state shape
8{
9  missions: [
10    {
11      id: 1,
12      name: 'Mars Exploration',
13      status: 'planning' | 'active' | 'completed',
14      assignedShip: string | null
15    }
16  ],
17  availableShips: ['USS Nova', 'Orion-7', 'Celestia']
18}

Component structure

The application should consist of the following components:

1function App() {
2  return (
3    <ThemeProvider>
4      <AuthProvider>
5        <MissionProvider>
6          <div className="app">
7            <Header />        {/* uses AuthContext + ThemeContext */}
8            <MissionDashboard /> {/* uses MissionContext + AuthContext */}
9            <ThemeToggle />   {/* uses ThemeContext */}
10          </div>
11        </MissionProvider>
12      </AuthProvider>
13    </ThemeProvider>
14  );
15}

Header - displays the application title, login status (from AuthContext), and the current theme.

MissionDashboard - mission list, form for adding a new mission, assigning ships. Accessible only to logged-in captains.

ThemeToggle - a button that toggles between daytime and nighttime modes.

Implementation tips

Start by building each provider separately and testing it before combining them all. A good order is: ThemeProvider (simplest) -> AuthProvider -> MissionProvider.

Remember custom hooks for each context:

1function useTheme() {
2  const ctx = useContext(ThemeContext);
3  if (!ctx) throw new Error('useTheme must be inside ThemeProvider');
4  return ctx;
5}
6
7function useAuth() {
8  const ctx = useContext(AuthContext);
9  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
10  return ctx;
11}
12
13function useMissions() {
14  const ctx = useContext(MissionContext);
15  if (!ctx) throw new Error('useMissions must be inside MissionProvider');
16  return ctx;
17}

For MissionContext, apply the pattern of splitting into a state context and a dispatch context that you learned in the previous lesson - this is good practice with complex state using useReducer.

What to demonstrate in the project

The completed project should show:

1. Three independent context systems working simultaneously
2. The

   Header

   component consuming both

   AuthContext

   and

   ThemeContext

3. Theme changes immediately visible throughout the entire application
4. Adding missions and changing their status through dispatch
5. Blocking the mission panel for unauthenticated users
6. Assigning a ship to a mission (

   ASSIGN_SHIP

   action with payload)

The project is intentionally described broadly - this is your chance to take a creative approach to the solution. Use the editor below to build your version of the Galactic Command Center.