DEV Community

Cover image for How to Fetch Your Articles for Your Portfolio with React, Vue, and Next.js
Stephen Gbolagade
Stephen Gbolagade

Posted on • Updated on


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

Are you building a portfolio and looking to showcase your 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 use Hashnode, I have similar article to fetch your articles from the platform. 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 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 API and API key.

The API is a simple REST API: Replace "your-username" with your username.

Without the API key, you can fetch your articles. However, some APIs require an access token to be passed into the header. That's why we're going to use the API key (to fulfil all righteousness 😏).

To get your API key, sign in to your account, go to your Settings, scroll down, and generate a key for your project.

How to get your key:

Getting your 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:


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

Step 3: Display your 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 DevToArticles = () => {
  const [articles, setArticles] = useState([]);

 const Dev_Username = ghostwriter  // replace ghostwriter with your username.
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

  useEffect(() => {
    fetch(`${Dev_Username}`, {
      headers: {
        'api-key': Secret_KEY
      .then(res => res.json())
      .then(data => setArticles(data));
  }, []);

  return (
      { => (
        <div key={}>
 <p><a href={article.url}>Read more</a> </p>

export default DevToArticles;

Enter fullscreen mode Exit fullscreen mode

For Vue.js

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

 const Dev_Username = ghostwriter  // replace ghostwriter with your username.
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

export default {
  data() {
    return {
      articles: []
  mounted() {
    fetch(`${Dev_Username}`, {
      headers: {
        'api-key': Secret_KEY
      .then(res => res.json())
      .then(data => {
        this.articles = data;

Enter fullscreen mode Exit fullscreen mode

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.

More about API:

The API provides access to a variety of resources, including articles, comments, users, and tags. Here's a brief overview of the types of data you can access from the API:

Articles: You can retrieve information about articles, including their titles, content, authors, and publication dates.

Comments: You can fetch comments on articles, including the commenter's name, comment text, and the article they're commenting on.

Users: You can retrieve information about users, including their usernames, bios, and profile pictures.

Tags: You can access the tags associated with articles, which can be useful for organizing and categorizing content.

In addition to these resources, the API also provides endpoints for interacting with the platform, such as creating and updating articles and comments.

CONCLUSION: Fetching Articles

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

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

Top comments (5)

techwatching profile image
Alexandre Nédélec

Interesting article. One thing to know though is that Vue CLI is not the recommended way to create a Vue project anymore. You should use the create-vue package instead that set up your project to use vite. I am not into react but I think you should also consider using vite thanks to the create-vite package that has a react template that used vite.

stephengade profile image
Stephen Gbolagade

I've been hearing about Vite but I have never take my time to understand and I think it's high time I checked, thanks for reminding me 👍👍👍

vincentdorian profile image

I have also just recently implemented this on my personal page, but you do not even need to send your Api Key.

Have you actually found a away to get the markdown from the page and display it on a page or is it just not possible?

stephengade profile image
Stephen Gbolagade

Yes, the key is not necessary.

For the markdown, I haven't try a solution yet as I redirect visitor to my page directly.

But you can try troubleshooting it this way:

In the response, you'll get body_html and as well as body_markdown, which return same content.

You can grab the body_markdown and render it using react-markdown package.

Another option I think is to use the body_html.

You can just use CSS to style the <code> tag.

I also discover that use these classes highlight js-code-highlight to format javascript code, which can also be styled with css.

stephengade profile image
Stephen Gbolagade

If you have any questions, please ask

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.