I built Product Hunt using NextJS. Step by step guide.
Tags: nextjs, react
Published: 2023-09-15 12:54:22

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 
![click below](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM29nZTljbTF5bWp5bDU0eGt0aWRxZjl4ZW04amIwMDQ3MHpjZjlydCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Ai6jGrjxJAp4Y8vVeF/giphy-downsized.gif)
{% embed https://www.producthunt.com/posts/devhunt-2 %}
![click above](https://media.giphy.com/media/5kFba9q1opnboeFFtb/giphy-downsized.gif)

## 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

1. First things first – let’s set up our development environment. Make sure you have Node.js installed on your machine before proceeding.

2. 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.

3. Once the installation process is complete, navigate into the newly created directory via terminal (i.e., `cd my-dev-hunt`).

4. 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.
    
    ```jsx
      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
    
     ```jsx
       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..
    
     ```jsx
      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.

```jsx
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.


```jsx
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.


 ```jsx
 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`.

```js
// 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.

```jsx
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.


```jsx
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](https://www.producthunt.com/posts/devhunt-2)