Project: Cosmic Mission Control Panel

Congratulations, Navigator! You have reached the end of this module and it is time to combine all the styling techniques you have learned into one comprehensive project. Your task is to create a Cosmic Mission Control Panel — an interactive dashboard that utilizes knowledge from the entire module.

Project Goal

You will build a spaceship control panel that combines:

• Styled Components with dynamic theming
• CSS Animations with

  @keyframes

• Responsive layout with CSS Grid and Flexbox
• Theming (light/dark mode)
• Interactive elements with hover effects and transitions

Project Architecture

The project consists of several key sections:

1. Theme System (Theming)

We use

ThemeProvider

from styled-components to manage colors and styles across the entire application:

1const darkTheme = {
2  bg: '#0a0a1a',
3  surface: '#12122a',
4  accent: '#00ff88',
5  text: '#e0e0e0',
6  danger: '#ff4444',
7  warning: '#ffaa00'
8};
9
10const lightTheme = {
11  bg: '#f0f4f8',
12  surface: '#ffffff',
13  accent: '#0066ff',
14  text: '#1a1a2e',
15  danger: '#cc0000',
16  warning: '#cc8800'
17};

2. CSS Animations

The panel uses several types of animations you learned in the module:

1/* Status pulsing */
2@keyframes pulse {
3  0%, 100% { opacity: 1; }
4  50% { opacity: 0.5; }
5}
6
7/* Slide in with offset */
8@keyframes slideIn {
9  from {
10    opacity: 0;
11    transform: translateY(20px);
12  }
13  to {
14    opacity: 1;
15    transform: translateY(0);
16  }
17}
18
19/* Radar rotation */
20@keyframes rotate {
21  from { transform: rotate(0deg); }
22  to { transform: rotate(360deg); }
23}

3. Styled Components with Props

Dynamic component styling based on passed props:

1const StatusBadge = styled.span\`
2  padding: 4px 12px;
3  border-radius: 12px;
4  font-size: 12px;
5  font-weight: bold;
6  background: \${props => props.active ? '#00ff8833' : '#ff444433'};
7  color: \${props => props.active ? '#00ff88' : '#ff4444'};
8  animation: pulse 2s infinite;
9\`;
10
11const Card = styled.div\`
12  background: \${props => props.theme.surface};
13  border: 1px solid \${props => props.theme.accent}33;
14  border-radius: 12px;
15  padding: 20px;
16  transition: transform 0.3s ease, box-shadow 0.3s ease;
17
18  &:hover {
19    transform: translateY(-4px);
20    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.15);
21  }
22\`;

4. Responsive Layout with CSS Grid

The panel automatically adapts to the screen width:

1.dashboard-grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
4  gap: 20px;
5  padding: 20px;
6}
7
8@media (max-width: 768px) {
9  .dashboard-grid {
10    grid-template-columns: 1fr;
11  }
12}

5. Complete Component Structure

The main

App

component brings all elements together:

1function App() {
2  const [isDark, setIsDark] = useState(true);
3
4  return (
5    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
6      <GlobalStyle />
7      <Header>
8        <Title>Mission Control</Title>
9        <ThemeToggle onClick={() => setIsDark(!isDark)}>
10          {isDark ? '☀️' : '🌙'}
11        </ThemeToggle>
12      </Header>
13      <DashboardGrid>
14        <StatusCard systems={systemsData} />
15        <RadarCard />
16        <MissionsCard missions={missionsData} />
17        <CrewCard crew={crewData} />
18      </DashboardGrid>
19    </ThemeProvider>
20  );
21}

Key Techniques Used in the Project

| Technique | Usage in Project | |-----------|-----------------| | Styled Components | All UI components | | ThemeProvider | Switching dark/light mode | |

@keyframes

| Status pulsing, radar rotation, card entry | | CSS Grid | Dashboard layout | | Flexbox | Internal card layout | |

transition

| Hover effects on cards and buttons | | Dynamic props | Status colors, conditional styles | | Responsiveness |

auto-fit

and

minmax

in grid |

Module Summary

In this module, you learned the full spectrum of styling techniques in React:

1. Classic CSS and CSS Modules — the foundation of styling with class isolation
2. Styled Components — CSS-in-JS with dynamic props and theming
3. SCSS — preprocessor with variables, mixins, and nesting
4. Tailwind CSS — utility-first approach for fast prototyping
5. UI Frameworks — ready component libraries (MUI, Ant Design, Chakra)
6. Design Systems — building consistent design systems
7. React Transition Group — animating component lifecycle
8. CSS Animations —

   @keyframes

   ,

   transition

   , and advanced effects

Each of these techniques has its place in the arsenal of a cosmic programmer. The best engineers know how to combine them into a coherent system — exactly as in this project.

Try the panel below and experiment with the code — change the theme colors, add new animations, or expand the dashboard sections!