How to Fetch Your Hashnode Articles for Your Portfolio with React, Vue, and Next.js

Are you building a portfolio and looking to showcase your Hashnode articles? Whether you're using React, Vue, or Next.js, there are a few simple steps to follow. In this article, I'll guide you through the process.

If you write on Dev.to platform as well, I have a similar post to fetch your Dev.to articles. Check here

Before we dive in, make sure you're familiar with the React or Vue.js ecosystem. If you're new to these technologies, you can start by checking out React's official documentation and Vue's official documentation.

If you're new to Next.js but familiar with React, don't worry. The same syntax you learned for React will work in Next.js.

Here are the three steps to fetch your Hashnode articles:

Step 1: Create and set up your project.

For React or Next.js: Run npx create-next-app in your terminal and follow the prompt.

Note that React Docs now recommend bootstrapping React projects with Next.js and some other framework, that’s why I’m not using npx create-react-app.

For Vue: Run vue create project-name and follow the prompt.

Note that you must have installed Vue CLI before that command will work. If you haven’t already, run npm install -g @vue/cli, and after it has been installed, run the command above to create a Vue project.

Step 2: Obtain your Hashnode API key.

The Hashnode API is a simple REST API: https://api.hashnode.com/v1/me/articles

Now, how do we get the API key?

• Go to your Hashnode account settings and click on the "DEVELOPER" tab

• Click the generate token button to get an API key

It's recommended to store your secret key in a .env file. Move to the root of your project and create a .env.local file.

Alternatively, you can run touch .env.local in your terminal to create the file. Paste the following code into the file:

MY_DEV_KEY=24343434.

Replace 24343434 with the API key you generated and save the file.

Step 3: Display your Hashnode articles.

Let's start with React or Nextjs:

Create a component and call it whatever you like, e.g BlogPost.js, and paste this code there.

import React, { useState, useEffect } from 'react';

const HasnodeArticles = () => {
  const [articles, setArticles] = useState([]);

 const Secret_KEY = `proccess.env.MY_DEV_KEY`

 useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.hashnode.com/v1/me/articles', {
          headers: {
            Authorization: Secret_KEY
          }
        });
        const data = await response.json();
        setArticles(data.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {articles.map(article => (
        <div key={article._id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
 <p><a href={article.url}>Read more</a> </p>
        </div>
      ))}
    </div>
  );
};

export default HasnodeArticles;

For Vue.js

<template>
  <div>
    <div v-for="article in articles" :key="article._id">
      <h2>{{ article.title }}</h2>
      <p>{{ article.description }}</p>
     <p><a :href=”article.url”>Read more</a> </p>
    </div>
  </div>
</template>

<script>
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

export default {
  data() {
    return {
      articles: []
    };
  },
  mounted() {
   fetch('https://api.hashnode.com/v1/me/articles', {
          headers: {
            Authorization: Secret_KEY
          }
        })
      .then(res => res.json())
      .then(data => {
        this.articles = data;
      });
  }
};
</script>

I only returned the post title, description and url but if you want to extract more, it's possible.

To have an idea of what you have access to, you can log the API data to your console. To this in your current setup, just console.log(article)

For example:

You can have access to the article cover image, user data (an object), timestamp, etc.

NOTE: You can style your component to your satisfaction with CSS.

CONCLUSION: Fetching Hashnode Articles

Fetching Hashnode articles in a React or Vue component is a straightforward process, thanks to the Hashnode API.

By following the steps outlined in this post, you should be able to create a simple React component that fetches and displays Hashnode articles. Good luck!