PaulCailly / dsm-wheel

Home Page:https://dsm-wheel.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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)

About

https://dsm-wheel.vercel.app


Languages

Language:TypeScript 70.1%Language:CSS 20.8%Language:JavaScript 5.0%Language:HTML 4.2%