Build a Next.js Interactive Web-Based Product Hunt Clone

Written by

javascriptdebugged

in

Ever wanted to build your own platform to showcase cool new products, just like Product Hunt? Well, now you can! This tutorial will guide you through creating a simplified, interactive web-based clone using Next.js, a powerful React framework. We’ll cover everything from setting up your project to implementing core features like product listings, upvoting, and basic filtering. This project is perfect for beginners and intermediate developers looking to expand their Next.js skills and build something practical and engaging. Let’s dive in!

Why Build a Product Hunt Clone?

Building a Product Hunt clone offers several benefits:

  • Practical Application: You’ll learn how to fetch and display data, handle user interactions, and manage state in a real-world context.
  • Skill Enhancement: You’ll gain hands-on experience with Next.js features like server-side rendering, API routes, and dynamic routing.
  • Portfolio Piece: A functional Product Hunt clone is a great addition to your portfolio, showcasing your ability to build interactive web applications.
  • Fun and Engaging: It’s a fun project! You can customize it, add your own features, and even share it with friends.

In this tutorial, we’ll focus on the essential features to get you started. We’ll keep it simple to make it easy to follow along, but you can always expand on it later.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need Node.js installed on your machine to run Next.js. npm (Node Package Manager) or yarn is used to manage project dependencies.
  • Basic JavaScript/React knowledge: Familiarity with JavaScript and React fundamentals will be helpful.
  • A code editor: VS Code, Sublime Text, or any other code editor of your choice.
  • A modern web browser: Chrome, Firefox, or Safari.

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 product-hunt-clone

This command will create a new Next.js project named “product-hunt-clone”. Navigate into the project directory:

cd product-hunt-clone

Now, let’s install some dependencies we’ll need for this project. We’ll use a library called ‘swr’ for data fetching. Swr is a React Hooks library for remote data fetching. It provides a simple and efficient way to fetch and cache data in your components.

npm install swr

or if using yarn:

yarn add swr

Project Structure Overview

Before we start coding, 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` is the homepage (/).
  • components/: This directory is for reusable React components.
  • styles/: This directory is for your CSS or styling files.
  • public/: This directory holds static assets like images, fonts, etc.
  • package.json: Contains project metadata and dependencies.

Creating the Product Listing Page

Let’s create the main page where we’ll display product listings. Open `pages/index.js` and replace the default content with the following:

import { useState, useEffect } from 'react';
import useSWR from 'swr';

// Dummy data for now.  We'll replace this with a real API call later.
const dummyProducts = [
  {
    id: 1,
    name: 'Awesome Widget',
    description: 'A revolutionary widget that does amazing things.',
    votes: 150,
    imageUrl: '/widget.png', // Placeholder image
    url: 'https://example.com/widget',
  },
  {
    id: 2,
    name: 'Super Gadget',
    description: 'The ultimate gadget for all your needs.',
    votes: 80,
    imageUrl: '/gadget.png', // Placeholder image
    url: 'https://example.com/gadget',
  },
  {
    id: 3,
    name: 'Cool Tool',
    description: 'A handy tool to make your life easier.',
    votes: 210,
    imageUrl: '/tool.png', // Placeholder image
    url: 'https://example.com/tool',
  },
];

const fetcher = (url) => fetch(url).then((res) => res.json());

function ProductCard({ product }) {
  const [upvotes, setUpvotes] = useState(product.votes);

  const handleUpvote = () => {
    setUpvotes(upvotes + 1);
    // In a real app, you would also send an API request to update the votes on the server.
    console.log(`Upvoted ${product.name}`);
  };

  return (
    <div>
      <img src="{product.imageUrl}" alt="{product.name}" />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <div>
        <button>Upvote ({upvotes})</button>
        <a href="{product.url}" target="_blank" rel="noopener noreferrer">Visit</a>
      </div>
    </div>
  );
}

export default function Home() {
  const { data, error, isLoading } = useSWR('/api/products', fetcher);

  // Using dummy data if API request fails or is still loading
  const products = data || dummyProducts;

  return (
    <div>
      <h1>Product Hunt Clone</h1>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error loading products</p>
      ) : (
        <div>
          {products.map((product) => (
            
          ))}
        </div>
      )}
      {`
        .container {
          max-width: 800px;
          margin: 0 auto;
          padding: 20px;
        }

        h1 {
          text-align: center;
        }

        .product-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
        }

        .product-card {
          border: 1px solid #ccc;
          padding: 15px;
          border-radius: 8px;
        }

        .product-card img {
          width: 100%;
          height: 150px;
          object-fit: cover;
          margin-bottom: 10px;
        }

        .product-card h3 {
          margin-bottom: 5px;
        }

        .product-card p {
          margin-bottom: 10px;
        }

        .product-card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .product-card-footer button {
          background-color: #f0f0f0;
          border: none;
          padding: 8px 12px;
          border-radius: 4px;
          cursor: pointer;
        }

        .product-card-footer a {
          text-decoration: none;
          color: blue;
        }
      `}
    </div>
  );
}

Let’s break down this code:

  • Imports: We import `useState` and `useEffect` from React and `useSWR` from ‘swr’.
  • Dummy Data: We create an array `dummyProducts` to represent our product data. In a real application, this data would come from an API.
  • ProductCard Component: This component displays a single product. It takes a `product` object as a prop and renders the product’s image, name, description, and a button to upvote it. It also includes a link to the product’s website. We use `useState` to manage the upvote count.
  • Home Component: This is the main component for our homepage. It uses the `useSWR` hook to fetch data from an API endpoint (`/api/products`). We’ll create this API route shortly. It renders the `ProductCard` component for each product in the `products` array.
  • Styling: We use styled-jsx for basic styling. This is a built-in feature of Next.js that allows you to write CSS within your components.

Save the file. You should now be able to run your Next.js application by running `npm run dev` or `yarn dev` in your terminal and navigating to `http://localhost:3000` in your browser. You should see the product cards rendered with the dummy data. Note that the upvote button doesn’t actually upvote anything yet; it just updates the count locally.

