How to test DEV API ?
Tags: api, webdev, tutorial, vue
Published: 2022-12-26 17:07:00

|⚠|This post was written for the v0 of the API. (December 2022). [DEV/Forem posted a depreciating alert](https://dev.to/devteam/documenting-the-forem-v1-api-15ck) for this version. It might not work anymore. Please [refer directly to the documentation of the new version](https://developers.forem.com/api/v1).|
|---|---|
{% embed https://github.com/forem/forem/pull/19062 no-readme %}


## Introduction

**DEV** (dev.to) are a public API where you can get posts and profiles from [Forem API](https://developers.forem.com/api). ✨

{% embed https://developers.forem.com/api %}

## Let's go ! 

For testing this API, you can take any HTTP Client. I will take **[Hoppscotch](https://hoppscotch.io/)** available wherever you want!.

1. First time, go to create [your API key here](https://dev.to/settings/extensions) (on _DEV Community 👩‍💻👨‍💻 API Keys_ section).

2. To get your articles, **GET** `https://dev.to/api/articles/me` and adding to the header `api-key` :

```http
GET /api/articles/me HTTP/1.1
Api-Key: YOUR_AWESOME_KEY
Host: dev.to

```

You get information of your articles, but for this example I only [show the latest](https://dev.to/thomasbnt/when-can-you-declare-yourself-a-full-stack-dev-31j1) :

```json
[
  {
    "type_of": "article",
    "id": 1281931,
    "title": "When can you declare yourself a Full-stack Dev?",
    "description": "Hello 👋🏼  I was wondering if I should consider myself as a front-end or full-stack developer. Or at...",
    "published": true,
    "published_at": "2022-12-02T17:05:00.000Z",
    "slug": "when-can-you-declare-yourself-a-full-stack-dev-31j1",
    "path": "/thomasbnt/when-can-you-declare-yourself-a-full-stack-dev-31j1",
    "url": "https://dev.to/thomasbnt/when-can-you-declare-yourself-a-full-stack-dev-31j1",
    "comments_count": 29,
    "public_reactions_count": 34,
    "page_views_count": ----,
    "published_timestamp": "2022-12-02T17:05:00Z",
    "body_markdown": "Hello 👋🏼\n\nI was wondering if I should consider myself as a front-end or full-stack developer. Or at least how to present myself to companies.\n\nAnd then, I asked myself... **at what moment can you consider yourself a full-stack developer?** What are the basics to know to become one? \n\n\n> For example, \n> I suppose that to be a self-proclaimed full-stack developer in JavaScript, you have to know at least one front-end framework (like [`Vue`](https://vuejs.org), [`React`](https://reactjs.org/), [`Angular`](https://angular.io/), [`Svelte`](https://svelte.dev/), [`Astro`](https://astro.build/) etc...), know the basics of the backend and its specificities, especially [`Node.js`](https://nodejs.dev) and all its aspects, know one or more frameworks (I think of [`Express.js`](https://expressjs.com/) or [`Fastify`](https://www.fastify.io/)), know how to create an API and databases, and know the principle of MVC in order to set up a good architecture.  \n> \n> _If there is something missing, don't hesitate to tell me_.",
    "positive_reactions_count": 34,
    "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--CzOg3CT7--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15u06okn5tcdc0i92xhm.png",
    "tag_list": [
      "discuss"
    ],
    "canonical_url": "https://dev.to/thomasbnt/when-can-you-declare-yourself-a-full-stack-dev-31j1",
    "reading_time_minutes": 1,
    "user": {
      "name": "Thomas Bnt",
      "username": "thomasbnt",
      "twitter_username": "Thomasbnt_",
      "github_username": "thomasbnt",
      "user_id": 18254,
      "website_url": "https://thomasbnt.dev",
      "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--zpCwDOpw--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/18254/c3e35d32-bfe2-48ed-93b7-f2caf9c60gd7.png",
      "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--Iv24f4-g--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/18254/c3e35d32-bfe2-48ed-93b7-f2caf9c60gd7.pngg"
    },
    "flare_tag": {
      "name": "discuss",
      "bg_color_hex": "#1ad643",
      "text_color_hex": "#FFFFFF"
    }
  },
]
```

In image, here is the request!

![How to make a GET call from Hoppscoth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scg492a6g1rs57imkj33.png)

With this app, we are cool others features like _GraphQL_ and _WebSocket_. You can export your request to _CURL_ or others languages, very clean ! 😍

## Coding time!

With this data, we can create a **multitude of cool websites**. 
In my case, I'm creating a simple page to see my posts and my profile (profile picture, description, joined timestamp, total of posts). 

I created the project with [Vue.js](https://vuejs.org) and the DEV/Forem API. You can see the [final code](https://github.com/thomasbnt/devtoprofile) and the preview of the website.

[![Preview of the project called devto profile made with Vue and the DEV API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy24b8ofix1tywh4byqs.png)](https://devtoprofile.thomasbnt.dev/)

I show you how I **GET** my information from a **Vue component**. It's like doing it with an **HTTP client**, except that it's JavaScript.

```js
const USERNAME_DEVTO = "thomasbnt";
export default {
  data() {
    return {
      posts: {
        data: [],
      },
      userLink: `https://dev.to/${USERNAME_DEVTO}`,
    };
  },
  mounted() {
    fetch(
      `https://dev.to/api/articles?username=${USERNAME_DEVTO}&per_page=200`
    )
      .then((res) => res.json())
      .then((data) => {
        this.posts = data;
      })
      .catch((error) => console.log(error));
  },
}
```
**Very easy, love to work any API 🤩**
You can [check the full component here](https://github.com/thomasbnt/devtoprofile/blob/master/src/components/devto.vue).

Don't hesitate to contribute, and you can also test different APIs. ✨

___

|☕|Check my [Twitter account](https://twitter.com/thomasbnt_). You can see many projects and updates. You can also [support me on Buy Me a Coffee, Stripe or GitHub Sponsors](https://thomasbnt.dev/donate). Thanks for read my post ! 🤩|
|---|---|