Build a Simple React JavaScript Interactive Pomodoro Timer: A Beginner’s Guide

Written by

learnmodernjavascript

in

In the fast-paced world we live in, time management is a crucial skill. Whether you’re a student, a professional, or simply someone trying to get more done, the ability to focus and stay productive can significantly impact your success. One of the most effective techniques for managing time is the Pomodoro Technique. This method involves working in focused bursts of time (typically 25 minutes) followed by short breaks. In this tutorial, we’ll dive into building a simple, yet functional, Pomodoro Timer application using ReactJS. This project is perfect for beginners and intermediate developers looking to enhance their React skills while learning about state management, component lifecycles, and user interactions. We will create a user-friendly interface that allows users to start, pause, reset, and customize their work and break intervals.

Why Build a Pomodoro Timer?

The Pomodoro Technique is more than just a time management strategy; it’s a productivity enhancer. By breaking down work into manageable chunks, it helps reduce mental fatigue and maintain focus. Building a Pomodoro Timer in React is a practical project for several reasons:

  • Practical Application: You’ll create something you can use daily to improve your productivity.
  • Learning React Concepts: You’ll learn about state management, event handling, conditional rendering, and component composition.
  • Real-World Experience: You’ll gain experience building a user interface and handling user interactions.
  • Customization: You can customize the timer to fit your workflow.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the React development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will help you understand the code.
  • A code editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.).

Setting Up the Project

Let’s get started by creating a new React project. Open your terminal or command prompt and run the following command:

npx create-react-app pomodoro-timer
cd pomodoro-timer

This command creates a new React app named “pomodoro-timer” and navigates you into the project directory. Next, start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000. You should see the default React app’s welcome screen. Now, let’s clean up the boilerplate code. Open the `src/App.js` file and replace its contents with the following:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  return (
    <div>
      {/* Your Pomodoro Timer components will go here */}
    </div>
  );
}

export default App;

Also, clear the contents of `src/App.css` and `src/index.css` to remove the default styling. We will add our own styles later. We will create the components and functionality step-by-step.

Component Breakdown

Our Pomodoro Timer application will consist of the following components:

  • App.js: The main component. It will manage the overall state of the timer, including the timer duration, the current mode (work or break), and the timer’s running status.
  • Timer.js: This component will display the remaining time and handle the timer’s logic, such as counting down and switching between work and break modes.
  • Controls.js: This component will contain the buttons to start, pause, and reset the timer.
  • Settings.js (Optional): If you want to add customization, you can include a settings component to allow the user to modify the work and break durations.

Creating the Timer Component (Timer.js)

Let’s start by creating the `Timer.js` component. Create a new file named `Timer.js` in the `src` directory. Add the following code:

import React from 'react';

