Build a Simple React JS Pomodoro Clock: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s fast-paced world, time management is more crucial than ever. The Pomodoro Technique, a time management method developed by Francesco Cirillo, offers a simple yet effective way to boost productivity by breaking work into focused intervals, traditionally 25 minutes in length, separated by short breaks. This tutorial will guide you through building a functional Pomodoro Clock using React JS. Whether you’re a student, a freelancer, or simply someone looking to improve their focus, this project will help you understand the fundamentals of React while providing a useful tool for your daily routine.

Why Build a Pomodoro Clock with React JS?

React JS is a powerful JavaScript library for building user interfaces. It’s component-based, making it easy to create reusable UI elements. Building a Pomodoro Clock with React offers several advantages:

  • Component-Based Architecture: React allows you to break down the clock into smaller, manageable components, making the code easier to understand and maintain.
  • State Management: React’s state management capabilities are perfect for handling the timer’s countdown, break, and session durations.
  • User Interface (UI) Updates: React efficiently updates the UI based on changes in the state, ensuring the clock displays the correct time and status.
  • Learning Opportunity: Building this project will provide hands-on experience with React’s core concepts, such as components, state, props, and event handling.

By the end of this tutorial, you’ll have a working Pomodoro Clock that you can customize and use to enhance your productivity.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing JavaScript packages and running React applications.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will help you follow along more easily.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor you prefer.

Project Setup

Let’s start by setting up our React project. Open your terminal and run the following commands:

npx create-react-app pomodoro-clock
cd pomodoro-clock

This will create a new React app named “pomodoro-clock” and navigate you into the project directory. Next, let’s clean up the boilerplate code. Open the following files and remove their contents, replacing them with the code snippets below:

  • src/App.js:
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Pomodoro Clock</h1>
      </header>
    </div>
  );
}

export default App;
  • src/App.css:
.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
  • src/index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  • src/index.css:
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Now, run the app using the command: npm start. This will open the app in your browser, displaying a simple “Pomodoro Clock” header. We’re ready to start building the clock’s functionality.

Creating the Timer Component

Let’s create a new component called Timer that will handle the timer logic and display. Create a new file named Timer.js in the src directory and add the following code:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    let timerId;

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

    if (timeLeft === 0) {
      setIsRunning(false);
      // Add a sound notification here (optional)
    }

    return () => clearInterval(timerId);
  }, [isRunning, timeLeft]);

  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

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

  const handleReset = () => {
    setTimeLeft(25 * 60);
    setIsRunning(false);
  };

  return (
    <div>
      <h2>Time Remaining: {formattedTime}</h2>
      <button onClick={handleStartStop}>{isRunning ? 'Pause' : 'Start'}</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default Timer;

Let’s break down this code:

  • Import Statements: We import useState and useEffect from React.
  • State Variables:
    • timeLeft: Stores the remaining time in seconds. Initially set to 25 minutes (25 * 60 seconds).
    • isRunning: A boolean that indicates whether the timer is running or paused.
  • useEffect Hook: This hook handles the timer’s logic.
    • It sets up an interval using setInterval that decrements the timeLeft every second (1000 milliseconds) when isRunning is true and timeLeft is greater than 0.
    • The interval is cleared using clearInterval when the component unmounts or when isRunning changes.
    • When timeLeft reaches 0, isRunning is set to false, and optionally, a sound notification can be added.
  • Time Formatting:
    • Calculates minutes and seconds from timeLeft.
    • Formats the time into a “MM:SS” string.
  • Event Handlers:
    • handleStartStop: Toggles the isRunning state.
    • handleReset: Resets the timeLeft to 25 minutes and stops the timer.
  • JSX: The component renders the formatted time, a start/pause button, and a reset button.

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

import React from 'react';
import './App.css';
import Timer from './Timer';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Pomodoro Clock</h1>
        <Timer />
      </header>
    </div>
  );
}

export default App;

Save the files and check your browser. You should see the timer display, and you should be able to start, pause, and reset it. However, the timer is still hardcoded to 25 minutes. Let’s add the ability to customize the session and break lengths.

Adding Session and Break Length Controls

