Build a Next.js Interactive Web-Based Bookmarker App

Written by

javascriptdebugged

in

In today’s fast-paced digital world, we’re constantly bombarded with information. Finding and saving valuable resources online is a daily challenge. Imagine you’re browsing the web, stumble upon an insightful article, a helpful tutorial, or a product you want to buy later. How do you keep track of these gems without cluttering your browser’s bookmarks or losing them in the digital abyss? This is where a personalized bookmarking application becomes invaluable. This tutorial will guide you through building a simple, yet functional, web-based bookmarking app using Next.js, allowing you to save, organize, and access your favorite web resources with ease.

Why Build a Bookmarking App?

While existing bookmarking solutions, like browser bookmarks or third-party apps, have their uses, they often lack the flexibility and customization that a personal app offers. Building your own bookmarking app allows you to tailor it to your specific needs. Here’s why this project is beneficial:

  • Personalization: Customize the app’s features, design, and organization to perfectly match your workflow.
  • Learning: Gain hands-on experience with key web development concepts, including front-end frameworks (Next.js), state management, and basic database interactions (optional).
  • Practicality: Create a tool that solves a real-world problem and enhances your productivity.
  • Portfolio Piece: Showcase your skills and project-building abilities to potential employers or clients.

What We’ll Build

Our bookmarking app will have the following core features:

  • Adding Bookmarks: Users will be able to add new bookmarks by entering a URL and a title.
  • Displaying Bookmarks: The app will display a list of saved bookmarks.
  • Deleting Bookmarks: Users will be able to delete bookmarks they no longer need.
  • Basic Styling: The app will have a clean and user-friendly interface.

For this tutorial, we will focus on the core functionality. We’ll keep it simple and easy to understand. As you become more comfortable, you can expand the app with features like tagging, categorization, search functionality, and user authentication.

Prerequisites

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

  • Node.js and npm (or yarn): You’ll need Node.js and npm (Node Package Manager) or yarn installed on your system. You can download them from https://nodejs.org/.
  • A Code Editor: A code editor like Visual Studio Code, Sublime Text, or Atom.
  • Basic Knowledge of HTML, CSS, and JavaScript: Familiarity with these languages is essential for understanding the code.

Step-by-Step Guide

1. 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 bookmark-app

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

cd bookmark-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. If you do, everything is set up correctly!

2. Project Structure and File Setup

Let’s take a look at the basic project structure created by `create-next-app`:

  • pages/: This directory contains your application’s pages. Each file in this directory represents a route. For example, pages/index.js corresponds to the root route (/).
  • public/: This directory is for static assets like images, fonts, and other files.
  • styles/: This directory is for your CSS or styling files.
  • package.json: This file contains project dependencies and scripts.

For our bookmarking app, we’ll create a few files within the pages/ directory:

  • pages/index.js: This will be our main page where we’ll display the bookmarks and the form to add new ones.

3. Building the Bookmark Form

Let’s start by creating the form to add new bookmarks. Open pages/index.js and replace the existing code with the following:

import { useState } from 'react';