function Timer({ timeLeft, isRunning, mode }) {
  const formatTime = (timeInSeconds) => {
    const minutes = Math.floor(timeInSeconds / 60);
    const seconds = timeInSeconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  return (
    <div>
      <h2>{formatTime(timeLeft)}</h2>
      <p>{mode === 'work' ? 'Work Time' : 'Break Time'}</p>
    </div>
  );
}

export default Timer;

In this component:

  • We receive `timeLeft`, `isRunning`, and `mode` as props from the parent component (App.js).
  • `formatTime` is a helper function to format the time in MM:SS format.
  • The component displays the formatted time and the current mode (Work Time or Break Time).

Creating the Controls Component (Controls.js)

Next, let’s create the `Controls.js` component. Create a new file named `Controls.js` in the `src` directory with the following code:

import React from 'react';

function Controls({ isRunning, handleStartPause, handleReset }) {
  return (
    <div>
      <button>{isRunning ? 'Pause' : 'Start'}</button>
      <button>Reset</button>
    </div>
  );
}

export default Controls;

This component handles the timer’s control buttons:

  • It receives `isRunning`, `handleStartPause`, and `handleReset` as props.
  • The “Start” button toggles to “Pause” based on the `isRunning` state.
  • The “Reset” button resets the timer.

Building the App Component (App.js)

Now, let’s put everything together in the `App.js` component. This is where we will manage the state and logic of the Pomodoro timer. Update `src/App.js` with the following code:

import React, { useState, useEffect } from 'react';
import './App.css';
import Timer from './Timer';
import Controls from './Controls';

function App() {
  const [timeLeft, setTimeLeft] = useState(25 * 60); // Initial time: 25 minutes
  const [isRunning, setIsRunning] = useState(false);
  const [mode, setMode] = useState('work'); // 'work' or 'break'
  const [workTime, setWorkTime] = useState(25 * 60); // Work time in seconds
  const [breakTime, setBreakTime] = useState(5 * 60); // Break time in seconds

  useEffect(() => {
    let interval;

    if (isRunning && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft(prevTime => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      // Switch modes when time is up
      if (mode === 'work') {
        setTimeLeft(breakTime);
        setMode('break');
      } else {
        setTimeLeft(workTime);
        setMode('work');
      }
    }

    return () => clearInterval(interval);
  }, [isRunning, timeLeft, mode, breakTime, workTime]);

  const handleStartPause = () => {
    setIsRunning(!isRunning);
  };

  const handleReset = () => {
    setIsRunning(false);
    setTimeLeft(workTime);
    setMode('work');
  };

  return (
    <div>
      
      
    </div>
  );
}

export default App;

In this component:

  • State Variables:
    • `timeLeft`: Stores the remaining time in seconds.
    • `isRunning`: Tracks whether the timer is running.
    • `mode`: Tracks whether the timer is in ‘work’ or ‘break’ mode.
    • `workTime`: Stores the work time duration.
    • `breakTime`: Stores the break time duration.
  • useEffect Hook:
    • This hook is responsible for the timer’s logic.
    • It sets up an interval that decrements `timeLeft` every second when `isRunning` is true and `timeLeft` is greater than 0.
    • When `timeLeft` reaches 0, it switches between ‘work’ and ‘break’ modes and resets the timer accordingly.
  • handleStartPause Function: Toggles the `isRunning` state.
  • handleReset Function: Resets the timer to the initial work time and sets the mode to ‘work’.
  • Rendering: Renders the `Timer` and `Controls` components, passing the necessary props.

Adding Styles (App.css)

To make the timer visually appealing, let’s add some styles. Open `src/App.css` and add the following CSS:

.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: sans-serif;
}

.timer {
  margin-bottom: 20px;
  text-align: center;
}

.timer-display {
  font-size: 3em;
  margin-bottom: 10px;
}

.mode-display {
  font-size: 1.2em;
  color: #555;
}

.controls {
  display: flex;
  gap: 20px;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
}

button:hover {
  background-color: #3e8e41;
}

This CSS provides basic styling for the app, including centering the content, setting fonts, and styling the buttons.

Testing and Running the Application

Save all the files. Now, go back to your terminal and run `npm start` if it’s not already running. You should see your Pomodoro Timer application in your browser. Test it out:

  • Click “Start” to begin the timer.
  • Click “Pause” to pause the timer.
  • Click “Reset” to reset the timer.
  • The timer should automatically switch between work and break modes.

Adding Customization (Optional)

To make the timer even more useful, let’s add a settings component that allows the user to customize the work and break durations. Create a new file named `Settings.js` in the `src` directory:

import React, { useState } from 'react';

function Settings({ workTime, breakTime, setWorkTime, setBreakTime }) {
  const [workMinutes, setWorkMinutes] = useState(workTime / 60);
  const [breakMinutes, setBreakMinutes] = useState(breakTime / 60);

  const handleWorkTimeChange = (e) => {
    const minutes = parseInt(e.target.value, 10) || 0; // Parse as integer or default to 0
    setWorkMinutes(minutes);
    setWorkTime(minutes * 60);
  };

  const handleBreakTimeChange = (e) => {
    const minutes = parseInt(e.target.value, 10) || 0; // Parse as integer or default to 0
    setBreakMinutes(minutes);
    setBreakTime(minutes * 60);
  };

  return (
    <div>
      <h2>Settings</h2>
      <label>Work Time (minutes):</label>
      
      <br />
      <label>Break Time (minutes):</label>
      
    </div>
  );
}

export default Settings;

In this component:

  • We receive `workTime`, `breakTime`, `setWorkTime`, and `setBreakTime` as props.
  • We use `useState` to manage the input values for work and break times.
  • `handleWorkTimeChange` and `handleBreakTimeChange` update the work and break times in the App component.

Now, import and use the `Settings` component in `App.js`:

import React, { useState, useEffect } from 'react';
import './App.css';
import Timer from './Timer';
import Controls from './Controls';
import Settings from './Settings';

function App() {
  const [timeLeft, setTimeLeft] = useState(25 * 60); // Initial time: 25 minutes
  const [isRunning, setIsRunning] = useState(false);
  const [mode, setMode] = useState('work'); // 'work' or 'break'
  const [workTime, setWorkTime] = useState(25 * 60); // Work time in seconds
  const [breakTime, setBreakTime] = useState(5 * 60); // Break time in seconds

  useEffect(() => {
    let interval;

    if (isRunning && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft(prevTime => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      // Switch modes when time is up
      if (mode === 'work') {
        setTimeLeft(breakTime);
        setMode('break');
      } else {
        setTimeLeft(workTime);
        setMode('work');
      }
    }

    return () => clearInterval(interval);
  }, [isRunning, timeLeft, mode, breakTime, workTime]);

  const handleStartPause = () => {
    setIsRunning(!isRunning);
  };

  const handleReset = () => {
    setIsRunning(false);
    setTimeLeft(workTime);
    setMode('work');
  };

  return (
    <div>
      
      
      
    </div>
  );
}

export default App;

Add some styling to `App.css` to accommodate the settings component:

.settings {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: left;
}

.settings label {
  display: block;
  margin-bottom: 5px;
}

.settings input {
  width: 100px;
  padding: 5px;
  margin-bottom: 10px;
}

Now, you should be able to change the work and break durations in the settings section of your app.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Incorrect Time Formatting: Ensure your `formatTime` function correctly formats the time, including leading zeros for single-digit minutes and seconds.
  • Timer Not Pausing: Double-check that your `handleStartPause` function correctly toggles the `isRunning` state.
  • Timer Not Resetting Properly: Make sure your `handleReset` function sets `timeLeft` back to the initial work time and sets `mode` to ‘work’.
  • Unnecessary Re-renders: Avoid unnecessary re-renders by using `React.memo` for components that don’t need to re-render when their props haven’t changed.
  • Incorrect Interval Clearing: Always clear the interval in the `useEffect` cleanup function (`return () => clearInterval(interval);`) to prevent memory leaks and unexpected behavior.
  • Input Validation: When implementing customization options, validate user input to ensure it is a valid number and within a reasonable range. Use `parseInt()` to convert the input to a number and handle invalid inputs gracefully.

Key Takeaways

In this tutorial, we’ve built a functional Pomodoro Timer using ReactJS. You’ve learned how to:

  • Set up a React project.
  • Create and structure components.
  • Manage state using `useState`.
  • Handle side effects with `useEffect`.
  • Create event handlers.
  • Style your application.
  • Add customization options.

Summary

We’ve created a fully functional Pomodoro Timer application with React, demonstrating the power and flexibility of React for building interactive user interfaces. By breaking down the problem into smaller components and managing the state effectively, we’ve created a tool that can help boost productivity. This project offers a solid foundation for further exploration into more advanced React concepts, such as using context for state management, incorporating user authentication, and integrating with external APIs.

FAQ

Q: How can I add a sound notification when the timer is up?
A: You can use the Web Audio API or a simple HTML5 audio element within your `useEffect` hook to play a sound when `timeLeft` reaches 0. You’ll need to create an audio element and play it when the mode changes.

Q: How can I save the timer settings to local storage?
A: You can use the `localStorage` API to save the `workTime` and `breakTime` values. When the component mounts, load the values from `localStorage`. When the values change, save them to `localStorage` using `useEffect`.

Q: How do I handle different timer modes (e.g., long breaks)?
A: You can add another state variable to control the timer mode (e.g., ‘work’, ‘shortBreak’, ‘longBreak’). Then, modify the logic in the `useEffect` hook to switch to the appropriate mode based on the current mode and time elapsed.

Q: How can I deploy this app to the internet?
A: You can use services like Netlify, Vercel, or GitHub Pages to deploy your React app. These services often provide a simple, automated deployment process.

Q: How can I make the UI more visually appealing?
A: Experiment with CSS. Try adding animations, different fonts, more colors, and better layouts to create a visually attractive UI. Consider using a UI component library such as Material UI, Ant Design, or Chakra UI to streamline the design process.

By following this tutorial, you’ve taken a significant step towards understanding and utilizing ReactJS for creating practical, real-world applications. The Pomodoro Timer is just the beginning. As you continue to build and experiment, you’ll gain a deeper understanding of React’s capabilities and its role in modern web development. You’ll soon find yourself creating increasingly complex and sophisticated applications.

More posts