We’ll add two new components: one for controlling the session length and another for controlling the break length. Let’s start with the session length. Create a new file named SessionLength.js in the src directory:

import React from 'react';

function SessionLength({ sessionLength, setSessionLength, isRunning }) {
  const handleIncrement = () => {
    if (!isRunning && sessionLength  prevLength + 1);
    }
  };

  const handleDecrement = () => {
    if (!isRunning && sessionLength > 1) {
      setSessionLength(prevLength => prevLength - 1);
    }
  };

  return (
    <div>
      <h3>Session Length</h3>
      <button onClick={handleDecrement} disabled={isRunning}>-</button>
      <span>{sessionLength}</span>
      <button onClick={handleIncrement} disabled={isRunning}>+</button>
    </div>
  );
}

export default SessionLength;

This component takes sessionLength, setSessionLength (a function to update the session length), and isRunning as props. It includes buttons to increment and decrement the session length, with disabled attributes to prevent changes while the timer is running. Now create a file named BreakLength.js in the src directory:

import React from 'react';

function BreakLength({ breakLength, setBreakLength, isRunning }) {
  const handleIncrement = () => {
    if (!isRunning && breakLength  prevLength + 1);
    }
  };

  const handleDecrement = () => {
    if (!isRunning && breakLength > 1) {
      setBreakLength(prevLength => prevLength - 1);
    }
  };

  return (
    <div>
      <h3>Break Length</h3>
      <button onClick={handleDecrement} disabled={isRunning}>-</button>
      <span>{breakLength}</span>
      <button onClick={handleIncrement} disabled={isRunning}>+</button>
    </div>
  );
}

export default BreakLength;

This component is very similar to SessionLength, but it manages the break length. Now, update the App.js file to include these components and manage their state:

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

