Build a Simple Next.js Interactive Web-Based Pomodoro Timer

Written by

javascriptdebugged

in

In the whirlwind of modern life, time management is a crucial skill. The Pomodoro Technique, a time management method developed by Francesco Cirillo, is 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 and visually appealing Pomodoro Timer using Next.js, a powerful React framework for building web applications. We’ll explore the core concepts, step-by-step implementation, and common pitfalls to ensure you can create your own timer and start mastering your time.

Why Build a Pomodoro Timer?

Creating a Pomodoro Timer is an excellent project for both learning Next.js and understanding the Pomodoro Technique. It allows you to:

  • Practice Core Next.js Concepts: You’ll work with state management, component creation, event handling, and conditional rendering, all fundamental aspects of Next.js development.
  • Enhance Productivity: Implementing the Pomodoro Technique in a digital format can help you focus, reduce distractions, and improve your work habits.
  • Build a Practical Tool: You’ll have a usable timer that you can customize and integrate into your daily workflow.
  • Showcase Your Skills: This project is a great addition to your portfolio, demonstrating your proficiency in front-end development.

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 development server.
  • A code editor: Visual Studio Code, Sublime Text, or any editor you prefer.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to follow the tutorial.
  • A Next.js project setup: If you don’t have one, we’ll guide you through it in the next section.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app pomodoro-timer

This command will create a new directory named “pomodoro-timer” with all the necessary files for a Next.js application. Navigate into the project directory:

cd pomodoro-timer

Now, start the development server:

npm run dev

You should see a message in your terminal indicating that the server is running, typically on `http://localhost:3000`. Open this address in your browser to see the default Next.js welcome page. With the basic setup out of the way, we are ready to start building our timer.

Project Structure and Component Breakdown

Our Pomodoro Timer will consist of a few key components:

  • TimerDisplay: Displays the current time remaining in the Pomodoro or break session.
  • TimerControls: Contains the start, pause, and reset buttons.
  • Settings: Will allow the user to adjust the working and break times.
  • App (pages/_app.js): The main application component, which will orchestrate the other components.

We’ll structure our project in a way that makes it easy to maintain and understand. The core logic of the timer will be encapsulated within the TimerDisplay component. The TimerControls component will handle user interactions, and the settings component will provide the user the ability to adjust the timer settings. Let’s start with the heart of our application, the TimerDisplay component.

Creating the TimerDisplay Component

Create a new file named `components/TimerDisplay.js` in your project directory. This component will display the time remaining in the current session. Add the following code:

// components/TimerDisplay.js
import React from 'react';

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

  return (
    <div className="timer-display">
      <h1>{formattedTime}</h1>
      <div className="timer-controls">
        {!isRunning ? (
          <button onClick={onStart}>Start</button>
        ) : (
          <button onClick={onPause}>Pause</button>
        )}
        <button onClick={onReset}>Reset</button>
      </div>
    </div>
  );
}

export default TimerDisplay;

In this component:

  • We receive `timeLeft`, `isRunning`, `onStart`, `onPause`, and `onReset` as props. `timeLeft` represents the remaining time in seconds, `isRunning` indicates whether the timer is active, and the other props are callback functions for handling start, pause, and reset actions.
  • We use `Math.floor()` and the modulo operator (`%`) to convert the `timeLeft` (in seconds) into minutes and seconds.
  • `padStart(2, ‘0’)` ensures that minutes and seconds are always displayed with two digits (e.g., “05” instead of “5”).
  • We conditionally render the start or pause button based on the `isRunning` prop.

Next, we will implement the TimerControls component.

Creating the TimerControls Component

Create a file named `components/TimerControls.js`. This component is responsible for the buttons the user will interact with.

// components/TimerControls.js
import React from 'react';

function TimerControls({ isRunning, onStart, onPause, onReset }) {
  return (
    <div className="timer-controls">
      {!isRunning ? (
        <button onClick={onStart}>Start</button>
      ) : (
        <button onClick={onPause}>Pause</button>
      )}
      <button onClick={onReset}>Reset</button>
    </div>
  );
}

export default TimerControls;

This component is relatively simple. It conditionally renders the start or pause button depending on the `isRunning` prop and includes a reset button. Next, let’s create the Settings component.

Creating the Settings Component

Create a file named `components/Settings.js`. This component will give users control over the duration of the work and break intervals.


// components/Settings.js
import React, { useState } from 'react';

