Build a Next.js Interactive Web-Based Note-Taking App

Written by

javascriptdebugged

in

In today’s fast-paced world, staying organized is crucial. Whether you’re a student, professional, or simply someone who likes to jot down ideas, a reliable note-taking app is invaluable. This tutorial will guide you through building a fully functional, interactive note-taking application using Next.js, a powerful React framework for building modern web applications. We’ll cover everything from setting up your development environment to implementing features like note creation, editing, deletion, and storage. By the end of this tutorial, you’ll have a practical project to showcase your skills and a solid understanding of how to use Next.js to create dynamic, user-friendly web applications.

Why Build a Note-Taking App?

Building a note-taking app offers several benefits:

  • Practical Application: It’s a useful tool you can use daily to manage your thoughts, ideas, and tasks.
  • Skill Enhancement: It allows you to practice and solidify your understanding of core web development concepts, including state management, event handling, and data persistence.
  • Portfolio Piece: It’s a great project to include in your portfolio, demonstrating your ability to build interactive and functional web applications.
  • Learning Next.js: It provides a hands-on opportunity to learn and experiment with Next.js features like server-side rendering, routing, and API routes.

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 to run JavaScript on your server and npm (Node Package Manager) or yarn to manage your project dependencies.
  • A Code Editor: Visual Studio Code, Sublime Text, or any other code editor of your choice.
  • Basic Knowledge of JavaScript and React: Familiarity with JavaScript and React concepts (components, props, state, event handling) will be helpful.

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@latest note-taking-app

This command will create a new Next.js project named “note-taking-app” in a new directory. You will be prompted to choose TypeScript, ESLint, Tailwind CSS, and other configurations. Select the options that align with your preferences. For this tutorial, we will use JavaScript and will not be using Tailwind CSS. Navigate into your project directory:

cd note-taking-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.

Project Structure Overview

Your project directory should look similar to this:

note-taking-app/
├── node_modules/
├── public/
│   └── ...
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.js
│   │   └── page.js
│   └── ...
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── ...

Here’s a breakdown of the key files and directories:

  • src/app/: This directory contains your application’s pages and components.
  • src/app/page.js: This is the main page of your application (the home page).
  • public/: This directory holds static assets like images and fonts.
  • package.json: This file contains your project’s dependencies and scripts.

Creating the Note Component

Let’s create a reusable component for displaying individual notes. Create a new file called Note.js inside a components directory within the src/app/ directory (e.g., src/app/components/Note.js). This component will receive note data as props and render the note’s content.

// src/app/components/Note.js
import React from 'react';

function Note({ note, onDelete, onEdit }) {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.content}</p>
      <div className="note-actions">
        <button onClick={() => onEdit(note.id)}>Edit</button>
        <button onClick={() => onDelete(note.id)}>Delete</button>
      </div>
    </div>
  );
}

export default Note;

Explanation:

  • We import React.
  • The Note component takes three props: note (an object containing the note’s data), onDelete (a function to handle note deletion), and onEdit (a function to handle note editing).
  • The component renders the note’s title and content within a div with class “note”.
  • It includes “Edit” and “Delete” buttons that call the onEdit and onDelete functions, respectively, passing the note’s ID.

Building the Main Page

Now, let’s modify the page.js file (src/app/page.js) to display a list of notes and a form for creating new notes. Replace the existing content of page.js with the following:

// src/app/page.js
'use client';

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

function HomePage() {
  const [notes, setNotes] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [editingNoteId, setEditingNoteId] = useState(null);
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    const storedNotes = localStorage.getItem('notes');
    if (storedNotes) {
      setNotes(JSON.parse(storedNotes));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('notes', JSON.stringify(notes));
  }, [notes]);

  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e) => {
    setContent(e.target.value);
  };

  const handleAddNote = () => {
    if (title.trim() === '' || content.trim() === '') {
      alert('Please enter both title and content.');
      return;
    }

    const newNote = {
      id: Date.now(),
      title,
      content,
    };
    setNotes([...notes, newNote]);
    setTitle('');
    setContent('');
  };

  const handleDeleteNote = (id) => {
    setNotes(notes.filter((note) => note.id !== id));
  };

  const handleEditNote = (id) => {
    const noteToEdit = notes.find((note) => note.id === id);
    if (noteToEdit) {
      setTitle(noteToEdit.title);
      setContent(noteToEdit.content);
      setEditingNoteId(id);
      setIsEditing(true);
    }
  };

  const handleUpdateNote = () => {
    if (title.trim() === '' || content.trim() === '') {
      alert('Please enter both title and content.');
      return;
    }

    const updatedNotes = notes.map((note) =>
      note.id === editingNoteId ? { ...note, title, content } : note
    );
    setNotes(updatedNotes);
    setTitle('');
    setContent('');
    setEditingNoteId(null);
    setIsEditing(false);
  };

  return (
    <div className="container">
      <h1>Note-Taking App</h1>

      <div className="note-form">
        <input
          type="text"
          placeholder="Title"
          value={title}
          onChange={handleTitleChange}
        />
        <textarea
          placeholder="Content"
          value={content}
          onChange={handleContentChange}
        ></textarea>
        {isEditing ? (
          <button onClick={handleUpdateNote}>Update Note</button>
        ) : (
          <button onClick={handleAddNote}>Add Note</button>
        )}
      </div>

      <div className="note-list">
        {notes.map((note) => (
          <Note
            key={note.id}
            note={note}
            onDelete={handleDeleteNote}
            onEdit={handleEditNote}
          />
        ))}
      </div>
    </div>
  );
}

