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

Written by

learnmodernjavascript

in

In today’s fast-paced world, time management is crucial. The Pomodoro Technique is a popular method for improving focus and productivity by breaking work into focused intervals, traditionally 25 minutes in length, separated by short breaks. This tutorial will guide you, step-by-step, through building a simple Pomodoro timer application using React. This project is perfect for beginners to intermediate React developers looking to solidify their understanding of state management, component lifecycles, and user interface interactions. By the end, you’ll have a functional timer and a deeper comprehension of React fundamentals.

Why Build a Pomodoro Timer?

Creating a Pomodoro timer offers several benefits:

  • Practical Application: You’ll build something you can use daily to boost your productivity.
  • Core React Concepts: You’ll gain hands-on experience with essential React concepts like state, props, event handling, and component composition.
  • Project-Based Learning: Building a real-world application reinforces theoretical knowledge.
  • Portfolio Piece: A functional timer is a great addition to your portfolio, showcasing your React skills.

This tutorial is designed to be clear, concise, and easy to follow. We’ll break down the project into manageable steps, explaining each concept along the way. Let’s get started!

Setting Up Your React Project

Before we start coding, we need to set up our React project. We’ll use Create React App, which simplifies the process significantly.

Open your terminal and run the following command:

npx create-react-app pomodoro-timer

This command creates a new React application named “pomodoro-timer”. Navigate into your project directory:

cd pomodoro-timer

Now, let’s start the development server:

npm start

This will open your app in your default web browser at `http://localhost:3000`. You should see the default React app screen. Now, let’s clean up the boilerplate code to prepare for our timer implementation.

Project Structure and Component Breakdown

Our Pomodoro timer will consist of a few key components:

  • App.js: The main component, managing the overall state of the timer and rendering the other components.
  • Timer.js: Responsible for displaying the timer and handling the countdown logic.
  • Controls.js: Contains the buttons for starting, pausing, and resetting the timer.

This structure promotes modularity and maintainability.

Building the Timer Component (Timer.js)

Let’s start by creating the Timer component. Create a new file named `Timer.js` inside the `src` folder. This component will display the remaining time and handle the countdown functionality.

Here’s the code for `Timer.js`:

import React from 'react';

function Timer(props) {
  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(props.timeLeft)}</h2>
    </div>
  );
}

export default Timer;

Let’s break down this code:

  • Import React: We import React to use its features.
  • formatTime Function: This function takes the time in seconds and formats it into `MM:SS` format. `padStart(2, ‘0’)` ensures that the minutes and seconds are always displayed with two digits (e.g., “05” instead of “5”).
  • Props: The Timer component receives `timeLeft` as a prop from the parent component (App.js). This prop represents the remaining time in seconds.
  • JSX: We render the formatted time within an `

    ` tag.

Creating the Controls Component (Controls.js)

Next, let’s create the Controls component. This component will house the buttons for starting, pausing, and resetting the timer. Create a new file named `Controls.js` inside the `src` folder.

Here’s the code for `Controls.js`:

import React from 'react';

function Controls(props) {
  return (
    <div>
      <button>Start</button>
      <button>Pause</button>
      <button>Reset</button>
    </div>
  );
}

export default Controls;

In this component:

  • We have three buttons: “Start”, “Pause”, and “Reset”.
  • Each button has an `onClick` event handler. These handlers call functions passed as props from the parent component (App.js).
  • These props (`onStart`, `onPause`, `onReset`) will contain the functions to control the timer’s behavior.

Building the Main App Component (App.js)

Now, let’s modify the `App.js` file. This component will orchestrate the timer’s state, render the Timer and Controls components, and manage the timer’s logic.

Replace the contents of `src/App.js` with the following code:

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