function Settings({ onSettingsChange, workTime, breakTime }) {
  const [localWorkTime, setLocalWorkTime] = useState(workTime);
  const [localBreakTime, setLocalBreakTime] = useState(breakTime);

  const handleWorkTimeChange = (e) => {
    setLocalWorkTime(parseInt(e.target.value, 10));
  };

  const handleBreakTimeChange = (e) => {
    setLocalBreakTime(parseInt(e.target.value, 10));
  };

  const handleSaveSettings = () => {
    onSettingsChange(localWorkTime, localBreakTime);
  };

  return (
    <div className="settings">
      <label>Work Time (minutes):</label>
      <input
        type="number"
        value={localWorkTime}
        onChange={handleWorkTimeChange}
      />
      <br />
      <label>Break Time (minutes):</label>
      <input
        type="number"
        value={localBreakTime}
        onChange={handleBreakTimeChange}
      />
      <br />
      <button onClick={handleSaveSettings}>Save</button>
    </div>
  );
}

export default Settings;

In the Settings component:

  • We use the `useState` hook to manage the local state of work and break times.
  • `handleWorkTimeChange` and `handleBreakTimeChange` update the local state when the input values change.
  • `handleSaveSettings` calls the `onSettingsChange` prop function, which is passed down from the parent component, to update the timer settings.

Integrating Components in the App

Now, let’s integrate these components into our main application. Open `pages/index.js` and replace the existing content with the following code:


// pages/index.js
import React, { useState, useEffect } from 'react';
import TimerDisplay from '../components/TimerDisplay';
import TimerControls from '../components/TimerControls';
import Settings from '../components/Settings';

function HomePage() {
  const [timeLeft, setTimeLeft] = useState(25 * 60); // Initial time in seconds (25 minutes)
  const [isRunning, setIsRunning] = useState(false);
  const [timerType, setTimerType] = 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 timer;

    if (isRunning && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      // Timer finished
      if (timerType === 'work') {
        setTimerType('break');
        setTimeLeft(breakTime);
      } else {
        setTimerType('work');
        setTimeLeft(workTime);
      }
      setIsRunning(false);
    }

    return () => clearInterval(timer);
  }, [isRunning, timeLeft, timerType, workTime, breakTime]);

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

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

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

  const handleSettingsChange = (newWorkTime, newBreakTime) => {
    setWorkTime(newWorkTime * 60);
    setBreakTime(newBreakTime * 60);
    setTimeLeft(newWorkTime * 60); // Reset the timer to the new work time
    setTimerType('work'); // Reset to work mode
  };

  return (
    <div className="container">
      <TimerDisplay
        timeLeft={timeLeft}
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
      <TimerControls
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
      <Settings onSettingsChange={handleSettingsChange} workTime={workTime / 60} breakTime={breakTime / 60} />
    </div>
  );
}

export default HomePage;

In this component:

  • We import the `TimerDisplay`, `TimerControls`, and `Settings` components.
  • We use the `useState` hook to manage the timer’s state, including `timeLeft`, `isRunning`, `timerType` (work or break), `workTime`, and `breakTime`.
  • The `useEffect` hook is used to handle the timer’s logic:
    • It starts 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, resets the `timeLeft` to the corresponding duration, and stops the timer.
    • The `useEffect` hook also includes a cleanup function (`return () => clearInterval(timer);`) to clear the interval when the component unmounts or when the dependencies (`isRunning`, `timeLeft`, `timerType`, `workTime`, `breakTime`) change, preventing memory leaks.
  • We define functions (`handleStart`, `handlePause`, `handleReset`, and `handleSettingsChange`) to handle user interactions and update the state.
  • We pass the necessary props to the child components.

Adding Styles (CSS)

To make our timer visually appealing, let’s add some CSS. Create a file named `styles/Home.module.css` in your project directory (if it doesn’t already exist). Add the following CSS:


/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: sans-serif;
  background-color: #f0f0f0;
}

.timer-display {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.timer-controls {
  margin-bottom: 20px;
}

.timer-controls button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #0070f3;
  color: white;
  cursor: pointer;
}

.timer-controls button:hover {
  background-color: #0056b3;
}

