Project: Martian Colony Dashboard

Congratulations - you have reached the final project of the "State and Events" module! In previous lessons, you learned about

useState

, event handling, data flow,

useEffect

, and controlled forms. Now you will combine all that knowledge into one cohesive application.

Your task is to build a Martian Colony Dashboard - an interactive panel for managing a base on Mars. Ra, your cosmic guide, has gathered the requirements from command headquarters. Mission: write a React application that monitors and controls key colony systems.

What you are building

The dashboard consists of four connected sections:

1. Colony Systems Panel - monitors for atmosphere, power, water, and temperature
2. Control Center - buttons for manually adjusting parameters
3. Astronaut Registration Form - a controlled form for adding crew members
4. Event Log - an automatic log monitored by

   useEffect

All sections must work together - changes in one panel affect the others.

Technical requirements

1. Multiple states (useState)

Each colony system has its own state:

1const [atmosphere, setAtmosphere] = useState(78);
2const [power, setPower] = useState(85);
3const [water, setWater] = useState(62);
4const [temperature, setTemperature] = useState(-10);
5const [crew, setCrew] = useState([
6  { id: 1, name: 'Anna Kowalska', role: 'Commander' },
7  { id: 2, name: 'Jan Wisniewski', role: 'Engineer' }
8]);

2. Event handling

Each system has adjustment buttons. Remember the safe ranges:

1const handleAtmosphereBoost = () => {
2  setAtmosphere(prev => Math.min(100, prev + 5));
3  addLogEntry('Increased O2 level by 5%');
4};

3. Controlled registration form

A form for adding new astronauts to the crew:

1const [newCrew, setNewCrew] = useState({ name: '', role: '' });
2
3const handleCrewChange = (event) => {
4  const { name, value } = event.target;
5  setNewCrew(prev => ({ ...prev, [name]: value }));
6};
7
8const handleCrewSubmit = (event) => {
9  event.preventDefault();
10  if (!newCrew.name.trim()) return;
11  setCrew(prev => [...prev, { id: Date.now(), ...newCrew }]);
12  setNewCrew({ name: '', role: '' });
13};

4. useEffect - monitoring and auto-updates

Critical state monitoring:

1useEffect(() => {
2  if (power < 20) {
3    addLogEntry('ALARM: Critically low power level!');
4  }
5}, [power]);

Auto-degradation simulation with cleanup:

1useEffect(() => {
2  const interval = setInterval(() => {
3    setWater(prev => Math.max(0, prev - 1));
4    setTemperature(prev => prev - 0.5);
5  }, 5000);
6
7  return () => clearInterval(interval);
8}, []);

5. Lifting state up - shared event log

The log state and

addLogEntry

function live in the main component and are passed down:

1function MarsColonyDashboard() {
2  const [log, setLog] = useState([]);
3
4  const addLogEntry = (message) => {
5    setLog(prev => [
6      { id: Date.now(), time: new Date().toLocaleTimeString(), message },
7      ...prev
8    ].slice(0, 20));
9  };
10
11  return (
12    <div>
13      <SystemsPanel onLog={addLogEntry} />
14      <CrewPanel onLog={addLogEntry} />
15      <EventLog entries={log} />
16    </div>
17  );
18}

Component structure

1MarsColonyDashboard (main state)
2├── SystemsPanel (props: values + callbacks)
3│   └── SystemGauge × 4
4├── CrewPanel (props: crew, form, callbacks)
5│   ├── CrewList
6│   └── CrewForm
7└── EventLog (props: entries)

Data flows down through props, events flow up through callbacks -- the heart of unidirectional data flow in React!

Evaluation criteria

1. useState -- minimum 4 states (atmosphere, power, water, temperature) + crew state + form state
2. Event handling -- buttons adjusting parameters with safeguards (min/max)
3. Controlled form -- adding new astronauts with validation
4. useEffect -- critical state monitoring + auto-degradation simulation with cleanup
5. Lifting state up -- shared event log accessible from multiple components
6. Componentization -- minimum 3 separate components communicating through props

Good luck, pilot! This project is your first real mission in the world of React -- show that you can manage a colony on Mars!