function App() {
  const [timeLeft, setTimeLeft] = useState(1500); // 25 minutes in seconds
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let intervalId;

    if (isRunning && timeLeft > 0) {
      intervalId = setInterval(() => {
        setTimeLeft(prevTime => prevTime - 1);
      }, 1000);
    }

    if (timeLeft === 0) {
      setIsRunning(false);
      // Optionally, add a sound notification here
    }

    return () => clearInterval(intervalId); // Cleanup interval on unmount or state changes
  }, [isRunning, timeLeft]);

  const handleStart = () => {
    setIsRunning(true);
  };

  const handlePause = () => {
    setIsRunning(false);
  };

  const handleReset = () => {
    setIsRunning(false);
    setTimeLeft(1500); // Reset to 25 minutes
  };

  return (
    <div>
      <h1>Pomodoro Timer</h1>
      
      
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` and `useEffect` from React, as well as the `Timer` and `Controls` components.
  • State Variables:
    • `timeLeft`: Stores the remaining time in seconds. Initialized to 1500 (25 minutes).
    • `isRunning`: A boolean value indicating whether the timer is running.
  • useEffect Hook: This hook handles the timer’s logic. It runs when `isRunning` or `timeLeft` changes. Here’s how it works:
    • Interval Setup: If `isRunning` is `true` and `timeLeft` is greater than 0, an interval is set up using `setInterval`. This interval decrements `timeLeft` by 1 every second.
    • Stopping the Timer: If `timeLeft` reaches 0, `setIsRunning` is set to `false` to stop the timer. (Optional: You can add sound notification here).
    • Cleanup: The `return` statement in `useEffect` is crucial. It clears the interval using `clearInterval` when the component unmounts or when `isRunning` or `timeLeft` changes. This prevents memory leaks and ensures the timer stops correctly.
  • Event Handlers:
    • `handleStart`: Sets `isRunning` to `true` to start the timer.
    • `handlePause`: Sets `isRunning` to `false` to pause the timer.
    • `handleReset`: Sets `isRunning` to `false` and resets `timeLeft` to 1500 (25 minutes).
  • JSX: The component renders the `Timer` and `Controls` components, passing the necessary props:
    • `Timer`: Receives `timeLeft` as a prop.
    • `Controls`: Receives `onStart`, `onPause`, and `onReset` as props, which are the event handler functions.

Styling Your Pomodoro Timer

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

.App {
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50; /* Green */
  color: white;
  cursor: pointer;
}

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

Make sure to import this CSS file into your `App.js` file by adding this line at the top of `App.js`:

import './App.css';

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

Running and Testing Your Timer

Now, save all your files and open your browser at `http://localhost:3000`. You should see your Pomodoro timer! Test it out:

  • Click the “Start” button. The timer should begin counting down from 25:00.
  • Click the “Pause” button to pause the timer.
  • Click the “Reset” button to reset the timer to 25:00.

If everything works as expected, congratulations! You’ve successfully built a simple Pomodoro timer with React.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Time Display: Double-check your `formatTime` function in `Timer.js`. Make sure it’s correctly converting seconds to minutes and seconds and padding with zeros when necessary.
  • Timer Not Starting: Ensure that the `isRunning` state is being correctly updated by the `handleStart` function and that the `useEffect` hook is correctly set up to start the interval when `isRunning` is `true`.
  • Timer Not Pausing: Verify that the `handlePause` function correctly sets `isRunning` to `false` and that the `useEffect` hook’s cleanup function is clearing the interval.
  • Timer Not Resetting: Make sure the `handleReset` function sets `isRunning` to `false` and resets `timeLeft` to the initial value (1500 seconds).
  • Memory Leaks: The most common cause of memory leaks in React timers is forgetting to clear the interval in the `useEffect` hook’s cleanup function. Always include `return () => clearInterval(intervalId);` to prevent this.
  • Incorrect Prop Passing: Carefully check that you are correctly passing props (e.g., `timeLeft`, `onStart`, `onPause`, `onReset`) from the parent component (App.js) to the child components (Timer.js and Controls.js).

Enhancements and Next Steps

Now that you have a basic Pomodoro timer, you can enhance it in several ways:

  • Add Short and Long Breaks: Implement different timer durations for work sessions, short breaks, and long breaks.
  • Add Sound Notifications: Play a sound when the timer reaches zero. You can use the Web Audio API or a library like `howler.js`.
  • Customize Timer Durations: Allow users to configure the work session, short break, and long break durations.
  • Implement a Progress Bar: Display a visual progress bar to indicate the remaining time.
  • Save Settings: Use local storage to save user preferences (timer durations, theme, etc.).
  • Add a Theme Switcher: Allow the user to change the color scheme of the timer.
  • Use TypeScript: Rewrite the app using TypeScript for improved type safety and code maintainability.

Key Takeaways

This tutorial has walked you through building a simple Pomodoro timer application using React. You’ve learned about:

  • Component Structure: How to break down a UI into reusable components.
  • State Management: How to use `useState` to manage the timer’s state (time remaining and running status).
  • Event Handling: How to handle button clicks and trigger actions.
  • `useEffect` Hook: How to use `useEffect` to manage side effects, such as the timer’s countdown.
  • Prop Passing: How to pass data and functions between components.

By building this timer, you’ve gained practical experience with essential React concepts. Remember to practice, experiment, and explore the enhancements mentioned above to solidify your understanding and further develop your React skills.

FAQ

Here are some frequently asked questions:

  1. How do I handle the timer reaching zero?

    In the `useEffect` hook, add a condition to check if `timeLeft` is zero. When it is, set `isRunning` to `false` and optionally trigger a sound notification.

  2. How can I add sound notifications?

    You can use the Web Audio API or a library like `howler.js`. When the timer reaches zero, play a sound using one of these methods.

  3. How do I customize the timer durations?

    Add state variables to store the work session, short break, and long break durations. Then, allow the user to modify these values through input fields or settings.

  4. Why is the timer not updating?

    Make sure that the `setTimeLeft` function is correctly updating the `timeLeft` state within the `useEffect` hook’s interval. Also, ensure that the `useEffect` hook’s dependencies (`isRunning` and `timeLeft`) are correctly specified.

Building this Pomodoro timer is a rewarding project that combines practical application with fundamental React knowledge. The concepts you’ve learned here—state management, component lifecycles, and event handling—are the building blocks of more complex React applications. As you continue your React journey, remember to break down problems into smaller, manageable parts, test your code frequently, and don’t be afraid to experiment. The more you build, the more confident you’ll become. So, keep coding, keep learning, and keep creating! The journey of a thousand lines of code begins with a single component. Apply these principles, and your React skills will flourish.

More posts