VagnerNerves / ignite-timer

I developed the Ignite Timer project, where you can create a project with time and start the timer, being able to interrupt it, there will also be a history tab where you can see the times that were completed, interrupted or in progress.

I developed the Ignite Timer project, where you can create a project with time and start the timer, being able to interrupt it, there will also be a history tab where you can see the times that were completed, interrupted or in progress.

Link in Netlify

🎥 Implementation Video

Project.Ignite.Timer.mp4

🎨 Layout

Layout developed by Daniel Duarte

👏 Learning and more implementations

• Implemented and learned Sytles Components for CSS.
• Implemented and learned about React Router Rom, where Home and Historical routes were created.
• In the form used the React Hook Form and for the validation the zod.
• For date comparison and formatting, we use the date-fns library.
• In this project, a Context was created so that the pages can access the methods.
• A cycle reducer was also created, to share the logic in one place.
• I used the Immer library to make it easy to change the reducer mutation.
• Used the local Storage to store the data and recovery.

💡 Technologies used

• Vite
• React
• TypeScript
• Styled Components
• React Router Dom
• React Hook Form
• zod
• date-fns
• Immer

🚀 Running the project

Front-end Web

Clone the project

  git clone https://github.com/VagnerNerves/ignite-timer

Enter the project directory

  cd ignite-timer

Install with dependencies

  npm i

Start the server

  npm run dev

🌎 License

This project is under the MIT license. See the LICENSE file for more details.