Build a Next.js Interactive Web-Based Task Scheduler

Written by

javascriptdebugged

in

In today’s fast-paced world, staying organized is crucial. Whether it’s managing personal errands, coordinating team projects, or simply remembering appointments, a well-designed task scheduler can be a game-changer. This tutorial will guide you, step-by-step, through building your own interactive web-based task scheduler using Next.js, a powerful React framework for building modern web applications. We’ll focus on clarity, practicality, and providing a solid foundation for you to expand upon. By the end of this tutorial, you’ll have a functional task scheduler, and more importantly, a deeper understanding of Next.js fundamentals.

Why Build a Task Scheduler with Next.js?

Next.js offers several advantages that make it an excellent choice for this project:

  • Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js can pre-render pages on the server or at build time, improving SEO and initial load times. This is especially beneficial for a task scheduler, which might contain data that needs to be easily accessible by search engines.
  • API Routes: Next.js simplifies building APIs, allowing you to easily handle data storage and retrieval. This is perfect for managing your task data.
  • Fast Refresh: Next.js’s hot-reloading feature makes development faster and more efficient, allowing you to see your changes instantly.
  • Built-in Routing: Next.js provides a straightforward routing system, making it easy to navigate between different views of your task scheduler.
  • Optimized Performance: Next.js automatically optimizes images, code splitting, and other performance aspects, resulting in a smooth user experience.

Prerequisites

Before we begin, make sure you have the following installed on your system:

  • Node.js and npm (or yarn): You’ll need Node.js and npm (Node Package Manager) or yarn to manage project dependencies. You can download them from nodejs.org.
  • A Code Editor: A code editor like Visual Studio Code (VS Code), Sublime Text, or Atom will make the development process much easier.
  • Basic Understanding of HTML, CSS, and JavaScript: While we’ll cover the basics, a familiarity with these languages will be helpful.

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 task-scheduler-app

This command will create a new Next.js project named “task-scheduler-app”. Navigate into the project directory:

cd task-scheduler-app

Now, start the development server:

npm run dev

This will start the development server, and you can access your application in your browser at http://localhost:3000. You should see the default Next.js welcome page.

Project Structure Overview

Before diving into the code, let’s understand the basic project structure that Next.js sets up for you:

  • pages/: This directory is where you’ll put your pages. Each file in this directory represents a route in your application. For example, `pages/index.js` will be accessible at the root path (/) and `pages/about.js` will be accessible at `/about`.
  • public/: This directory is for static assets like images, fonts, and other files that you want to serve directly.
  • styles/: This directory is where you’ll keep your CSS or other styling files.
  • package.json: This file contains information about your project, including dependencies and scripts.
  • next.config.js: This file is used to configure Next.js.

Building the Task List Component

Let’s create the core of our task scheduler: the task list. We’ll start by creating a new component to display our tasks.

Create a file named `components/TaskList.js` inside your project directory. Inside this file, paste the following code:

import React from 'react';

function TaskList({ tasks, onTaskComplete }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => onTaskComplete(task.id)}
          />
          <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>{task.text}</span>
        </li>
      ))}
    </ul>
  );
}

export default TaskList;

Let’s break down this code:

  • Import React: We import React to use JSX.
  • TaskList Component: This is a functional component that accepts two props: `tasks` (an array of task objects) and `onTaskComplete` (a function to handle task completion).
  • Mapping Tasks: We use the `map` function to iterate over the `tasks` array and render a `<li>` element for each task.
  • Checkbox: Each task has a checkbox that allows the user to mark the task as complete. The `checked` attribute is bound to the `task.completed` property, and the `onChange` event calls the `onTaskComplete` function, passing the task’s ID.
  • Task Text: The task text is displayed inside a `<span>` element. The `textDecoration` style is conditionally applied based on the `task.completed` property to strike through completed tasks.

Creating the Task Form Component

Now, let’s create a form component to allow users to add new tasks. Create a file named `components/TaskForm.js` inside your project directory and add the following code:

import React, { useState } from 'react';

