---
author: tuan hoang
title: React Timer
id: cs-virgil-2.2-react-eco
---
# React Timer
:timer_clock: *Building a timer using create-react-app.*

The purpose of this project is to practice our React hooks skills such as `useState` `useRef` and `Custom Hook`

Everyone knows what a timer is even though not all timers look the same. Today, we are making a timer that looks like this , (*or better!*)

[Check out this demo to see it in action !](https://cs-react-timer.netlify.app/)

## User Story
- User click the start button to start the timer
- User can not click the start button while the timer is running
- User click the stop button to see timer stop
- User can click start to re-start the timer after stop
- User can click the reset button at any time to reset the timer
- :rocket: The user sees a different timer than the one from this example. *Meaning you should change the UI display*
- :rocket::rocket::rocket: User can "split" the timer, creating multiple records of time per "split-button clicked"

## Requirement

Fork this [repo](https://github.com/coderschool/cs-react-timer-starter-code) and read through the files.
Often time, developers are required to work with an existing codebase and improve upon it. This is one of those times.

You should only code in the designated area.
Using the VSC search function for "Your code here", you will see a list of all the places that required your attention.

## Grading

| Requirement | Grade |
| -------- | -------- |
| Missing any of the user stories that are not rocket | - 5 |
| Made rocket | + 10 |