export default function Home() {
  const [url, setUrl] = useState('');
  const [title, setTitle] = useState('');
  const [bookmarks, setBookmarks] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add bookmark logic here
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Bookmark App</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="url">URL:</label>
        <input
          type="text"
          id="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
        />
        <br />
        <label htmlFor="title">Title:</label>
        <input
          type="text"
          id="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <br />
        <button type="submit">Add Bookmark</button>
      </form>
      <hr />
      <h3>Bookmarks</h3>
      <ul>
        {bookmarks.map((bookmark, index) => (
          <li key={index}>
            <a href={bookmark.url} target="_blank" rel="noopener noreferrer">{bookmark.title}</a>
            <button onClick={() => handleDelete(index)} style={{ marginLeft: '10px' }}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Let’s break down this code:

  • Importing `useState`: We import the `useState` hook from React to manage the form input values and the list of bookmarks.
  • State Variables: We define three state variables:
    • url: Stores the URL entered by the user.
    • title: Stores the title entered by the user.
    • bookmarks: An array to store the bookmark objects.
  • `handleSubmit` Function: This function is called when the form is submitted. Currently, it only prevents the default form submission behavior. We’ll add the bookmark creation logic later.
  • Form Input Fields: We have two input fields: one for the URL and one for the title. The `onChange` event handlers update the `url` and `title` state variables as the user types.
  • Submit Button: This button triggers the `handleSubmit` function when clicked.
  • Bookmark List: We have a simple unordered list (<ul>) to display the bookmarks. The `bookmarks.map()` function iterates over the `bookmarks` array and renders a list item (<li>) for each bookmark. We’ll implement the delete functionality later.

4. Adding the Bookmark Logic

Now, let’s add the functionality to add new bookmarks when the form is submitted. Modify the handleSubmit function in pages/index.js:

const handleSubmit = (e) => {
  e.preventDefault();
  if (url && title) {
    const newBookmark = { url, title };
    setBookmarks([...bookmarks, newBookmark]);
    setUrl('');
    setTitle('');
  }
};

Here’s what this updated function does:

  • Prevent Default: The e.preventDefault() line prevents the browser from refreshing the page when the form is submitted.
  • Input Validation: It checks if both the URL and title fields have values.
  • Creating a Bookmark Object: If both fields have values, it creates a new bookmark object with the url and title values.
  • Updating the Bookmarks Array: It updates the bookmarks array using the spread operator (...) to add the new bookmark to the existing bookmarks.
  • Clearing Input Fields: It clears the input fields by setting url and title to empty strings.

5. Implementing the Delete Functionality

Next, we’ll implement the functionality to delete bookmarks. Add the following function to pages/index.js:

const handleDelete = (index) => {
  const updatedBookmarks = bookmarks.filter((_, i) => i !== index);
  setBookmarks(updatedBookmarks);
};

And add the `handleDelete` function to the return statement. It takes the index of the bookmark to delete as an argument. It uses the filter method to create a new array with all bookmarks except the one at the specified index. Finally, it updates the bookmarks state with the filtered array.

Now, add the `handleDelete` function to the button in the return statement:

<button onClick={() => handleDelete(index)} style={{ marginLeft: '10px' }}>Delete</button>

6. Adding Basic Styling

Let’s add some basic styling to make our app look a bit nicer. Create a new file named styles/Home.module.css. Then, add the following CSS rules:

.container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

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

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

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

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

li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li:last-child {
  border-bottom: none;
}

a {
  text-decoration: none;
  color: #333;
}

Now, import this CSS file into your pages/index.js file:

import styles from '../styles/Home.module.css';

Finally, apply the styles to the relevant elements within your component:

<div className={styles.container}>
  <h2>Bookmark App</h2>
  <form onSubmit={handleSubmit}>
    <label htmlFor="url">URL:</label>
    <input
      type="text"
      id="url"
      value={url}
      onChange={(e) => setUrl(e.target.value)}
    />
    <br />
    <label htmlFor="title">Title:</label>
    <input
      type="text"
      id="title"
      value={title}
      onChange={(e) => setTitle(e.target.value)}
    />
    <br />
    <button type="submit">Add Bookmark</button>
  </form>
  <hr />
  <h3>Bookmarks</h3>
  <ul>
    {bookmarks.map((bookmark, index) => (
      <li key={index} className={styles.bookmarkItem}>
        <a href={bookmark.url} target="_blank" rel="noopener noreferrer">{bookmark.title}</a>
        <button onClick={() => handleDelete(index)} style={{ marginLeft: '10px' }}>Delete</button>
      </li>
    ))}
  </ul>
</div>

You may also need to add styles to the delete button. You can do so by adding the following to the CSS file:

.bookmarkItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

7. Testing the Application

Now, it’s time to test your application. Open your browser and go to http://localhost:3000. Enter a URL and a title in the form and click “Add Bookmark”. The bookmark should appear in the list below. Try adding multiple bookmarks. Then, click the “Delete” button next to a bookmark to remove it. If everything works as expected, congratulations! You’ve successfully built a basic bookmarking app.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Imports: Make sure you’ve imported the necessary modules correctly. For example, ensure you have import { useState } from 'react'; at the top of your file. Also, double-check the path for the CSS import.
  • Typographical Errors: Typos in your code can cause unexpected behavior. Carefully review your code for any spelling mistakes or incorrect syntax.
  • State Updates Not Working: If your state variables aren’t updating correctly, double-check that you’re using the correct set... functions to update them. Also, make sure you’re using the correct syntax when updating arrays or objects.
  • CSS Issues: If your styles aren’t being applied, check the following:
    • Ensure you’ve imported the CSS file correctly.
    • Make sure the CSS class names in your JSX match the class names in your CSS file.
    • Check your browser’s developer tools for any CSS errors.
  • Form Submission Issues: If your form isn’t submitting, ensure you’ve added the onSubmit event handler to the <form> element and that the handleSubmit function is correctly defined.

Key Takeaways and Next Steps

This tutorial has walked you through building a basic bookmarking app using Next.js. You’ve learned how to:

  • Set up a Next.js project.
  • Create a form to collect user input.
  • Manage state using the useState hook.
  • Update and display a list of data.
  • Implement delete functionality.
  • Add basic styling.

Here are some ideas for expanding your bookmarking app:

  • Store Bookmarks in Local Storage: Currently, the bookmarks are lost when you refresh the page. Implement local storage to persist the bookmarks in the user’s browser.
  • Add Tagging and Categorization: Allow users to add tags or categories to their bookmarks for better organization.
  • Implement Search Functionality: Add a search bar to allow users to easily find specific bookmarks.
  • Add User Authentication: Implement user authentication so that multiple users can use the app and save their bookmarks separately.
  • Integrate with a Database: For more advanced features and scalability, consider integrating the app with a database like MongoDB or PostgreSQL.
  • Improve the UI/UX: Enhance the app’s design and user experience with more advanced styling, animations, and responsive design.

Remember, the best way to learn is by doing. Experiment with the code, try out different features, and don’t be afraid to make mistakes. Each error is an opportunity to learn and improve your skills. Building this app is a great starting point for your journey into web development. Continue to explore and learn, and you’ll be amazed at what you can create. Happy coding!

More posts