Build a Simple Next.js Interactive Bookmarking App

Written by

javascriptdebugged

in

In today’s fast-paced digital world, we’re constantly bombarded with information. Finding and revisiting valuable content can quickly become a challenge. This is where a bookmarking app comes to the rescue. Imagine having a personalized, easily accessible repository of your favorite articles, websites, and resources, all at your fingertips. This tutorial will guide you through building a simple, yet functional, bookmarking application using Next.js, a powerful React framework known for its speed and SEO-friendliness. By the end of this tutorial, you’ll not only have a practical tool but also a solid understanding of key Next.js concepts.

Why Build a Bookmarking App?

Beyond the convenience of saving and organizing links, building a bookmarking app offers several benefits:

  • Learning Opportunity: It’s a great project to solidify your understanding of React, Next.js, and state management.
  • Practical Application: You create a useful tool you can use daily.
  • Skill Enhancement: You’ll learn about data persistence, user interface design, and client-side interactions.

What We’ll Build

Our bookmarking app will have the following features:

  • Add Bookmarks: Users can add new bookmarks with a title and URL.
  • List Bookmarks: Bookmarks will be displayed in a clear, organized list.
  • Delete Bookmarks: Users can remove bookmarks they no longer need.
  • Edit Bookmarks: Users can edit the title and URL of existing bookmarks.

Prerequisites

Before we dive in, ensure you have the following:

  • Node.js and npm (or yarn): Installed on your system.
  • Basic knowledge of JavaScript and React: Familiarity with components, props, and state.
  • A code editor: Such as VS Code, Sublime Text, or Atom.

Setting Up the 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 bookmarking-app

This command creates a new Next.js project named “bookmarking-app”. Navigate into the project directory:

cd bookmarking-app

Now, start the development server:

npm run dev

Your app should be running on http://localhost:3000. Open this in your browser to see the default Next.js welcome page.

Project Structure

Before we start coding, let’s briefly understand the project structure:

  • pages/: This directory holds your pages. Each file in this directory represents a route in your application. For example, `pages/index.js` will be the homepage.
  • components/: This is where you’ll store reusable React components.
  • public/: Contains static assets like images, fonts, etc.
  • styles/: Where you put your CSS or styling files.

Creating the Bookmark Component

Let’s create a component to display each bookmark. Create a new file named `Bookmark.js` inside the `components` directory. Add the following code:

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

function Bookmark({ bookmark, onDelete, onEdit }) {
  return (
    <div className="bookmark">
      <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
        {bookmark.title}
      </a>
      <div className="actions">
        <button onClick={() => onEdit(bookmark)}>Edit</button>
        <button onClick={() => onDelete(bookmark.id)}>Delete</button>
      </div>
      <style jsx>{`
        .bookmark {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          border: 1px solid #ccc;
          margin-bottom: 10px;
          border-radius: 5px;
        }
        .actions {
          display: flex;
          gap: 5px;
        }
      `}</style>
    </div>
  );
}

export default Bookmark;

This component takes a `bookmark` object, an `onDelete` function, and an `onEdit` function as props. It displays the bookmark’s title as a link and provides buttons for editing and deleting. We’ve also included basic inline styling using the `jsx` syntax provided by Next.js.

Creating the Bookmark Form Component

Now, let’s create a form for adding and editing bookmarks. Create a new file named `BookmarkForm.js` inside the `components` directory. Add the following code:

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

function BookmarkForm({ onSubmit, initialValues = null }) {
  const [title, setTitle] = useState(initialValues?.title || '');
  const [url, setUrl] = useState(initialValues?.url || '');
  const [editing, setEditing] = useState(!!initialValues);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (title.trim() === '' || url.trim() === '') {
      alert('Please enter both title and URL.');
      return;
    }

    onSubmit({
      id: initialValues?.id || Date.now(), // Generate a unique ID if adding a new bookmark
      title, 
      url,
    });
    setTitle('');
    setUrl('');
    setEditing(false);
  };

  return (
    <form onSubmit={handleSubmit} className="bookmark-form">
      <label htmlFor="title">Title:</label>
      <input
        type="text"
        id="title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <label htmlFor="url">URL:</label>
      <input
        type="url"
        id="url"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        required
      />
      <button type="submit">{editing ? 'Update Bookmark' : 'Add Bookmark'}</button>
      <style jsx>{`
        .bookmark-form {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
        }
        label {
          margin-bottom: 5px;
        }
        input {
          margin-bottom: 10px;
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
        button {
          padding: 10px 15px;
          background-color: #0070f3;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
      `}</style>
    </form>
  );
}

export default BookmarkForm;

This component manages the form’s state using the `useState` hook. It takes an `onSubmit` prop, which is a function that will be called when the form is submitted. It also accepts an `initialValues` prop to allow editing existing bookmarks. The form includes input fields for the title and URL and a submit button. We also use some inline styling here for basic layout and appearance.

Building the Main Page (index.js)

Now, let’s put everything together in the `pages/index.js` file. This is our main page where we’ll display the bookmarks and the form.

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