function App() {
  const [sessionLength, setSessionLength] = useState(25);
  const [breakLength, setBreakLength] = useState(5);
  const [timerType, setTimerType] = useState('session'); // 'session' or 'break'
  const [timeLeft, setTimeLeft] = useState(sessionLength * 60);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    setTimeLeft(sessionLength * 60);
  }, [sessionLength]);

  useEffect(() => {
    let timerId;

    if (isRunning && timeLeft > 0) {
      timerId = setInterval(() => {
        setTimeLeft(prevTime => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      // Switch between session and break
      if (timerType === 'session') {
        setTimerType('break');
        setTimeLeft(breakLength * 60);
      } else {
        setTimerType('session');
        setTimeLeft(sessionLength * 60);
      }
      // Add a sound notification here (optional)
      setIsRunning(true); // Restart the timer for the new type
    }

    return () => clearInterval(timerId);
  }, [isRunning, timeLeft, breakLength, sessionLength, timerType]);

  const handleReset = () => {
    setSessionLength(25);
    setBreakLength(5);
    setTimeLeft(25 * 60);
    setTimerType('session');
    setIsRunning(false);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Pomodoro Clock</h1>
        <div className="controls">
          <SessionLength sessionLength={sessionLength}
                         setSessionLength={setSessionLength}
                         isRunning={isRunning} />
          <BreakLength breakLength={breakLength}
                       setBreakLength={setBreakLength}
                       isRunning={isRunning} />
        </div>
        <Timer timeLeft={timeLeft} 
               setTimeLeft={setTimeLeft} 
               isRunning={isRunning} 
               setIsRunning={setIsRunning} 
               handleReset={handleReset} />
      </header>
    </div>
  );
}

export default App;

Here’s what’s new in App.js:

  • State Variables:
    • sessionLength: Stores the session length in minutes.
    • breakLength: Stores the break length in minutes.
    • timerType: Indicates whether the timer is in “session” or “break” mode.
  • useEffect for Session Length: When the session length changes, it updates the timer.
  • useEffect for Timer Logic: The core timer logic now includes switching between session and break times when the timer reaches zero. It also includes a sound notification (optional).
  • handleReset: The reset function now resets all the lengths.
  • Passing Props: The SessionLength and BreakLength components receive the necessary state and setter functions as props. The Timer component now receives the timeLeft, setTimeLeft, isRunning, setIsRunning, and handleReset props.

Update Timer.js to receive and use the new props:

import React, { useState, useEffect } from 'react';

function Timer({ timeLeft, setTimeLeft, isRunning, setIsRunning, handleReset }) {
  useEffect(() => {
    let timerId;

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

    return () => clearInterval(timerId);
  }, [isRunning, timeLeft, setTimeLeft]);

  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

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

  return (
    <div>
      <h2>Time Remaining: {formattedTime}</h2>
      <button onClick={handleStartStop}>{isRunning ? 'Pause' : 'Start'}</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default Timer;

Finally, add some basic styling to App.css to arrange the components:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.controls {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin-bottom: 20px;
}

Now, when you run your app, you should be able to adjust the session and break lengths, and the timer will start and switch between session and break times.

Adding Sound Notifications (Optional)

To enhance the user experience, you can add sound notifications when the timer reaches zero. First, you’ll need a sound file (e.g., a short beep or chime). You can find free sound effects online. Place the sound file (e.g., “beep.mp3”) in the public directory of your React app.

Next, in App.js, import the sound file and add the following code inside the useEffect hook where you handle the timer reaching zero:

import beepSound from './beep.mp3'; // Import the sound file

  // ... inside the useEffect hook, after setting isRunning to false
  if (timeLeft === 0) {
    setIsRunning(false);
    const audio = new Audio(beepSound);
    audio.play();
  }

This will play the sound when the timer hits zero. Make sure your sound file is accessible in the public directory and that the path is correct.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check the file paths for your components and the sound file. React is case-sensitive.
  • State Updates Not Triggering Re-renders: Ensure you’re updating the state using the correct setter functions (e.g., setSessionLength, setTimeLeft). If a state variable doesn’t update, the UI won’t re-render.
  • Infinite Loops in useEffect: Make sure your useEffect dependencies are correct. If you have a dependency that, when changed, causes the effect to run again, you might create an infinite loop.
  • Timer Not Stopping: Verify that the clearInterval function is called when the component unmounts or when the timer is paused.
  • Sound Not Playing: Check the browser’s console for any errors related to the audio file. Ensure the path to the sound file is correct and that the browser supports the audio format.

Key Takeaways

  • Component Reusability: React components allow you to build reusable UI elements.
  • State Management: Using useState effectively manages the timer’s state.
  • Event Handling: Handling user interactions with event handlers.
  • Lifecycle Methods (useEffect): Managing side effects like setting up and clearing the timer interval.
  • Props: Passing data and functions between components using props.

FAQ

Q: How can I customize the appearance of the clock?

A: You can customize the clock’s appearance by modifying the CSS in App.css. You can change colors, fonts, and layout to match your preferences.

Q: Can I add more features to the clock?

A: Yes! You can add features like:

  • A visual progress bar.
  • The ability to save custom session and break lengths.
  • A history of completed pomodoros.
  • Different sound options.

Q: How do I deploy this app?

A: You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting for static websites. You’ll typically build your app using npm run build and then upload the contents of the build directory to the hosting platform.

Q: What if the timer doesn’t work correctly?

A: Double-check your code for any errors. Inspect the browser’s console for error messages. Ensure your dependencies are installed correctly and that your component structure is set up properly. Review the troubleshooting steps above.

Q: Can I use this clock on my phone?

A: Absolutely! The Pomodoro Clock is built using web technologies, so it will work on any device with a web browser, including smartphones and tablets. Make sure the app is responsive, so it looks good on different screen sizes.

Building a Pomodoro Clock with React JS is a fantastic project for both beginners and intermediate developers. It allows you to practice essential React concepts while creating a useful tool for time management. By following the steps in this tutorial, you’ve gained hands-on experience with components, state management, and event handling. Remember that the journey of a thousand lines of code begins with a single step. Keep experimenting, exploring, and iterating on your projects, and you’ll continue to grow as a React developer. The ability to structure and manage time effectively is a valuable skill in any field, and this project serves as a practical application of that principle, making it a rewarding experience that extends beyond the realm of code. Now, go forth, code, and conquer your deadlines!

More posts