function TaskForm({ onAddTask }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() !== '') {
      onAddTask(text.trim());
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a task"
      />
      <button type="submit">Add</button>
    </form>
  );
}

export default TaskForm;

Here’s a breakdown of the code:

  • Import React and useState: We import `useState` to manage the input field’s value.
  • TaskForm Component: This is a functional component that accepts one prop: `onAddTask` (a function to handle adding a new task).
  • useState Hook: We use the `useState` hook to manage the state of the input field (`text`).
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior, calls the `onAddTask` function with the input value, and resets the input field.
  • Input Field: The `<input>` element is used to capture the task text. The `value` attribute is bound to the `text` state, and the `onChange` event updates the `text` state.
  • Submit Button: The `<button>` element submits the form when clicked.

Integrating Components into the Main Page

Now, let’s integrate these components into our main page (`pages/index.js`). Replace the content of `pages/index.js` with the following code:

import React, { useState } from 'react';
import TaskList from '../components/TaskList';
import TaskForm from '../components/TaskForm';

function HomePage() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Learn Next.js', completed: false },
    { id: 2, text: 'Build a task scheduler', completed: true },
  ]);

  const handleAddTask = (text) => {
    const newTask = { id: Date.now(), text, completed: false };
    setTasks([...tasks, newTask]);
  };

  const handleTaskComplete = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div>
      <h1>Task Scheduler</h1>
      <TaskForm onAddTask={handleAddTask} />
      <TaskList tasks={tasks} onTaskComplete={handleTaskComplete} />
    </div>
  );
}

export default HomePage;

Let’s break down this code:

  • Import Components: We import `TaskList` and `TaskForm` components.
  • useState Hook for Tasks: We use the `useState` hook to manage the `tasks` state, initializing it with some sample tasks.
  • handleAddTask Function: This function is called when a new task is added. It creates a new task object with a unique ID (using `Date.now()`), the task text, and a `completed` status of `false`. It then updates the `tasks` state by adding the new task.
  • handleTaskComplete Function: This function is called when a task is marked as complete or incomplete. It updates the `tasks` state by mapping over the existing tasks and toggling the `completed` status of the task with the matching ID.
  • Rendering Components: We render the `TaskForm` and `TaskList` components, passing the `handleAddTask` and `handleTaskComplete` functions as props, and the tasks array to `TaskList`.

Adding Basic Styling

To make our task scheduler look better, let’s add some basic styling. Open `styles/globals.css` and add the following CSS:

body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  margin-bottom: 20px;
}

form {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

input[type="checkbox"] {
  margin-right: 10px;
}

This CSS provides basic styling for the body, headings, form elements, and list items. Save the file and refresh your browser to see the changes.

Adding Local Storage for Persistence

Currently, our tasks are lost when the page is refreshed. To make the task scheduler more useful, let’s store the tasks in local storage. This way, the tasks will persist even after the browser is closed and reopened.

Modify the `pages/index.js` file as follows:

import React, { useState, useEffect } from 'react';
import TaskList from '../components/TaskList';
import TaskForm from '../components/TaskForm';

function HomePage() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // Load tasks from local storage on component mount
    const storedTasks = localStorage.getItem('tasks');
    if (storedTasks) {
      setTasks(JSON.parse(storedTasks));
    }
  }, []);

  useEffect(() => {
    // Save tasks to local storage whenever the tasks state changes
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const handleAddTask = (text) => {
    const newTask = { id: Date.now(), text, completed: false };
    setTasks([...tasks, newTask]);
  };

  const handleTaskComplete = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div>
      <h1>Task Scheduler</h1>
      <TaskForm onAddTask={handleAddTask} />
      <TaskList tasks={tasks} onTaskComplete={handleTaskComplete} />
    </div>
  );
}

export default HomePage;

