In this tutorial, we are going to build a TypeScript project from scratch. We’ll go from designing in Excalidraw to using TDD to deploying to npm.

Introduce Tutorial

Set Up IDE

Practice Designing a Public API

Discuss Readme-Driven-Development

Write Implementation in Excalidraw

Set up TypeScript and Testing Boilerplate

Practice Test-Driven-Development

Initialize Streak Counter

Write Logic to Get Streak

Discuss TDD Experience

Write Logic to Increment Streak

Write Logic to Reset Streak

Refactor Our Code

Discuss Project

Prep Library for Production

Publish Library to npm

Use Library in Production

Fix Same Day Bug

Challenge: Build a Component Library

Build a TypeScript Project From Scratch

In this tutorial, we are going to mimic a real software development lifecycle. We’ll go from inspiration to requirements to using TDD to production.

Write Requirements for Avatar Component

In this lesson, you’ll scaffold the project using Vite’s react-ts template and the yarn create vite command. 

Set up Application with Vite

In this lesson, you’ll scaffold the testing infrastructure using Vitest + @testing-library so that we can write tests for our functions and components.

Set up Testing with Vitest and testing-library

Discuss when to Use .ts vs .tsx

Build basic <Avatar /> component with TDD

Discuss Types or Interfaces

Define AvatarProps

Implement a Fallback Avatar URL

Understand Image Loading Errors

Implement onError to Handle Image Lading Errors

Use in “Production” CodeSandbox

Bonus: Using PropsWithChildren

Challenge: Build X Component

Build a Dynamic Avatar Component with React & TypeScript

Free TypeScript Tutorials