Creating the API Route for Product Data

Next.js makes it easy to create API routes. These routes allow your frontend to communicate with a backend to fetch and update data. We’ll create an API route to serve our product data. Create a new file at `pages/api/products.js` and add the following code:

// pages/api/products.js

// Simulate a database
const products = [
  {
    id: 1,
    name: 'Awesome Widget',
    description: 'A revolutionary widget that does amazing things.',
    votes: 150,
    imageUrl: '/widget.png',
    url: 'https://example.com/widget',
  },
  {
    id: 2,
    name: 'Super Gadget',
    description: 'The ultimate gadget for all your needs.',
    votes: 80,
    imageUrl: '/gadget.png',
    url: 'https://example.com/gadget',
  },
  {
    id: 3,
    name: 'Cool Tool',
    description: 'A handy tool to make your life easier.',
    votes: 210,
    imageUrl: '/tool.png',
    url: 'https://example.com/tool',
  },
];

export default function handler(req, res) {
  res.status(200).json(products);
}

This code does the following:

  • Imports: No imports are needed for this simple API route.
  • Simulated Data: We’re using the same `products` array as our dummy data in `index.js`. In a real application, you would fetch this data from a database.
  • Handler Function: The `handler` function is the entry point for your API route. It takes `req` (request) and `res` (response) as arguments.
  • Response: We use `res.status(200).json(products)` to send a JSON response containing our product data. The `200` status code indicates a successful request.

Now, refresh your browser. The data should still display, but now it’s being fetched from the API route at `/api/products`. You can verify this by opening your browser’s developer tools (usually by pressing F12) and checking the Network tab. You should see a request to `/api/products` with a 200 status code.

Implementing Upvoting

Let’s make the upvote button actually do something. We’ll simulate updating the votes. First, we need to modify the `ProductCard` component to update the votes in the API route. Modify the `ProductCard` component in `pages/index.js` as follows:

import { useState } from 'react';

function ProductCard({ product, onUpvote }) {
  const [upvotes, setUpvotes] = useState(product.votes);

  const handleUpvote = async () => {
    try {
      const response = await fetch(`/api/upvote?id=${product.id}`, {
        method: 'POST',
      });

      if (response.ok) {
        const data = await response.json();
        setUpvotes(data.votes); // Update the local state
        onUpvote(product.id, data.votes); // Notify the parent component
      } else {
        console.error('Failed to upvote');
        // Handle error (e.g., show an error message)
      }
    } catch (error) {
      console.error('Error:', error);
      // Handle error
    }
  };

  return (
    <div>
      <img src="{product.imageUrl}" alt="{product.name}" />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <div>
        <button>Upvote ({upvotes})</button>
        <a href="{product.url}" target="_blank" rel="noopener noreferrer">Visit</a>
      </div>
    </div>
  );
}