Here’s what changed:

  • Import useEffect: We import `useEffect` from React.
  • Loading Tasks from Local Storage: Inside the first `useEffect` hook (which runs only once when the component mounts), we attempt to retrieve tasks from local storage using `localStorage.getItem(‘tasks’)`. If tasks are found, we parse them using `JSON.parse()` and set the `tasks` state.
  • Saving Tasks to Local Storage: The second `useEffect` hook runs whenever the `tasks` state changes. It uses `localStorage.setItem(‘tasks’, JSON.stringify(tasks))` to save the current tasks to local storage. We use `JSON.stringify()` to convert the `tasks` array into a string before storing it.
  • Initial State: The initial value of the `tasks` state is now an empty array (`[]`).

Now, your tasks will be saved and loaded from local storage, making the task scheduler persistent.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Component Import Paths: Double-check that your component import paths (e.g., `import TaskList from ‘../components/TaskList’;`) are correct. Incorrect paths will lead to errors.
  • Missing or Incorrect Props: Ensure that you are passing the correct props to your components and that your components are correctly handling those props. Check the console for any prop-related errors.
  • State Updates Not Triggering Re-renders: If your component isn’t re-rendering after a state update, make sure you’re using the correct state update functions (e.g., `setTasks`) and that you’re not directly mutating the state (e.g., don’t do `tasks.push(newTask)` – instead, use the spread operator: `setTasks([…tasks, newTask])`).
  • Local Storage Issues: If your tasks aren’t persisting, check the browser’s developer tools (Application > Local Storage) to see if the tasks are being saved correctly. Also, make sure that you’re stringifying and parsing the data correctly with `JSON.stringify()` and `JSON.parse()`.
  • CSS Conflicts: If your styling isn’t working as expected, check for any CSS conflicts. Make sure your CSS is correctly linked and that there aren’t any conflicting styles from other sources. Use your browser’s developer tools to inspect the elements and see which styles are being applied.

Enhancements and Next Steps

This is a basic task scheduler, but there’s a lot you can do to enhance it:

  • Task Editing: Implement the ability to edit existing tasks.
  • Task Prioritization: Add a priority level to tasks (e.g., high, medium, low).
  • Due Dates: Allow users to set due dates for tasks.
  • Task Filtering: Add filters to show tasks by status (e.g., all, active, completed).
  • User Authentication: Implement user authentication to allow multiple users to use the task scheduler.
  • Backend Integration: Integrate a backend database (e.g., MongoDB, PostgreSQL) to store the tasks and handle more complex data management.
  • Deployment: Deploy your Next.js application to a platform like Vercel or Netlify.

Key Takeaways

In this tutorial, we’ve built a functional task scheduler using Next.js. We’ve covered the basics of Next.js, including setting up a project, creating components, managing state, and adding styling. We’ve also learned how to use local storage to persist data. This project provides a solid foundation for building more complex web applications with Next.js. Remember to break down complex problems into smaller, manageable parts, and always test your code thoroughly.

FAQ

Here are some frequently asked questions:

  1. Q: How do I deploy my Next.js application?
    A: You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS. Vercel is particularly well-suited for Next.js applications, offering easy deployment and automatic scaling.
  2. Q: How can I add more advanced styling?
    A: You can use CSS-in-JS libraries like Styled Components or Emotion, or you can use a CSS framework like Tailwind CSS or Bootstrap.
  3. Q: How can I handle API calls in Next.js?
    A: Next.js provides API routes for handling API calls. You can create a file in the `pages/api` directory to define your API endpoints. You can also use libraries like `axios` or `fetch` to make API requests from your client-side components.
  4. Q: How can I improve the performance of my Next.js application?
    A: Next.js automatically optimizes images, code splitting, and other performance aspects. You can further improve performance by using techniques like lazy loading, code splitting, and caching. Consider using a CDN to serve static assets.

The journey of building a web application is often marked by constant learning and refinement. As you continue to explore Next.js, remember that the best way to solidify your understanding is by building more projects and experimenting with different features. This task scheduler is just the beginning. Embrace the challenges, celebrate the successes, and keep coding. The skills you’ve acquired here will serve as a strong foundation as you venture into more complex and ambitious web development projects. Happy coding!

More posts