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

Written by

javascriptdebugged

in

In today’s fast-paced world, time management is crucial for productivity. The Pomodoro Technique, a time management method, uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks. This article will guide you through building a simple, yet functional, Pomodoro timer using Next.js, a powerful React framework, enabling you to boost your focus and efficiency while learning practical web development skills.

Why Build a Pomodoro Timer?

Creating a Pomodoro timer in Next.js is an excellent project for several reasons:

  • Practical Application: You’ll build something you can use daily to improve your productivity.
  • Learn Core Concepts: The project covers fundamental concepts like state management, event handling, and component lifecycle, essential for any React developer.
  • Hands-on Experience: You’ll gain practical experience in building interactive web applications.
  • SEO Benefits: Building projects like this can enhance your portfolio, demonstrating your skills to potential employers.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): You’ll need these to manage project dependencies and run the development server.
  • Basic knowledge of JavaScript and React: Familiarity with these technologies will help you understand the code.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor of your choice.

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 creates a new Next.js project named “pomodoro-timer”. Navigate into your project directory:

cd pomodoro-timer

Now, start the development server:

npm run dev

Your Next.js application should now be running, typically on http://localhost:3000. You should see the default Next.js welcome page.

Project Structure and Component Breakdown

Our Pomodoro timer will consist of a few key components:

  • TimerDisplay: Displays the remaining time.
  • TimerControls: Contains the start, pause, and reset buttons.
  • Settings: (Optional) Allows users to customize work and break durations.
  • App (pages/index.js): The main component that orchestrates the timer and its components.

Building the TimerDisplay Component

Let’s create the TimerDisplay component. Create a new file, components/TimerDisplay.js, and add the following code:

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

function TimerDisplay({ minutes, seconds }) {
  return (
    <div className="timer-display"
         style={{
           fontSize: '4em',
           textAlign: 'center',
           marginBottom: '20px'
         }}>
      {minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}
    </div>
  );
}

export default TimerDisplay;

This component takes `minutes` and `seconds` as props and renders the time in a user-friendly format (MM:SS). The `padStart(2, ‘0’)` method ensures that single-digit numbers are displayed with a leading zero.

Building the TimerControls Component

Now, let’s create the TimerControls component. Create a new file, components/TimerControls.js, and add the following code:

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

function TimerControls({ isRunning, onStart, onPause, onReset }) {
  return (
    <div className="timer-controls" style={{ textAlign: 'center' }}>
      <button onClick={onStart} disabled={isRunning} style={{ marginRight: '10px' }}>
        Start
      </button>
      <button onClick={onPause} disabled={!isRunning} style={{ marginRight: '10px' }}>
        Pause
      </button>
      <button onClick={onReset}>Reset</button>
    </div>
  );
}

export default TimerControls;

This component includes three buttons: Start, Pause, and Reset. The `isRunning` prop determines whether the Start and Pause buttons are enabled or disabled. The `onStart`, `onPause`, and `onReset` props are functions that will be called when the corresponding buttons are clicked. We’re using inline styles for simplicity here, but in a real-world application, you’d likely use CSS classes or a CSS-in-JS solution.

Building the Main App Component (pages/index.js)

Now, let’s build the main component, which orchestrates the entire timer. Open pages/index.js and replace the existing code with the following:

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

function Home() {
  const [minutes, setMinutes] = useState(25);
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let intervalId = null;

    if (isRunning) {
      intervalId = setInterval(() => {
        if (seconds === 0) {
          if (minutes === 0) {
            // Timer finished
            setIsRunning(false);
            // Add sound or notification here
          } else {
            setMinutes(minutes - 1);
            setSeconds(59);
          }
        } else {
          setSeconds(seconds - 1);
        }
      }, 1000);
    }

    return () => clearInterval(intervalId);
  }, [isRunning, seconds, minutes]);

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

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

  const handleReset = () => {
    setIsRunning(false);
    setMinutes(25);
    setSeconds(0);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Pomodoro Timer</h2>
      <TimerDisplay minutes={minutes} seconds={seconds} />
      <TimerControls
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
    </div>
  );
}

export default Home;

