{"id":25242663,"url":"https://github.com/pedrolucasaraujo/react_applications_timer","last_synced_at":"2026-01-20T02:26:08.028Z","repository":{"id":256658545,"uuid":"853497315","full_name":"PedroLucasAraujo/react_applications_timer","owner":"PedroLucasAraujo","description":"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.","archived":false,"fork":false,"pushed_at":"2024-09-12T12:13:17.000Z","size":410,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T20:45:01.748Z","etag":null,"topics":["immer","imutability","react","react-context-api","react-hook-form","react-router-dom","styled-components","typescript","usereducer","zod"],"latest_commit_sha":null,"homepage":"https://learning-react-ts-ignite-time.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PedroLucasAraujo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-06T19:20:20.000Z","updated_at":"2024-12-27T13:38:39.000Z","dependencies_parsed_at":"2024-09-26T03:40:36.756Z","dependency_job_id":null,"html_url":"https://github.com/PedroLucasAraujo/react_applications_timer","commit_stats":null,"previous_names":["pedrolucasaraujo/learning_react_ts_ignite_time","pedrolucasaraujo/learning__react_ts_ignite_time","pedrolucasaraujo/react_ts_pomodoro_timer","pedrolucasaraujo/react_applications_timer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroLucasAraujo%2Freact_applications_timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroLucasAraujo%2Freact_applications_timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroLucasAraujo%2Freact_applications_timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroLucasAraujo%2Freact_applications_timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PedroLucasAraujo","download_url":"https://codeload.github.com/PedroLucasAraujo/react_applications_timer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399852,"owners_count":20932875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["immer","imutability","react","react-context-api","react-hook-form","react-router-dom","styled-components","typescript","usereducer","zod"],"created_at":"2025-02-11T23:34:21.384Z","updated_at":"2026-01-20T02:26:07.999Z","avatar_url":"https://github.com/PedroLucasAraujo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ignite Time\n\nThis 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.\n\n![ignite_timer_cover](https://github.com/user-attachments/assets/b1978f73-3878-444d-a474-1f7fc1a8cb1e)\n\n\n## Features\n\n- **Time Tracking**: Track the time remaining for each Pomodoro cycle with real-time updates on the screen.\n- **Cycle Management**: Start, interrupt, and complete Pomodoro cycles.\n- **History Tracking**: View all completed cycles with details about start/end times and interruptions. The data is persisted in the `localStorage`.\n- **Customizable**: Set custom durations for work and break intervals.\n- **Responsive UI**: Built with modern UI principles using **Styled-components**, ensuring a clean and responsive design across all devices.\n\n## Tech Stack\n\nThis project was built with a range of modern web technologies:\n\n- **React**: A JavaScript library for building user interfaces, particularly single-page applications.\n- **Styled-components**: CSS-in-JS library used to style the components with dynamic styling based on props.\n- **React Hook Form**: Utilized for handling form inputs and validations, improving the overall user experience with forms.\n- **Zod**: Schema declaration and validation library integrated with React Hook Form for seamless validation.\n- **React Router DOM**: Implements dynamic routing in the app, allowing users to navigate between different pages effortlessly.\n- **Context API \u0026 useReducer**: For state management across the application, allowing centralized control of the Pomodoro timer logic.\n- **Immer**: Helps manage immutability within the state management, making state updates predictable and easy to follow.\n\n## How It Works\n\n1. **Start a Cycle**: Enter the task and start the Pomodoro timer for a set period.\n2. **Manage Cycles**: You can pause, interrupt, or complete a cycle. The timer will reflect the changes in real-time.\n3. **View History**: Once a cycle is completed or interrupted, it is stored in the application history and can be viewed at any time.\n\n## Screenshots\n\n_You can include some screenshots here to demonstrate the app's functionality._\n\n## Running the Project Locally\n\nFollow these steps to run the application on your local machine:\n\n### Prerequisites\n\nMake sure you have the following installed:\n\n- [Node.js](https://nodejs.org/)\n- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/pomodoro-app.git\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd pomodoro-app\n\n3. Install the dependencies::\n\n   ```bash\n   npm install // yarn install\n   \n4. Running the Application:\n\n   ```bash\n   npm run dev // yarn dev\n   \n---\n\n### License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n---\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrolucasaraujo%2Freact_applications_timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedrolucasaraujo%2Freact_applications_timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrolucasaraujo%2Freact_applications_timer/lists"}