function HomePage() {
  const [bookmarks, setBookmarks] = useState([]);
  const [editingBookmark, setEditingBookmark] = useState(null);

  useEffect(() => {
    // Load bookmarks from localStorage on component mount
    const storedBookmarks = localStorage.getItem('bookmarks');
    if (storedBookmarks) {
      setBookmarks(JSON.parse(storedBookmarks));
    }
  }, []);

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

  const handleAddBookmark = (newBookmark) => {
    if (editingBookmark) {
      // Update existing bookmark
      setBookmarks(bookmarks.map(bookmark =>
        bookmark.id === editingBookmark.id ? { ...newBookmark, id: editingBookmark.id } : bookmark
      ));
      setEditingBookmark(null);
    } else {
      // Add a new bookmark
      setBookmarks([...bookmarks, newBookmark]);
    }
  };

  const handleDeleteBookmark = (id) => {
    setBookmarks(bookmarks.filter(bookmark => bookmark.id !== id));
  };

  const handleEditBookmark = (bookmark) => {
    setEditingBookmark(bookmark);
  };

  return (
    <div className="container">
      <h1>My Bookmarks</h1>
      <BookmarkForm
        onSubmit={handleAddBookmark}
        initialValues={editingBookmark}
      />
      <div className="bookmarks-list">
        {bookmarks.map(bookmark => (
          <Bookmark
            key={bookmark.id}
            bookmark={bookmark}
            onDelete={handleDeleteBookmark}
            onEdit={handleEditBookmark}
          />
        ))}
      </div>
      <style jsx>{`
        .container {
          max-width: 800px;
          margin: 20px auto;
          padding: 20px;
          border: 1px solid #eee;
          border-radius: 8px;
        }
        h1 {
          text-align: center;
          margin-bottom: 20px;
        }
        .bookmarks-list {
          margin-top: 20px;
        }
      `}</style>
    </div>
  );
}

export default HomePage;

Let’s break down the code:

  • State Management: We use the `useState` hook to manage the `bookmarks` array and the currently `editingBookmark`.
  • `useEffect` Hooks:
    • The first `useEffect` hook loads bookmarks from `localStorage` when the component mounts. This ensures that bookmarks persist across page reloads.
    • The second `useEffect` hook saves the `bookmarks` array to `localStorage` whenever it changes.
  • `handleAddBookmark` Function: This function handles adding new bookmarks and updating existing ones. It either adds a new bookmark to the `bookmarks` array or updates an existing one based on whether `editingBookmark` is set.
  • `handleDeleteBookmark` Function: This function removes a bookmark from the `bookmarks` array based on its ID.
  • `handleEditBookmark` Function: This function sets the `editingBookmark` state, which populates the form with the bookmark’s details.
  • Rendering: The component renders the `BookmarkForm` and iterates through the `bookmarks` array, rendering a `Bookmark` component for each bookmark.

Adding Styles (Optional)

While we’ve included basic inline styles, you can enhance the app’s appearance by creating a separate CSS file or using a CSS-in-JS solution. For example, you could create a `styles/global.css` file and import it into `_app.js` (inside the `pages` directory) to apply global styles.

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

Then, in `_app.js`:

// pages/_app.js
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Testing the Application

Now, run your application (if it isn’t already) using `npm run dev`. Navigate to http://localhost:3000 in your browser. You should be able to:

  • Add new bookmarks by entering a title and URL.
  • See the added bookmarks listed on the page.
  • Click on the bookmark titles to visit the linked websites.
  • Edit bookmarks by clicking the “Edit” button.
  • Delete bookmarks by clicking the “Delete” button.
  • Refresh the page and see that your bookmarks are still there (thanks to `localStorage`).

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect URL format: Make sure the URLs you enter start with `http://` or `https://`.
  • Missing `key` prop: When mapping over arrays in React, always provide a unique `key` prop to each element. We’ve done this in the `Bookmark` component.
  • `localStorage` errors: If you’re having trouble with `localStorage`, make sure your browser is allowing local storage. Also, check the browser’s developer console for any errors.
  • State not updating: Double-check that you’re correctly updating the state variables using the `setBookmarks` and `setEditingBookmark` functions.

Enhancements and Next Steps

This is a basic bookmarking app, but you can extend it with these features:

  • User Authentication: Implement user accounts to allow multiple users to save their bookmarks.
  • Categories/Tags: Add the ability to categorize or tag bookmarks for better organization.
  • Search Functionality: Implement a search bar to easily find specific bookmarks.
  • Import/Export: Allow users to import and export their bookmarks in a common format (e.g., JSON, CSV).
  • Responsive Design: Make the app responsive so it looks good on different devices.
  • Server-Side Rendering (SSR) / Static Site Generation (SSG): For better SEO and performance, consider using SSR or SSG for parts of your application, especially the bookmark list.

Summary / Key Takeaways

You’ve successfully built a simple bookmarking app using Next.js! You’ve learned about component creation, state management with `useState`, data persistence with `localStorage`, and basic form handling. This project provides a solid foundation for understanding Next.js and building more complex web applications. Remember to experiment, explore the Next.js documentation, and keep building to hone your skills.

FAQ

Q: Where are the bookmarks stored?

A: The bookmarks are stored in your browser’s local storage.

Q: Can other people see my bookmarks?

A: No, the bookmarks are stored locally in your browser and are not shared with anyone else.

Q: What happens if I clear my browser’s cache?

A: Clearing your browser’s cache will also clear your bookmarks.

Q: How can I deploy this app?

A: You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS. Vercel is particularly well-suited for Next.js apps.

Q: Why use Next.js for this project?

A: Next.js provides server-side rendering, static site generation, and optimized performance, making it an excellent choice for building web applications, even relatively simple ones like this bookmarking app. It also offers features like routing and image optimization out of the box, simplifying development.

From here, you have the knowledge and the code to create your own personalized bookmarking system. Consider this project a stepping stone. With each feature you add, each bug you fix, and each line of code you write, you’ll deepen your understanding of web development and Next.js, empowering you to tackle even more ambitious projects in the future. The beauty of coding lies in its iterative nature – continuous learning and building, one bookmark at a time.

More posts