Building and Testing an OTP UI Component with React and TypeScript

Table of Contents

• What We'll Cover
• Installation
• Having an Issue?

What We'll Cover

• The basics of building a One-Time Password (OTP) UI Component with React and TypeScript.
• How to leverage React Hook Form and Zod for front-end UI validation.
• How to use Jest to test user interactions with your component.

You can check out the full blog post here.

Installation

Here's how you can get this project up and running on your local machine:

1. Create your directory:

   mkdir otp-react-ts

2. Change to your directory:

   cd otp-react-ts

3. Clone the repo:

   git clone https://github.com/internetdrew/otp-react-ts-vitest.git .

4. Fetch remote branches:

   git fetch --all

5. Checkout the branch you want. Not if you want starter or final? Find out based on the route you want to take through the post.

   git checkout -b <branch-name> origin/<branch-name>

6. Once in the desired branch, install dependencies (you will need to do this for each respective branch):

   npm i

7. Run the development server:

   npm run dev

8. Open localhost:5173 in your browser to see your updates live with hot reloads.

Having an Issue?

Feel free to reach out to me via Twitter, LinkedIn, or message me directly.