Main Project: Cosmic Dashboard with Different Styling Approaches

Time for a summary! In this project, you'll build a Cosmic Mission Dashboard that combines different styling approaches. It's like building a complete mission control panel where each sector uses the best tool for its job.

Project goal

Create a dashboard that displays information about space missions. The project should demonstrate the ability to apply different styling methods within a single project.

Requirements

1. Page layout (CSS Modules)

The main dashboard layout -- sidebar, header, main area -- should be styled using CSS Modules:

1/* Dashboard.module.css */
2.container {
3  display: grid;
4  grid-template-columns: 250px 1fr;
5  grid-template-rows: 60px 1fr;
6  min-height: 100vh;
7  background: #0a0a2e;
8}
9
10.sidebar {
11  grid-row: 1 / -1;
12  background: #0d1137;
13  padding: 20px;
14}
15
16.header {
17  background: #1a1a4e;
18  display: flex;
19  align-items: center;
20  padding: 0 24px;
21}
22
23.main {
24  padding: 24px;
25  overflow-y: auto;
26}

2. Interactive components (Styled-components)

Buttons, status badges, cards with dynamic styles:

1const StatusBadge = styled.span`
2  padding: 4px 12px;
3  border-radius: 20px;
4  font-size: 12px;
5  font-weight: bold;
6  background: ${({ status, theme }) => theme.statusColors[status]};
7  color: ${({ status }) => status === 'active' ? '#0a0a2e' : 'white'};
8`;

3. Cards and lists (Tailwind CSS)

Quick presentational components with utility classes:

1function CrewMember({ name, role, avatar }) {
2  return (
3    <div className="flex items-center gap-3 p-3 bg-slate-800 rounded-lg
4                    hover:bg-slate-700 transition-colors">
5      <img src={avatar} className="w-10 h-10 rounded-full" alt={name} />
6      <div>
7        <p className="text-white font-medium">{name}</p>
8        <p className="text-gray-400 text-sm">{role}</p>
9      </div>
10    </div>
11  );
12}

4. Theming (Styled-components ThemeProvider)

The entire dashboard should use a shared color theme:

1const spaceTheme = {
2  colors: {
3    background: '#0a0a2e',
4    surface: '#1a1a4e',
5    primary: '#7c4dff',
6    text: '#e0e0e0',
7    success: '#00e676',
8    warning: '#ffa726',
9    danger: '#f44336'
10  },
11  statusColors: {
12    active: '#00e676',
13    pending: '#ffa726',
14    completed: '#64b5f6',
15    failed: '#f44336'
16  }
17};

5. Responsiveness

The dashboard should be responsive -- on smaller screens the sidebar hides, and the card grid switches to a column layout:

1/* Dashboard.module.css */
2@media (max-width: 768px) {
3  .container {
4    grid-template-columns: 1fr;
5  }
6  .sidebar {
7    display: none;
8  }
9}

Component structure

1App
2  ThemeProvider (spaceTheme)
3    GlobalStyles
4    DashboardLayout (CSS Modules)
5      Sidebar (CSS Modules)
6        NavItem (CSS Modules)
7      Header (CSS Modules + Styled StatusBadge)
8      MainContent
9        MissionGrid (Tailwind grid)
10          MissionCard (Styled-components, dynamic props)
11            StatusBadge (Styled, color change by status)
12        CrewList (Tailwind)
13          CrewMember (Tailwind)

Tips

• Start with the layout (CSS Modules) -- create a grid with sidebar, header, and main
• Add the ThemeProvider component and GlobalStyles
• Build interactive components (mission cards, status badges) with styled-components
• Use Tailwind classes for quick presentational elements (crew list, card grid)
• Remember color consistency -- all colors should come from the theme
• Add at least one hover/focus effect and one animation

Grading criteria

1. CSS Modules used for layout (grid, sidebar, header)
2. Styled-components used for at least 3 components with dynamic props
3. Tailwind CSS used for at least 2 presentational sections
4. ThemeProvider with a defined color theme
5. Responsiveness -- the dashboard works on different screen sizes

Below you'll find an example of a completed dashboard that combines all three approaches. Analyze the code and get inspired to create your own version!