Build a Simple Next.js Interactive Typing Speed Test

Written by

FixTechToday

in

In today’s fast-paced digital world, typing speed is a crucial skill. Whether you’re a student, a professional, or simply someone who enjoys online activities, the ability to type quickly and accurately can significantly boost your productivity and efficiency. But how do you measure your typing speed, and how can you improve it? This is where a typing speed test comes in handy. In this guide, we will walk you through building your own interactive typing speed test application using Next.js, a powerful React framework for building web applications. This project will not only teach you the fundamentals of Next.js but also provide a practical tool you can use to track your progress and enhance your typing skills.

Why Build a Typing Speed Test?

Creating a typing speed test application offers several benefits:

  • Educational Value: It’s a fantastic way to learn and practice fundamental web development concepts like state management, event handling, and DOM manipulation.
  • Practical Application: You’ll build a functional tool that you can use daily to test and improve your typing speed.
  • Skill Enhancement: It helps you understand how to structure a project, manage user interactions, and handle dynamic content updates.
  • Portfolio Piece: It’s a great project to showcase your skills to potential employers or clients.

Moreover, building this project will expose you to real-world scenarios and challenges developers face, making the learning process more engaging and rewarding. You will learn to break down a complex problem into smaller, manageable parts, write clean and efficient code, and debug your application effectively.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): Installed on your computer. You can download them from nodejs.org.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these technologies is essential for understanding the code.

Setting Up Your Next.js Project

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

npx create-next-app typing-speed-test

This command will create a new Next.js project named “typing-speed-test”. Navigate into the project directory:

cd typing-speed-test

Now, start the development server:

npm run dev

This will start the development server, and you can access your application at http://localhost:3000.

Project Structure Overview

Before diving into the code, let’s understand the basic structure of a Next.js project:

  • pages/: This directory contains your application’s pages. Each file in this directory represents a route. For example, `pages/index.js` corresponds to the `/` route.
  • public/: This directory is for static assets like images, fonts, and other files.
  • styles/: This directory is where you’ll put your CSS files.
  • components/: (We’ll create this) This is where you’ll keep reusable React components.

Creating the Typing Speed Test Components

Let’s create the components for our typing speed test. We’ll need a few components:

  • TypingArea: This component will display the text to be typed, the user’s input, and highlight any errors.
  • Timer: This component will display the elapsed time.
  • Results: This component will display the typing speed (words per minute) and accuracy.
  • StartButton: This component will start and reset the test.

Create a `components` directory in the root of your project. Inside the `components` directory, create the following files:

  • TypingArea.js
  • Timer.js
  • Results.js
  • StartButton.js

TypingArea.js

This component will handle the text display and user input. It will take the text to be typed, the user’s input, and the error status as props.

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

const TypingArea = ({ text, userInput, error, onInputChange }) => {
  return (
    <div className="typing-area">
      <p>
        {text.split('').map((char, index) => {
          let style = {};
          if (index < userInput.length) {
            if (char === userInput[index]) {
              style = { color: 'green' };
            } else {
              style = { color: 'red' };
            }
          }
          return (
            <span key={index} style={style}>{char}</span>
          );
        })}
      </p>
      <input
        type="text"
        value={userInput}
        onChange={onInputChange}
        disabled={error}
      />
    </div>
  );
};

export default TypingArea;

Timer.js

This component will display the elapsed time. It will take the time in seconds as a prop.

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

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

  return <div className="timer">Time: {formatTime(time)}</div>;
};

export default Timer;

Results.js

This component will display the typing speed (WPM) and accuracy. It will take the WPM and accuracy as props.

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

const Results = ({ wpm, accuracy }) => {
  return (
    <div className="results">
      <p>WPM: {wpm}</p>
      <p>Accuracy: {accuracy}%</p>
    </div>
  );
};

export default Results;

StartButton.js

This component will handle starting and resetting the test. It will take the `onClick` function and the button text as props.

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

const StartButton = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

export default StartButton;

Building the Main Page (pages/index.js)

Now, let’s build the main page (`pages/index.js`) where we’ll put all the components together. This is where the core logic of the typing test will reside.

// pages/index.js
import React, { useState, useEffect } from 'react';
import TypingArea from '../components/TypingArea';
import Timer from '../components/Timer';
import Results from '../components/Results';
import StartButton from '../components/StartButton';

const textToType = "The quick brown rabbit jumps over the lazy frogs. This is a typing speed test. Practice makes perfect.";