export default function Home() {
  const { data, error, isLoading, mutate } = useSWR('/api/products', fetcher);

  const handleUpvote = (productId, newVotes) => {
    // Optimistically update the data locally
    if (data) {
      const updatedProducts = data.map((product) => {
        if (product.id === productId) {
          return { ...product, votes: newVotes };
        }
        return product;
      });
      mutate(updatedProducts, false); // Update the cache immediately
    }
  };

  const products = data || dummyProducts;

  return (
    <div>
      <h1>Product Hunt Clone</h1>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error loading products</p>
      ) : (
        <div>
          {products.map((product) => (
            
          ))}
        </div>
      )}
      {`
        // ... (rest of the styles)
      `}
    </div>
  );
}

Here’s what changed:

  • `onUpvote` Prop: We pass an `onUpvote` function as a prop to `ProductCard`. This function will be called when the upvote button is clicked.
  • `handleUpvote` Function: This function now makes a `POST` request to `/api/upvote` with the product ID. It updates the local state with the new vote count received from the API.
  • API Request: We use `fetch` to send a POST request to `/api/upvote?id=${product.id}`. In a real application, this would update the vote count in your database.
  • Error Handling: We’ve added basic error handling to catch potential issues during the API call.
  • Optimistic Update: We use the `mutate` function provided by `swr` to update the local data immediately. This provides a better user experience by updating the UI instantly, even before the API call completes.

Now, create the API route at `pages/api/upvote.js`:

// pages/api/upvote.js

// Simulate a database (replace with your actual database)
let products = [
  {
    id: 1,
    name: 'Awesome Widget',
    description: 'A revolutionary widget that does amazing things.',
    votes: 150,
    imageUrl: '/widget.png',
    url: 'https://example.com/widget',
  },
  {
    id: 2,
    name: 'Super Gadget',
    description: 'The ultimate gadget for all your needs.',
    votes: 80,
    imageUrl: '/gadget.png',
    url: 'https://example.com/gadget',
  },
  {
    id: 3,
    name: 'Cool Tool',
    description: 'A handy tool to make your life easier.',
    votes: 210,
    imageUrl: '/tool.png',
    url: 'https://example.com/tool',
  },
];

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const productId = parseInt(req.query.id, 10);

    if (isNaN(productId)) {
      return res.status(400).json({ error: 'Invalid product ID' });
    }

    // Find the product and increment the votes
    const productIndex = products.findIndex((product) => product.id === productId);

    if (productIndex === -1) {
      return res.status(404).json({ error: 'Product not found' });
    }

    products[productIndex].votes += 1;

    // Simulate database update delay
    await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate a 500ms delay

    res.status(200).json(products[productIndex]);
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

In this API route:

  • Method Check: We check if the request method is `POST`.
  • Product ID: We extract the product ID from the query parameters (`req.query.id`).
  • Error Handling: We include error handling for invalid product IDs and products not found.
  • Vote Increment: We find the product in the `products` array and increment its `votes` property.
  • Simulated Delay: We use `setTimeout` to simulate a delay, representing the time it takes to update the database.
  • Response: We return the updated product in the response.

Now, when you click the upvote button, the vote count should increase, and the UI should update immediately. The votes are being updated in the simulated “database” (the `products` array in `api/upvote.js`).

Adding Basic Filtering

Let’s add a basic filtering feature to our Product Hunt clone. We’ll add a simple input field where users can type in a search term, and the product list will be filtered based on the product name. Add the following code inside the `Home` component, above the `product-grid` div in `pages/index.js`:


import { useState, useEffect } from 'react';
import useSWR from 'swr';

// ... (rest of the imports and code)

export default function Home() {
  const [searchTerm, setSearchTerm] = useState('');
  const { data, error, isLoading, mutate } = useSWR('/api/products', fetcher);

  const handleUpvote = (productId, newVotes) => {
    // Optimistically update the data locally
    if (data) {
      const updatedProducts = data.map((product) => {
        if (product.id === productId) {
          return { ...product, votes: newVotes };
        }
        return product;
      });
      mutate(updatedProducts, false);
    }
  };

  const products = data || dummyProducts;

  // Filter products based on search term
  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Product Hunt Clone</h1>
       setSearchTerm(e.target.value)}
      />
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error loading products</p>
      ) : (
        <div>
          {filteredProducts.map((product) => (
            
          ))}
        </div>
      )}
      {`
        // ... (rest of the styles)
        input {
          width: 100%;
          padding: 10px;
          margin-bottom: 15px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      `}
    </div>
  );
}

