paulcailly / dsm-wheel

TypeScript and React Workshop

Welcome to this TypeScript and React workshop!

In this session, we will be diving into the world of React and TypeScript by working a dynamic spinning wheel app to elect the Daily Standup Meeting animator.

🎯 Project Overview

The spinning wheel app is a list of names displayed on a wheel. When the wheel is spun, it randomly selects a name. The selected name is then removed from the wheel and displayed in a separate list, where it is marked as selected. 📝

This project is already partially built using React and TypeScript. We will be focusing on enhancing it by adding a dynamic list of names. This list will be interactive - you can select a name, which will then be checked off and removed from the wheel.

🏁 Workshop Goals

By the end of this workshop, you will:

• Understand the basics of React, including components, props, and state.
• Understand how to use TypeScript in a React application, including adding types to props and state.
• Be able to handle events in React, such as clicking a button or checking a box.
• Have hands-on experience modifying a React application.

🚀 Missions

1. Create the NameList component
2. Adding state to App component
3. Styling the selected names
4. Adding a toggle button (Bonus)