.settings {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

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

.settings input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Import this CSS file into `pages/index.js`:


// pages/index.js
import styles from '../styles/Home.module.css';

function HomePage() {
  // ... rest of the code
  return (
    <div className={styles.container}>
      <TimerDisplay
        timeLeft={timeLeft}
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
      <TimerControls
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
      <Settings onSettingsChange={handleSettingsChange} workTime={workTime / 60} breakTime={breakTime / 60} />
    </div>
  );
}

export default HomePage;

And apply the styles by adding `className={styles.container}` to the main `div` in `pages/index.js` and referencing the styles from the imported `styles` object.

Testing and Refining

Now, run your Next.js application (if it’s not already running) using `npm run dev` in your terminal and navigate to `http://localhost:3000` in your browser. You should see the Pomodoro Timer with the display, start/pause/reset buttons, and settings. Test the following:

  • Start and Pause: Verify that the timer starts and pauses correctly.
  • Reset: Ensure that the timer resets to the initial time.
  • Time Display: Check that the time counts down accurately and displays minutes and seconds correctly.
  • Settings: Test that you can change the work and break times and that the changes are reflected in the timer.
  • Work and Break Cycles: Confirm that the timer switches between work and break cycles automatically.

Address any issues you find. This testing phase is critical to ensure the timer functions as expected.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Time Conversion: Ensure that you are correctly converting minutes to seconds when setting the initial time and when updating the `timeLeft`.
  • Interval Not Clearing: Always clear the interval using `clearInterval(timer)` when the component unmounts or when the timer is paused or reset to prevent memory leaks. This is especially important in the `useEffect` hook.
  • Missing Dependencies in `useEffect`: When using `useEffect` with an interval, make sure to include all state variables that the effect depends on in the dependency array (e.g., `isRunning`, `timeLeft`, `timerType`, `workTime`, `breakTime`). This ensures that the effect re-runs when those variables change.
  • CSS Issues: Double-check your CSS selectors and ensure that you’ve imported the CSS file correctly in your component. Use your browser’s developer tools to inspect the elements and see if the styles are being applied.
  • State Updates Not Triggering Re-renders: If the UI is not updating, make sure you are correctly updating the state variables using the `set…` functions provided by the `useState` hook.

Key Takeaways and Next Steps

Congratulations! You’ve successfully built a Pomodoro Timer using Next.js. Here’s what you’ve learned:

  • Next.js Fundamentals: You’ve gained practical experience with component creation, state management, event handling, and conditional rendering.
  • `useEffect` Hook: You’ve mastered how to use `useEffect` for managing side effects, particularly with timers and intervals.
  • Component Communication: You’ve learned how to pass data and functions between components using props.
  • CSS Styling: You’ve applied basic CSS to create a functional and visually appealing user interface.

To further enhance your timer, consider the following:

  • Add Sounds: Implement sound notifications at the end of work and break intervals.
  • Persistent Storage: Use local storage or cookies to save the user’s settings.
  • Customization: Allow users to customize the timer’s appearance and behavior, such as the number of Pomodoro cycles.
  • Error Handling: Implement error handling to gracefully handle unexpected situations.
  • Accessibility: Ensure your timer is accessible to users with disabilities by adding ARIA attributes and keyboard navigation.

FAQ

Here are some frequently asked questions about the Pomodoro Timer project:

  1. How do I change the default work and break times?

    You can change the default work and break times by modifying the initial values of the `workTime` and `breakTime` states in the `pages/index.js` file. However, the Settings component allows you to customize the work and break times dynamically.

  2. Why isn’t the timer starting?

    Make sure that the `isRunning` state is being correctly set to `true` when the start button is clicked and that the `useEffect` hook is set up correctly to start the timer when `isRunning` is `true`.

  3. How do I add sound notifications?

    You can add sound notifications by using the `<audio>` HTML element and playing a sound when the `timeLeft` reaches 0. You can also use libraries like Howler.js for more advanced sound management.

  4. How can I deploy this application?

    You can deploy your Next.js application to various platforms, such as Vercel (which is recommended), Netlify, or AWS. Vercel is particularly well-suited for Next.js applications and offers a straightforward deployment process.

Building this Pomodoro Timer is just the beginning. The concepts you’ve learned can be applied to many other projects, from simple web applications to complex, interactive interfaces. Keep experimenting, keep learning, and keep building. Your journey in web development is just getting started, and each project you undertake will contribute to your growing skill set and understanding. Embrace the challenges, celebrate the successes, and never stop exploring the endless possibilities that coding offers. The ability to create something functional and useful from scratch is incredibly rewarding, and your Pomodoro Timer stands as a testament to your dedication and growing expertise.

More posts