Here’s what we added:

  • `searchTerm` State: We added a `searchTerm` state variable to store the user’s search input.
  • Input Field: We added an input field with `type=”text”` where users can enter their search query. The `onChange` event updates the `searchTerm` state.
  • Filtering Logic: We added `filteredProducts`, which filters the `products` array based on the `searchTerm`. The `toLowerCase()` method is used for case-insensitive searching.
  • Rendered Products: We changed the `map` method to iterate over `filteredProducts` instead of `products`.
  • Styling: Added basic styling for the input field.

Now, when you type in the search input, the product list will be filtered dynamically based on your search query.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building Next.js applications, and how to avoid them:

  • Incorrect File Paths: Make sure your file paths are correct, especially when importing components and assets. Double-check for typos and case sensitivity.
  • Missing Dependencies: Always install necessary dependencies using `npm install` or `yarn add`. If you’re using a library, make sure you’ve installed it.
  • Incorrect State Updates: When updating state, always use the correct state update methods (e.g., `setState` in React). Avoid directly modifying state variables. In the case of objects and arrays, make sure you are creating a new instance of the data to trigger a re-render.
  • Asynchronous Operations Without `async/await`: When working with asynchronous operations (like API calls), use `async/await` to handle promises correctly and avoid unexpected behavior.
  • Ignoring Error Handling: Always include error handling in your code, especially when making API calls. Use `try…catch` blocks to catch errors and display informative error messages to the user.
  • CORS Issues: When making API calls to a different domain, you might encounter CORS (Cross-Origin Resource Sharing) issues. You’ll need to configure your backend to allow requests from your frontend’s origin. For local development, you can use a CORS proxy.
  • Not Using `useEffect` Correctly: Make sure you understand the purpose of `useEffect`. It’s used for side effects, such as fetching data or setting up subscriptions. Pay attention to the dependency array to control when the effect runs.

Key Takeaways

In this tutorial, you’ve learned how to build a basic Product Hunt clone using Next.js. Here’s a summary of the key concepts:

  • Project Setup: You learned how to set up a new Next.js project using `create-next-app`.
  • Page Structure: You understood the basic structure of a Next.js project, including the `pages`, `components`, and `styles` directories.
  • Data Fetching: You learned how to fetch data using `useSWR` from an API route.
  • API Routes: You created API routes to serve your product data and handle upvote requests.
  • Component Structure: You created reusable React components.
  • State Management: You used the `useState` hook to manage the upvote count and search term.
  • Dynamic Rendering: You learned how to dynamically render content based on data.
  • Styling: You used styled-jsx to style your components.
  • Filtering: You implemented basic filtering functionality.

FAQ

Q: How can I deploy this application?

A: You can deploy your Next.js application to platforms like Vercel (which is recommended, as it’s built by the creators of Next.js), Netlify, or AWS. Simply push your code to a Git repository (like GitHub) and connect it to your chosen platform. The platform will automatically build and deploy your application.

Q: How can I add more features?

A: You can expand on this project by adding features such as:

  • User authentication (login/signup)
  • Product submission (users can submit their own products)
  • Comments and discussions
  • Category filtering
  • Sorting options (e.g., by votes, date)
  • Integration with a real database (e.g., MongoDB, PostgreSQL)

Q: How do I handle more complex data?

A: For more complex data, you’ll need to integrate a database. You can use an ORM (Object-Relational Mapper) like Prisma or Sequelize to interact with your database. You’ll also need to handle data validation and sanitization on the server-side to prevent security vulnerabilities.

Q: What are some SEO best practices for Next.js?

A: Next.js is great for SEO because of its server-side rendering capabilities. Make sure to:

  • Use descriptive page titles and meta descriptions.
  • Use semantic HTML tags (e.g., `

    `, `

    `, `

    `).

  • Optimize your images (compress them and use the `next/image` component).
  • Generate a sitemap.
  • Use structured data (JSON-LD) to provide search engines with more information about your content.

Q: How can I improve the performance of my application?

A: To improve performance:

  • Optimize your images (use the `next/image` component for lazy loading and image optimization).
  • Code split your application to load only the necessary code for each page.
  • Use caching to store data and reduce the number of requests to the server.
  • Minimize the use of third-party scripts.
  • Use server-side rendering (SSR) and static site generation (SSG) to pre-render pages.

This project provides a solid foundation for building interactive web applications with Next.js. Remember to experiment, explore, and continue learning. The world of web development is constantly evolving, and by staying curious and practicing, you’ll be well on your way to building amazing things. Keep exploring new features, and don’t be afraid to try new things. Happy coding!

More posts