I built Product Hunt using NextJS. Step by step guide.

#nextjs #react

Before we digg into the article,
Pls take a minite and check out / support our Product Hunt launch.
Yes, that's funny, but we've launched DevHunt on Product Hunt today

DevHunt - Open source Product Hunt for dev tools | Product Hunt

As a software developer, you've probably struggled to get your dev tool seen among a sea of unrelated products. That's why we created DevHunt - a platform made specifically with developers in mind. It's also Open Source.

producthunt.com

I rebuilt Product Hunt using NextJS. Step by step guide.

Are you tired of trying to launch your dev tools on existing platforms like Product Hunt? Do you want a dedicated space for showcasing developer tools built exclusively by developers themselves?

Well, the good news is that it's easier than ever to create your own platform tailored towards dev tools! In this article, we'll show you how we used NextJS to build our very own version of Product Hunt from scratch - DevHunt!

Prerequisites

A basic understanding of React and Node.js.
Familiarity with JavaScript and HTML/CSS.
An idea about what makes your tool unique and valuable.

Getting Started

First things first – let’s set up our development environment. Make sure you have Node.js installed on your machine before proceeding.
Open up your terminal or command prompt and type in npx create-next-app my-dev-hunt.
This will bootstrap a new project with everything needed to get started with building an app using NextJS framework.
Once the installation process is complete, navigate into the newly created directory via terminal (i.e., cd my-dev-hunt).

Create pages that will serve as templates for certain sections of DevHunt:

4a) Landing Page: This page serves as an introduction to DevHunt; explaining what it is all about & why developers should choose us over other similar platforms.

  export default function Home() {
    return (
      <div>
        <h1>Welcome To DevHunt</h1>
        <p>A launching pad exclusively designed for devs!</p>
      </div>
    )
  }

4b) Tool Listing Page: The page where devs can browse through different categories/tools available on Devhunt

   export default function ToolsList() {
     const [toolsData, setToolsData] = useState([])

     useEffect(() => {
       async function fetchToolsData(){
         const res = await fetch('/api/tools')
         const data = await res.json()
         setToolsData(data)
       }

       fetchToolsData()
     }, [])

     return(
       <>
         {toolsData.map((tool,index)=>(
           <ToolCard key={index} tool={tool}/>
         ))}
       </>
     )

4c) Individual Tool Pages: These are pages uniquely designed for each submitted tool listing its features/benefits along with details such as author name,email etc..

  import { useRouter } from 'next/router'

  export default function ToolDetailPage({tool}) {
    const router = useRouter()

    if(router.isFallback){
      return(<div>Loading...</div>)
    }

    return (
      <section className="container">
        //Add individual component information here!
      </section>




5. After creating these initial pages comes the tricky part - integrating APIs! 
You can use publicly available APIs like GitHub API or custom ones depending upon specific functionality requirements.


For example, below snippet shows fetching user data from GithubAPI,



```js  
async getUserInfo(username){
 try{
   let response=await axios.get(`https://api.github.com/users/${username}`)
   console.log(response.data)
}catch(error){console.log("error:",error)}
}

6.Next up is designing UI components!
Here's where TailwindCSS + FloatUI come in handy while allowing quick prototyping without sacrificing too much flexibility when it comes time implementing design changes later down line.
Now that we have our pages and APIs ready to go, it's time to start building the user interface. Let’s dive into some of the UI elements required for DevHunt platform.

Tool Card Component

A tool card component should display details like the name of the tool, a brief description, author name and email along with links to its website or repository.

import Link from 'next/link'

export default function ToolCard({tool}) {
  return (
    <div className="card">
      <h3>{tool.name}</h3>
      <p>{tool.description}</p>
      <Link href={`/tools/${tool.id}`}>
        <a>Learn More &rarr;</a>
      </Link>
    </div>
  )
}

Navigation Bar Component

We need a navigation bar component to help users navigate between different sections of our site. This can be easily achieved using Next.js built-in Link component which allows us to create client-side transitions between routes without reloading entire page.

import Link from 'next/link'

export default function NavBar() {
  return (
    <nav className="navbar"> 
       //Add individual nav items here!

       {/* Search box */}
       {/* User login/logout button*/}

     </nav>  
   )
 }

Footer Component

Finally, let's add a footer where you can provide important information about your platform such as contact details or social media handles.

 export default function Footer() {
   return (
    <>
     //footer content goes here!  

     //Social Media Icons!
     //<i class="fab fa-github"></i>,<i class="fab fa-twitter-square"></i>,<i class="fab fa-linkedin"></i>

     </>
   )
 }

With these basic templates in place you could now let your imagination run wild while continuing further customization and tailoring design accordingly.

7.Coding time!
With RESTful API endpoints now ready & UI elements defined – start coding out those functionalities required!

With our API endpoints and UI components now ready to go, it’s time to start building out the functionality required for DevHunt platform.

Creating RESTful API Endpoints

We need a way to fetch data from server for our tool listing page and individual pages. Here is how you can create RESTful APIs using Next.js's built-in API Routes.

// api/tools/index.js
export default async function handler(req, res) {
  try {
    const tools = await ToolModel.find({})
    res.status(200).json(tools)
  } catch (error) {
    console.error(error)
    res.status(500).json({ error: 'Internal Server Error' })
  }
}

// api/tools/[id].js
export default async function handler(req,res){
   const { id } = req.query

   if(!mongoose.Types.ObjectId.isValid(id)){
     return res.status(400).send('Invalid ID')
   }

   try{
       const tool=await ToolModel.findById(id)

       if(!tool){
         return res.json({ message: "No tool found!"})
       }

       return res.json(tool)

   }catch(error){console.log("Error:",error)}
}

User Authentication

Let's allow users to log in via their Github accounts so they can vote/comment on different tools submitted by other devs.

import { useSession } from 'next-auth/client'
import Link from 'next/link'

export default function AuthButton() {

const [session] = useSession()

return (
      <Link href={`${!session ? '/api/auth/signin/github': '#'}`}>
        <a className="button">{ session? "Logout" : "Login With GitHub" }</a>
      </Link>
 )
}

Adding Search Functionality

Add search functionality allowing users to find specific dev tools easily.

import { useState } from 'react';

export default function SearchBox(props){

  const handleChange=(event)=>{
    props.onChange(event.target.value);
  };

return(
<div className="search-box">
<input type='text' placeholder='Search...' onChange={handleChange}/>
</div>)
}

8.Launching
Finally, once all debugging/testing has been completed successfully– deploy site onto Vercel or another hosting provider of choice so everyone can use/devour all features offered within Devhunt ecosystem!

To Sum Up

Building one’s own platform from scratch might seem daunting at first but if done right while keeping purpose/values intact every developer out there could benefit immensely from having their own dedicated launching pad tailored specifically towards them rather than competing against unrelated products elsewhere online!

Hopefully this walkthrough was helpful in giving some insight into how even non-techies could potentially create something awesome catered just around developing community needs thus leveling playing field between smaller creators/startups vis-a-vis established giants :)

Once again,
dont forget to check out DevHunt on product hunt and give us some support if you like it -> producthunt.com/posts/devhunt-2