Let’s break down this code:

  • State Variables: We use the `useState` hook to manage the timer’s state: minutes, seconds, and isRunning.
  • useEffect Hook: The `useEffect` hook is used to handle the timer’s logic. It runs a `setInterval` function that decrements the `seconds` and `minutes` every second when `isRunning` is true. The dependency array `[isRunning, seconds, minutes]` ensures that the effect re-runs whenever these values change. The `clearInterval` function is crucial for cleaning up the interval when the component unmounts or when `isRunning` becomes false, preventing memory leaks.
  • Event Handlers: handleStart, handlePause, and handleReset functions are used to update the `isRunning` state and reset the timer.
  • Component Composition: We render the TimerDisplay and TimerControls components, passing the necessary props to them.

Adding Styles (Optional)

While the above code is functional, it could benefit from some styling to improve its appearance. You can add CSS styles in several ways in Next.js:

  • Inline Styles: As demonstrated in the code examples, you can use inline styles. This is suitable for quick styling and basic modifications.
  • CSS Modules: Create a CSS module file (e.g., styles/Timer.module.css) and import it into your component: import styles from '../styles/Timer.module.css';. Then, use the styles by applying them as class names: <div className={styles.timerDisplay}>. This approach provides scoped CSS, preventing style conflicts.
  • Global CSS: Add global styles to your styles/globals.css file. However, use this sparingly, as it can affect the entire application.
  • CSS-in-JS (e.g., Styled Components, Emotion): These libraries allow you to write CSS within your JavaScript code. This offers great flexibility and dynamic styling capabilities.
  • Tailwind CSS: Tailwind CSS is a utility-first CSS framework. It is very popular and can be added to your Next.js project.

For this example, let’s use a very basic CSS module. Create a file named styles/Timer.module.css and add the following:

/* styles/Timer.module.css */
.timerDisplay {
  font-size: 4em;
  text-align: center;
  margin-bottom: 20px;
}

.timerControls {
  text-align: center;
}

Then, modify components/TimerDisplay.js and pages/index.js to use the styles:

// components/TimerDisplay.js
import React from 'react';
import styles from '../styles/Timer.module.css';

function TimerDisplay({ minutes, seconds }) {
  return (
    <div className={styles.timerDisplay}>
      {minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}
    </div>
  );
}

export default TimerDisplay;

// pages/index.js
import React, { useState, useEffect } from 'react';
import TimerDisplay from '../components/TimerDisplay';
import TimerControls from '../components/TimerControls';
import styles from '../styles/Timer.module.css';

function Home() {
  const [minutes, setMinutes] = useState(25);
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let intervalId = null;

    if (isRunning) {
      intervalId = setInterval(() => {
        if (seconds === 0) {
          if (minutes === 0) {
            // Timer finished
            setIsRunning(false);
            // Add sound or notification here
          } else {
            setMinutes(minutes - 1);
            setSeconds(59);
          }
        } else {
          setSeconds(seconds - 1);
        }
      }, 1000);
    }

    return () => clearInterval(intervalId);
  }, [isRunning, seconds, minutes]);

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

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

  const handleReset = () => {
    setIsRunning(false);
    setMinutes(25);
    setSeconds(0);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Pomodoro Timer</h2>
      <TimerDisplay minutes={minutes} seconds={seconds} />
      <TimerControls
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
    </div>
  );
}

export default Home;

You can customize the styles further to improve the timer’s visual appearance.

Handling Timer Completion

Currently, the timer stops when it reaches 00:00. To enhance the user experience, you could add the following features:

  • Sound Notification: Play a sound when the timer finishes. You can use the <audio> HTML element or a library like Howler.js.
  • Visual Notification: Change the background color or display a message to indicate the timer has completed.
  • Automatic Break/Work Cycle: Implement a cycle between work and break intervals. This is the core concept of the Pomodoro Technique.

Here’s an example of how to add a sound notification when the timer finishes. First, add an audio file (e.g., “alarm.mp3”) to your public directory. Then, modify the pages/index.js file:

// pages/index.js
import React, { useState, useEffect } from 'react';
import TimerDisplay from '../components/TimerDisplay';
import TimerControls from '../components/TimerControls';
import styles from '../styles/Timer.module.css';

