Pomodoro App

A pomodoro mobile app, extending the Chronos Pomodoro web app, now built with React Native.

🔨 Project Features

• Selection of different timer modes: Focus, Short Break, and Long Break.
• Animated countdown timer with options to start and pause.
• Interactive icons for timer control.

✔️ Technologies and Techniques Used

The project development involves the following technologies and techniques:

• useState and useRef: State management and interval references.
• Componentization: Creation of reusable components such as FokusButton, ActionButton, and Timer.
• StyleSheet: Custom styling for layouts and interactivity.
• Images and SVGs: Use of local images and custom SVG icons.
• setInterval: Countdown logic with interruption control.
• React Native CLI: Project configuration and execution.
• Pomodoro Simulation: Structure for focus sessions and breaks integrated into the design.

Project Preview (Scan the QR code with your phone)

🛠️ How to Run the Project

After downloading the project, follow the steps below to run it:

1. Ensure you have your React Native development environment set up (official guide).

2. In the terminal, navigate to the project folder and install dependencies:

   npm install

3. Run the project:

   npm start

4. With Expo running, you can open the app in your browser, on virtual devices (android | ios), or on your phone via Expo Go.

---

Pomodoro App (Versão em Português)

Um aplicativo mobile Pomodoro, extensão do aplicativo web Chronos Pomodoro, agora construído com React Native.

🔨 Funcionalidades do projeto

• Seleção de diferentes modos de temporizador: Foco, Pausa Curta e Pausa Longa.
• Contador regressivo animado com opções de iniciar e pausar.
• Exibição de ícones interativos para controle do temporizador.

✔️ Técnicas e tecnologias utilizadas

O desenvolvimento do projeto envolve as seguintes tecnologias e técnicas:

• useState e useRef: Gerenciamento de estado e referência de intervalos.
• Componentização: Criação de componentes reutilizáveis como FokusButton, ActionButton e Timer.
• StyleSheet: Estilização customizada para layouts e interatividade.
• Imagens e SVGs: Utilização de imagens locais e ícones SVG personalizados.
• setInterval: Lógica de contagem regressiva com controle de interrupção.
• React Native CLI: Configuração e execução do projeto.
• Simulação de Pomodoro: Estrutura para foco e pausas integradas ao design.

Preview do projeto (Use seu celular para escanear o QR code)

🛠️ Abrir e rodar o projeto

Após baixar o projeto, siga os passos abaixo para executá-lo:

1. Certifique-se de que possui o ambiente de desenvolvimento React Native configurado (guia oficial).

2. No terminal, navegue até a pasta do projeto e instale as dependências:

npm install

3. Execute o projeto:

npm start

4. Com o expo em execução, você pode abrir o app no seu navegador, em dispositivos virtuais (android | ios) ou no seu celular através do Expo Go