https://github.com/pedrolucasaraujo/learning__react_ts_ignite_time

This project was developed during a course I took to deepen my knowledge of React Hooks. This Pomodoro Timer app, developed using React, Styled-components, and advanced Hooks like useReducer and Context API, helps manage work and break cycles efficiently. It features real-time time tracking, customizable cycles, and a history log saved.
https://github.com/pedrolucasaraujo/learning__react_ts_ignite_time

immer imutability react react-context-api react-hook-form react-router-dom styled-components typescript usereducer zod

Last synced: 17 days ago
JSON representation

This project was developed during a course I took to deepen my knowledge of React Hooks. This Pomodoro Timer app, developed using React, Styled-components, and advanced Hooks like useReducer and Context API, helps manage work and break cycles efficiently. It features real-time time tracking, customizable cycles, and a history log saved.

• Host: GitHub
• URL: https://github.com/pedrolucasaraujo/learning__react_ts_ignite_time
• Owner: PedroLucasAraujo
• Created: 2024-09-06T19:20:20.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-12T12:13:17.000Z (2 months ago)
• Last Synced: 2024-10-10T17:22:00.893Z (about 1 month ago)
• Topics: immer, imutability, react, react-context-api, react-hook-form, react-router-dom, styled-components, typescript, usereducer, zod
• Language: TypeScript
• Homepage: https://learning-react-ts-ignite-time.vercel.app
• Size: 400 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ignite Time

This project was developed during a course I took to deepen my knowledge of **React Hooks**. It showcases advanced techniques such as `useReducer`, `useContext`, and state immutability with Immer, providing a practical application of these concepts in a Pomodoro Timer tool.

![ignite_timer_cover](https://github.com/user-attachments/assets/b1978f73-3878-444d-a474-1f7fc1a8cb1e)

## Features

- **Time Tracking**: Track the time remaining for each Pomodoro cycle with real-time updates on the screen.

- **Cycle Management**: Start, interrupt, and complete Pomodoro cycles.

- **History Tracking**: View all completed cycles with details about start/end times and interruptions. The data is persisted in the `localStorage`.

- **Customizable**: Set custom durations for work and break intervals.

- **Responsive UI**: Built with modern UI principles using **Styled-components**, ensuring a clean and responsive design across all devices.

## Tech Stack

This project was built with a range of modern web technologies:

- **React**: A JavaScript library for building user interfaces, particularly single-page applications.

- **Styled-components**: CSS-in-JS library used to style the components with dynamic styling based on props.

- **React Hook Form**: Utilized for handling form inputs and validations, improving the overall user experience with forms.

- **Zod**: Schema declaration and validation library integrated with React Hook Form for seamless validation.

- **React Router DOM**: Implements dynamic routing in the app, allowing users to navigate between different pages effortlessly.

- **Context API & useReducer**: For state management across the application, allowing centralized control of the Pomodoro timer logic.

- **Immer**: Helps manage immutability within the state management, making state updates predictable and easy to follow.

## How It Works

1. **Start a Cycle**: Enter the task and start the Pomodoro timer for a set period.

2. **Manage Cycles**: You can pause, interrupt, or complete a cycle. The timer will reflect the changes in real-time.

3. **View History**: Once a cycle is completed or interrupted, it is stored in the application history and can be viewed at any time.

## Screenshots

_You can include some screenshots here to demonstrate the app's functionality._

## Running the Project Locally

Follow these steps to run the application on your local machine:

### Prerequisites

Make sure you have the following installed:

- [Node.js](https://nodejs.org/)

- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)

### Installation

1. Clone the repository:

   ```bash

   git clone https://github.com/your-username/pomodoro-app.git

2. Navigate to the project directory:

   ```bash

   cd pomodoro-app

3. Install the dependencies::

   ```bash

   npm install // yarn install

   

4. Running the Application:

   ```bash

   npm run dev // yarn dev

   

---

### License

This project is licensed under the MIT License - see the LICENSE file for details.

---