function Home() {
  const [minutes, setMinutes] = useState(25);
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [isBreak, setIsBreak] = useState(false);

  useEffect(() => {
    let intervalId = null;

    if (isRunning) {
      intervalId = setInterval(() => {
        if (seconds === 0) {
          if (minutes === 0) {
            // Timer finished
            setIsRunning(false);
            setIsBreak(!isBreak); // Toggle break/work
            setMinutes(isBreak ? 25 : 5); // Set break or work minutes
            setSeconds(0);
            // Play sound
            const audio = new Audio('/alarm.mp3');
            audio.play();
          } else {
            setMinutes(minutes - 1);
            setSeconds(59);
          }
        } else {
          setSeconds(seconds - 1);
        }
      }, 1000);
    }

    return () => clearInterval(intervalId);
  }, [isRunning, seconds, minutes, isBreak]);

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

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

  const handleReset = () => {
    setIsRunning(false);
    setMinutes(25);
    setSeconds(0);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Pomodoro Timer</h2>
      <TimerDisplay minutes={minutes} seconds={seconds} />
      <TimerControls
        isRunning={isRunning}
        onStart={handleStart}
        onPause={handlePause}
        onReset={handleReset}
      />
    </div>
  );
}

export default Home;

This modified version includes these changes:

  • isBreak state: A new state variable, `isBreak`, is added to track whether the timer is in a work or break cycle.
  • Cycle logic: When the timer finishes, `setIsBreak` toggles the `isBreak` state, and the `setMinutes` function sets the timer duration based on `isBreak` (25 for work, 5 for break).
  • Sound: An <audio> element is used to play the alarm sound. The audio file is located in the public directory to ensure it is accessible.

Adding User Settings (Advanced)

For more advanced users, you could add settings to customize the work and break durations. This would require creating a settings component and managing those settings in the state. This is a more complex undertaking, but it would greatly increase the timer’s flexibility.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Timer Not Updating: Ensure that the `useEffect` hook’s dependency array includes all the state variables that the timer logic depends on (e.g., `isRunning`, `seconds`, `minutes`).
  • Memory Leaks: Always clear the `setInterval` using `clearInterval` in the `useEffect`’s cleanup function (the return statement).
  • Incorrect Time Display: Double-check that you are using padStart(2, '0') correctly to format the time and that the values of minutes and seconds are correctly updated.
  • Sound Not Playing: Verify that the audio file path is correct, the file exists in the correct directory, and the browser isn’t blocking autoplay (users often need to interact with the page first).
  • Button Functionality: Ensure the `onStart`, `onPause`, and `onReset` functions are correctly passed as props to the `TimerControls` component and are correctly implemented in the parent component (e.g., pages/index.js).

Key Takeaways

  • State Management: Using the `useState` hook is essential for managing the timer’s state.
  • useEffect Hook: The `useEffect` hook is used to handle side effects, such as the timer’s interval.
  • Component Composition: Breaking the application into smaller, reusable components improves code organization and maintainability.
  • Event Handling: Handling button clicks and other user interactions is crucial for creating an interactive application.

FAQ

Q: Can I customize the work and break durations?

A: Yes, you can add settings to allow users to customize the work and break times. This would involve creating a settings component and managing the settings in the state.

Q: How do I add a sound notification?

A: You can use the <audio> HTML element or a library like Howler.js to play a sound when the timer finishes. Make sure the audio file is accessible in your public directory.

Q: How do I handle the timer ending and starting a break?

A: You can use a state variable (e.g., `isBreak`) to track whether the timer is in a work or break cycle. When the timer finishes, toggle this state and set the `minutes` to the appropriate duration (e.g., 25 for work, 5 for break).

Q: How do I deploy this application?

A: You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS. These platforms offer easy deployment processes and handle the server-side rendering and build process.

Conclusion

Building a Pomodoro timer is more than just a coding exercise; it’s a practical step towards improving your productivity and understanding the fundamentals of Next.js and React. By breaking down the project into manageable components and understanding the core concepts like state management and lifecycle methods, you’ve gained valuable skills that you can apply to other web development projects. Now, armed with this knowledge, you can further enhance your timer by adding features like task management, detailed session history, or even advanced customization options to tailor it to your specific needs. The possibilities are endless, and your journey into web development continues!

More posts