🕐 Ignite timer

An application to manage your time on a daily basis with ease.

Demo

Layout

Feel free to check the layout in figma, here .

About

In this project, I've created a timer following @Rocketseat's React.JS training, focusing on gaining in-depth knowledge of React hooks.

Focused on only client-side functionalities, with no backend or consumption of an external API, this project contains some exciting features such as the use of reducers to manage complex state management, styled-components, react hook form to manage form states, immer to handle immutable state as if it were mutable, and much more

Installation

# Clone the repository

git clone https://github.com/fernandortec/ignite-timer.git 
cd ignite-timer

# Install necessary modules

npm install

Usage

Now just run the project with NPM and you're good to go.

npm start

Stack utilized

• [✓] zod
• [✓] react
• [✓] immer - A lib to change immutable data as if it was mutable
• [✓] date-fns
• [✓] react-hook-form
• [✓] styled-components
• [✓] nativeHooks (useReducer and useEffect)
• [✓] @hookform/resolvers/zod (React hook form + Zod)

Features

• Start a cycle on the timer
• Keep up with the time passed even on another tab
• Interrupt cycle
• History of all cycles