export default HomePage;

Explanation:

  • We import the necessary modules, including useState, useEffect from React, and the Note component.
  • We declare several state variables using useState:
    • notes: An array to store the notes.
    • title: The title of the note being created or edited.
    • content: The content of the note being created or edited.
    • editingNoteId: The ID of the note being edited.
    • isEditing: A boolean flag to determine whether we are editing a note.
  • We use useEffect to load notes from local storage when the component mounts and save notes to local storage whenever the notes state changes.
  • We define event handler functions:
    • handleTitleChange and handleContentChange: Update the title and content state variables as the user types in the input fields.
    • handleAddNote: Creates a new note object, adds it to the notes array, and clears the input fields.
    • handleDeleteNote: Removes a note from the notes array based on its ID.
    • handleEditNote: Sets the title and content to the current note and displays them in the input fields.
    • handleUpdateNote: Updates the selected note with new content and resets the input fields.
  • The JSX renders:
    • A heading “Note-Taking App”.
    • A form with input fields for the title and content, and a button to either add or update a note.
    • A list of Note components, each displaying a note from the notes array.

Adding Styles

To make our app look visually appealing, let’s add some basic CSS styles. Create a file named globals.css (if you haven’t already) in the src/app/ directory (the same directory as page.js) and add the following styles:

/* src/app/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;
}

.note-form {
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.note-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

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

.note {
  background-color: #f9f9f9;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.note h3 {
  margin-top: 0;
  color: #333;
}

.note p {
  margin-bottom: 10px;
  line-height: 1.5;
}

.note-actions {
  display: flex;
  justify-content: flex-end;
}

.note-actions button {
  margin-left: 10px;
  background-color: #008CBA;
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.note-actions button:hover {
  background-color: #0077a0;
}

These styles provide basic styling for the layout, form elements, and note components. You can customize them further to match your desired design.

Testing and Running the App

Now, run your Next.js development server if it’s not already running:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see your note-taking app. You can now:

  • Enter a title and content, and click “Add Note” to create a new note.
  • The notes should be displayed below the form.
  • Click the “Edit” button to edit the content.
  • Click the “Delete” button to delete a note.
  • Refresh the page to see the saved notes from local storage.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a Next.js note-taking app:

  • Incorrect import paths: Double-check your import statements. Make sure you are importing components and modules from the correct file paths. For example, if you are importing the Note component, ensure the path is correct: import Note from './components/Note';
  • State not updating correctly: Ensure that your state variables are being updated correctly using the appropriate setter functions provided by useState. For example, to update the notes array, use setNotes([...notes, newNote]).
  • Missing or incorrect event handlers: Make sure you have event handlers for user interactions, such as input changes, button clicks, and form submissions. Ensure that these handlers are correctly wired up to the corresponding UI elements.
  • Local storage issues: When working with local storage, remember that only strings can be stored directly. Use JSON.stringify() to convert JavaScript objects into strings before storing them and JSON.parse() to convert the strings back into objects when retrieving them.
  • Incorrect component rendering: If your components are not rendering correctly, check your JSX for syntax errors. Make sure you have closed all tags correctly and that your component structure is valid.
  • Unnecessary re-renders: If your app experiences performance issues, consider using React.memo or useMemo to optimize component rendering and prevent unnecessary re-renders.
  • CSS issues: Double-check your CSS file paths and class names. Ensure that your styles are being applied correctly and that you are not using conflicting styles.

Key Takeaways

In this tutorial, we’ve built a functional note-taking app using Next.js. Here are the key takeaways:

  • Next.js Fundamentals: You’ve learned how to set up a Next.js project, create components, handle user input, manage state, and use server-side rendering (using local storage).
  • Component-Based Architecture: You’ve seen how to break down your application into reusable components, making your code more organized and maintainable.
  • State Management: You’ve used the useState hook to manage the state of your application, allowing you to update the UI dynamically.
  • Event Handling: You’ve learned how to handle user interactions, such as button clicks and form submissions.
  • Local Storage: You’ve learned how to persist data using local storage, allowing your notes to be saved even when the user closes the browser.

FAQ

Here are some frequently asked questions about building a note-taking app with Next.js:

  1. Can I use a database instead of local storage? Yes, you can. While local storage is suitable for simple apps, for more complex applications, you should use a database (e.g., MongoDB, PostgreSQL) to store your notes. You would then use API routes in Next.js to interact with the database.
  2. How can I add authentication to my app? You can integrate authentication using libraries like NextAuth.js or Firebase Authentication. This will allow users to create accounts and securely access their notes.
  3. How can I deploy my app? You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS. Vercel is specifically designed for Next.js and provides a simple deployment process.
  4. How can I add rich text editing features? You can use rich text editors like Draft.js, Quill.js, or ReactQuill to enable rich text formatting, such as bold, italics, and lists.
  5. How can I improve the app’s performance? You can optimize your app’s performance by using techniques like code splitting, image optimization, and memoization.

By following this tutorial, you’ve gained a practical understanding of how to build a note-taking app with Next.js. You can now use this knowledge to create more complex and feature-rich applications. Remember to experiment, explore, and continue learning to enhance your web development skills. Feel free to expand on this project by adding features such as categories, search functionality, or a dark mode. The possibilities are endless!

More posts