Skip to content

Web app cycle timer with countdown, history, and easy UI for productivity

License

Notifications You must be signed in to change notification settings

guipmdev/ignite-timer

Repository files navigation

lang-en lang-pt-br

Ignite Timer logo

Ignite Timer

Repository language count Repository size Commit activity Last commit Project license Layout designer

Screenshot of the application initial page

Go to the web application β†—

πŸ“’ Table of Contents

πŸ“ Overview

This project is a web application developed in React and TypeScript that serves as a timer tool for managing cycles. It allows users to create cycles with specific tasks and durations, interrupt cycles, and mark them as finished.

The application offers features such as countdown timers, history and an easy-to-use interface, improving productivity and time management skills.

✨ Features

⏱ Define what you want to work on, and how long for

🎯 Change browser tab and keep watching the time go by

πŸ”„ Refresh the page doesn't lose progress

πŸ“ƒ View ongoing, completed and/or interrupted tasks in a history format

πŸ€– Demo

ignite-timer.mp4

🎨 Layout

The layout of the application was designed by Rocketseat and is available on Figma.

Web application layout image cover

πŸ›  Technologies

The following tools were used to build the project:

Website

Vite React TypeScript ESLint Rocketseat ESLint config

React Router React Hook Form Zod date-fns Immer

styled-components Phosphor Icons

* See the package.json file

Utils

Git Node.js Figma Google Fonts VSCode

πŸš€ Getting Started

βœ”οΈ Prerequisites

Before you begin, ensure that you have the following tools installed on your machine: Git, Node.js. It's also good to have an editor to work with the code, such as VSCode.

πŸ“¦ Installation

  1. Clone the repository:
git clone https://github.com/guipmdev/ignite-timer/
  1. Change to the project directory:
cd ignite-timer
  1. Install the dependencies:
npm install

βš™οΈ Usage

  1. Start the web application:
npm run dev
  1. Access https://localhost:5173/ to view the application

πŸ“„ License

This project is licensed under the terms of the MIT license. See the LICENSE file for additional info.

πŸ‘ Acknowledgments

  • Many thanks to Rocketseat for the layout and tips when putting this project together

Made with πŸ’™ by @guipm.dev - Feel free to contact me!


↑   Return to the top   ↑