chore: create prototype for useState hook

[jdwilkin4]

At the time of this issue creation, Oliver is currently working on the making the changes to the editor to teach React and TypeScript.

For this workshop, we need to create a project to teach working with state and the useState hook.

Here are some suggestions from ChatGPT on project ideas:

Counter App

• Description: Build a simple counter that increments and decrements a number.
• Key Concepts: Basic state management, updating state with functions.
• Example Features: Increment, decrement, and reset buttons.

Toggle Visibility

• Description: Implement a button that toggles the visibility of a text or an element.
• Key Concepts: Boolean state, conditional rendering.
• Example Features: Show/hide text or component when a button is clicked.

Temperature Converter

• Description: Create a converter that allows users to switch between Celsius and Fahrenheit.
• Key Concepts: Managing state for inputs, performing calculations based on state.
• Example Features: Input fields for temperature, conversion logic, display result.

Color Picker

• Description: Build a color picker that updates the background color based on user input.
• Key Concepts: Managing color state, applying styles dynamically.
• Example Features: Color input field or palette, live color preview.

Simple Stopwatch

• Description: Implement a stopwatch that starts, stops, and resets the time.
• Key Concepts: State for time, interval management, useEffect for timers.
• Example Features: Start, stop, and reset buttons, display elapsed time.

Light/Dark Mode Toggle

• Description: Create a theme toggle that switches between light and dark mode.
• Key Concepts: Boolean state for theme, dynamic class application or inline styles.
• Example Features: Toggle button, theme-specific styles.

Accordion Component
- Description: Build an accordion where users can expand and collapse sections of content.
- Key Concepts: Managing which section is open, conditional rendering based on state.
- Example Features: Expand/collapse buttons, animated transitions.

The CSS should be supplied for the campers. There won't be steps for that.

Acceptance criteria

• Add your project to the frontend-cert/react-projects folder

[jdwilkin4]

Marking this as blocked until we know what the final editor implementation will look like the for the react and typescript projects.
Oliver will let us know when that is

[jdwilkin4]

This will resume in 2025 Q1