export default function Home() {
  const [userInput, setUserInput] = useState('');
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [wpm, setWpm] = useState(0);
  const [accuracy, setAccuracy] = useState(100);
  const [error, setError] = useState(false);

  useEffect(() => {
    let intervalId;
    if (isRunning) {
      intervalId = setInterval(() => {
        setTime((prevTime) => prevTime + 1);
      }, 1000);
    }
    return () => clearInterval(intervalId);
  }, [isRunning]);

  useEffect(() => {
    if (userInput.length > 0 && userInput.length === textToType.length) {
      setIsRunning(false);
      calculateResults();
    }
  }, [userInput]);

  const handleInputChange = (e) => {
    const inputText = e.target.value;
    setUserInput(inputText);

    if (inputText.length > textToType.length) {
        setError(true);
    } else {
        setError(false);
    }
  };

  const calculateResults = () => {
    const correctChars = textToType.split('').filter((char, index) => char === userInput[index]).length;
    const accuracy = (correctChars / textToType.length) * 100;
    const wordsTyped = userInput.split(' ').length;
    const minutes = time / 60;
    const wpm = Math.round(wordsTyped / minutes);

    setAccuracy(Math.round(accuracy));
    setWpm(isNaN(wpm) ? 0 : wpm);
  };

  const startTest = () => {
    setIsRunning(true);
    setTime(0);
    setUserInput('');
    setWpm(0);
    setAccuracy(100);
  };

  const resetTest = () => {
    setIsRunning(false);
    setTime(0);
    setUserInput('');
    setWpm(0);
    setAccuracy(100);
  };

  return (
    <div className="container">
      <h1>Typing Speed Test</h1>
      <TypingArea text={textToType} userInput={userInput} onInputChange={handleInputChange} error={error} />
      <div className="controls">
        <Timer time={time} />
        <StartButton onClick={isRunning ? resetTest : startTest} text={isRunning ? 'Reset' : 'Start'} />
      </div>
      <Results wpm={wpm} accuracy={accuracy} />
    </div>
  );
}

Let’s break down the code:

  • Import Statements: We import all the components we created earlier.
  • State Variables: We use the `useState` hook to manage the state of the application, including the user input, time, whether the test is running, WPM, and accuracy.
  • `useEffect` Hooks:
    • The first `useEffect` hook starts and stops the timer. It runs when `isRunning` changes.
    • The second `useEffect` hook calculates the results when the user finishes typing the entire text.
  • Event Handlers:
    • `handleInputChange`: Updates the user input as the user types and sets the error state if the user types more than the provided text.
    • `calculateResults`: Calculates the WPM and accuracy based on the user’s input.
    • `startTest`: Resets the test and starts the timer.
    • `resetTest`: Resets the test to its initial state.
  • JSX Structure: The JSX structure renders the components in a logical order.

Adding Styles (styles/globals.css)

Now, let’s add some basic styles to make our application look presentable. Open `styles/globals.css` and add the following CSS:

/* styles/globals.css */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.typing-area {
  margin-bottom: 20px;
}

.typing-area p {
  font-size: 1.2rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.typing-area input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.timer {
  font-size: 1.1rem;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0059c1;
}

.results {
  margin-top: 20px;
  font-size: 1.1rem;
}

Running and Testing Your Application

Save all the files. Go back to your terminal and make sure your development server is still running (`npm run dev`). Open your browser and go to http://localhost:3000. You should see your typing speed test application.

Test the application by typing the text provided. The timer should start when you start typing, and the results (WPM and accuracy) should display after you finish typing the text. Try to make some errors to see how the accuracy is affected.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect Component Import: Make sure you import all components correctly in `pages/index.js`. Double-check the file paths.
  • State Not Updating: Ensure that your state variables are updated correctly using the `useState` hook. For example, when updating the time, use `setTime(prevTime => prevTime + 1)`.
  • Timer Not Starting/Stopping: The timer is controlled by the `isRunning` state. Make sure `isRunning` is correctly set to `true` when the test starts and `false` when it ends or is reset.
  • Incorrect Calculation of WPM: The WPM calculation depends on the number of words typed and the time taken. Ensure you correctly calculate these values.
  • Styling Issues: If the application doesn’t look as expected, check your CSS styles in `styles/globals.css` and ensure they are applied correctly. Use your browser’s developer tools to inspect the elements and debug the CSS.
  • Error in Input Handling: If you find that the error highlighting is not working as expected, carefully review the logic in the `TypingArea` component and the `handleInputChange` function to ensure that the character comparison and error detection are accurate.

Enhancements and Next Steps

Once you have the basic application working, you can enhance it further:

  • Add Different Text: Allow users to select different text passages or even add their own.
  • Implement Difficulty Levels: Offer different difficulty levels with varying word lengths and complexity.
  • Improve UI/UX: Enhance the visual appearance and user experience with more advanced CSS and React components.
  • Add a Leaderboard: Store and display the top scores using a database or local storage.
  • Implement a KeyPress Event Listener: Track and highlight the currently typed character to improve the user experience.
  • Use a Third-Party Library: Libraries like react-typing-effect can add more advanced features and animations.
  • Add Mobile Responsiveness: Ensure the application works well on different screen sizes.

Key Takeaways

Building a typing speed test with Next.js is a great way to improve your skills. You’ve learned how to:

  • Set up a Next.js project.
  • Create reusable React components.
  • Manage state with the `useState` hook.
  • Use the `useEffect` hook to handle side effects (like the timer).
  • Handle user input and events.
  • Calculate and display results.
  • Apply basic styling with CSS.

By following this guide, you should have a functional typing speed test application that you can use to improve your typing skills. Remember that practice is key, and the more you work on projects like this, the better you will become at web development. Keep experimenting and exploring new features. Happy coding!

The journey of building a typing speed test in Next.js offers a valuable hands-on experience in web development. Beyond the technical skills gained, it reinforces the importance of problem-solving, attention to detail, and iterative development. It also emphasizes the ability to translate an idea into a functional and user-friendly application. This project not only enhances your coding abilities but also cultivates a mindset of continuous learning and improvement. As you continue to refine and expand upon this project, you’ll discover new possibilities and further solidify your understanding of web development principles. Embrace the challenges, celebrate the successes, and remember that every line of code written is a step forward in your journey as a developer.

More posts