DEV Community: johannchopin

🏆 How do you evaluate the importance of StackOverflow reputation to find a job?

johannchopin — Wed, 21 Dec 2022 15:35:11 +0000

As a junior developer, my reputation on StackOverflow has really helped me get a job in positions that I wouldn't have been able to apply for with my limited experience. Indeed, many recruiters and senior developers have been impressed by my involvement in this forum and have seen a lot of potential.

However I noticed that many developers, both juniors and seniors, are not very active on this platform and doesn't seem to realize the impact it can have when searching for a job.

To be sure, I would appreciate your feedback on this question:

How do you evaluate the importance of StackOverflow reputation to find a job?

Link to the poll: https://www.linkedin.com/posts/johannchopin_activity-7011290355278970880-iCEc

Thanks in advance for your time😊

Get your ranking among all Stackoverflow users for your favourite technology

johannchopin — Thu, 03 Nov 2022 14:04:33 +0000

TLDR: Visit the Tags League page, select the technology and enter your Stackoverflow ID 😉

At the end of March, Stack Overflow discontinued an important feature for me: the Developer Story. This page allowed me to indicate during interviews my rank among all SO users for a specific technology.

So I decided to create a Tags League system as part of my open-source project stackoverflow-readme-profile which would allow each SO user to know his rank among all users in a specific technology (tags).

Thus it is possible for a user to display his rank in the form of a dynamic image called ranking badge:

In addition to the badges, a more "official page" summarises and explains a user's score with more information. In this way it is possible to simply add the link of the page to the badge in order to redirect a reader who is intrigued by this score:

➡️ You can generate these badges and view your score page from https://stackoverflow-readme-profile.vercel.app/tags-league.

Don't hesitate to post your rank in your favourite technology in comments 😉

Thanks again for reading. If you are willing to see this project growing don't hesitate to leave a ⭐ to the repo and push your ideas of improvement.

Let me also know if you want me to detail more about how the league calculation works in a future article.

johannchopin / stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README

stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README.

➡️ Get your profile badge:

💡 How to use?

Use the online generator for a quicker setup

You can generate your SO profile by calling this url with the corresponding template name and your SO user id:

https://stackoverflow-readme-profile.johannchopin.fr/:template/:id

Use it like that in your README:

[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/:template/:id)](https://github.com/johannchopin/stackoverflow-readme-profile)

📄 Templates

profile

Render a profile badge by using the profile template:

https://stackoverflow-readme-profile.johannchopin.fr/profile/:id

Params (as query strings)

param	default	description
`theme`	`default`	Theme to use. Check them out here!
`website`	`true`	Show or not the website URL (`true` \| `false`)
`location`	`true`	Show or not the location (`true` \| `false`)

profile-small

Render a smaller profile badge without the location and the website

Params (as query strings)

param	default	description
`theme`	`default`	Theme to use. Check them out here!

➡️ Get your ranking badge:

💡 How…

View on GitHub

Generate a dynamic Stackoverflow profile for your README

johannchopin — Mon, 14 Feb 2022 16:19:14 +0000

I'm really happy to share with you that the official website for stackoverflow-readme-profile is ready. This project allows you to generate dynamic svgs for your README like the following:

...and that only thanks to this simple Markdown:

[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/profile/8583669?theme=dark)](https://stackoverflow.com/users/8583669/johannchopin)

You want one too? Just go to the website https://johannchopin.github.io/stackoverflow-readme-profile and get the corresponding md or HTML snippet.

Easily share your Stackoverflow's profile on your README

johannchopin — Sun, 05 Dec 2021 15:27:29 +0000

Did you know that it was possible to easily share your Stackoverflow statistics using small dynamic images called "Flair"? This small image simply allows you to embellish your different READMEs like the one on GitHub or your online CV:

... and that just by adding the following Markdown:

![SO's Flair](https://stackoverflow.com/users/flair/USER_ID.png?theme=dark)

You can check them out at the URL https://stackoverflow.com/users/YOUR_USER_ID/YOUR_USER_NAME/flair :

This service proposed by Stackoverflow works very well, however since it hasn't be updated since a few years, there is some negative point that I noticed:

the avatar image is weirdly cropped
the only infos are the username, reputation score and badges amount
it's a png so there is no fancy animation
the image is very pixelated because of its small size (208x58)
and most importantly: you cannot improve it because the project is not open-sourced

That's why I developed my own version of this service that would solve all these problems: stackoverflow-readme-profile

johannchopin / stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README

stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README.

⁉️ How to use?

You can generate your SO profile by calling this url with the corresponding template name and you SO user id:

https://stackoverflow-readme-profile.johannchopin.fr/:template/:id

Use it like that in your README:

[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/:template/:id)](https://github.com/johannchopin/stackoverflow-readme-profile)

📄 Templates

profile

Render a profile image by using the profile template:

https://stackoverflow-readme-profile.johannchopin.fr/profile/:id

Params (as query strings)

param	default	description
`theme`	`default`	Theme to use. Check them out here!
`website`	`true`	Show or not the website URL (`true` \| `false`)
`location`	`true`	Show or not the location (`true` \| `false`)

profile-small

Render a smaller profile image without the location and the website

Params (as query strings)

param	default	description
`theme`	`default`	Theme to use. Check them out here!

🐳 Docker

Build the image

You can build the image by using the following command:

docker build -t johannchopin/stackoverflow-readme-profile .

Push the

…

View on GitHub

This project allows you to embed improved version of those flairs wherever you want:

Default Stackoverflow profile:

Smaller profile:

Just use the following markdown schema to get your flair:

[![my SO profile](https://stackoverflow-readme-profile.johannchopin.fr/TEMPLATE_NAME/USER_ID?theme=dark)](https://github.com/johannchopin/stackoverflow-readme-profile)

Not yet convinced to use this project? I can understand why using an "unofficial" service doesn't seem like a good idea but here are some points that might change your mind:

stackoverflow-readme-profile proposes a higher customisation with multiple themes and templates
stackoverflow-readme-profile render a svg so the final image is pixel clear and is animated
the project is open-sourced: You want a new feature or improve something? Just open an issue so we can collaborate together
you want to self host the application? No problem there is already a docker image for that.

Thanks again for reading. If you are willing to see this project growing don't hesitate to leave a ⭐ to the repo and push your ideas of improvement.

johannchopin / stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README

stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README.

⁉️ How to use?

You can generate your SO profile by calling this url with the corresponding template name and you SO user id:

https://stackoverflow-readme-profile.johannchopin.fr/:template/:id

Use it like that in your README:

[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/:template/:id)](https://github.com/johannchopin/stackoverflow-readme-profile)

📄 Templates

profile

Render a profile image by using the profile template:

https://stackoverflow-readme-profile.johannchopin.fr/profile/:id

Params (as query strings)

param	default	description
`theme`	`default`	Theme to use. Check them out here!
`website`	`true`	Show or not the website URL (`true` \| `false`)
`location`	`true`	Show or not the location (`true` \| `false`)

profile-small

Render a smaller profile image without the location and the website

Params (as query strings)

param	default	description
`theme`	`default`	Theme to use. Check them out here!

🐳 Docker

Build the image

You can build the image by using the following command:

docker build -t johannchopin/stackoverflow-readme-profile .

Push the

…

View on GitHub

Let's build the best REST API mocker tool together💪

johannchopin — Mon, 05 Apr 2021 15:04:23 +0000

Several months ago I released the first version of the open source project Restapify.

In simple terms, it is a CLI that enables you to serve a mocked REST API by using an intuitive and developer friendly JSON file structure (like you will see for Nextjs). For example you could create an API with users and posts like that...

📂 api
┣ 📂 users
┃ ┣ 📜 _.json
┃ ┣ 📂 [userid]
┃ ┃ ┗ 📜 _.json
┃ ┃ ┗ 📜 _.404.{NOT_FOUND}.json
┃ ┃ ┗ 📜 _.DELETE.json
┃ ┃ ┗ 📜 _.POST.201.json
┣ 📂 posts
┃ ┗ 📜 [postid].json
┃ ┗ 📜 my-post.PUT.json
┣ 📜 posts.json

...and then deploy it locally using restapify serve api/. Checkout the initial post to learn more about it.

This project helps me a lot when developing my apps and I think it could help many other developers by its ease of use and the fact that it is free. So if you want to see it develop further, it would be great if you could test it and give feedback on what could be improved😉

If you always wanted to participate in a project but didn't dare, don't hesitate. We all started without experience and Restapify is open to young collaborators who want to take their first steps in the world of open-source.

If you are interested or curious take the time to visit the official website or the repo directly:

johannchopin / restapify

Quickly and easily deploy a mocked REST API by using an intuitive and developer friendly JSON file structure

Thanks for all the feedbacks👍

Create a static documentation website from a hosted README with Sapper

johannchopin — Mon, 29 Mar 2021 16:52:43 +0000

A few weeks earlier, I was ready to share my OS project Restapify with the world (read more about it in this post). The coverage was good, the package published and the GitHub repo had a good and welcoming README. So it was time to create the website to present the features and the documentation of it in a fancy way.

The documentation websites should be a static website (since it's tiny, doesn't change a lot over time and the SEO is better) and the documentation should be generated from a README hosted on GitHub. With this in mind, sapper was the perfect candidate to build this website.

First part was to create the sapper project from his template:

npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
npm install

You should then have the following folder structure:

Then lets create two pages: / and /docs. In sapper you only need to add two svelte components in the src/routes folder: index.svelte and docs.svelte.

The home page only render some HTML components that presents the features etc...

<script>
    import Header from '../components/Header.svelte'
    import Features from '../components/Features.svelte'
    import GettingStarted from '../components/GettingStarted.svelte'
    import Footer from '../components/Footer.svelte'
</script>

<svelte:head>
    <title>Restapify • Quickly and easily deploy a mocked REST API</title>
</svelte:head>

<div id="home">
    <Header />
    <section class="container my-5 py-5">
        <Features />
        <hr />
        <GettingStarted />
    </section>
    <Footer />
</div>

The most interesting part is how to get a nice documentation like you can see here from a hosted README file on GitHub. The original documentation file is located on https://github.com/johannchopin/restapify/blob/main/docs/README.md so I'm able to simply fetch it's markdown code in JavaScript by using:

const DOCS_URL = 'https://raw.githubusercontent.com/johannchopin/restapify/main/docs/README.md'
const response = await fetch(DOCS_URL)
const inlineMd = await response.text()

Then I can parse the markdown to Html by using the showdownjs library:

import showdown from 'showdown'

export const getDocsAsHtml = (doc: string): string => {
  const converter = new showdown.Converter({ 
    disableForced4SpacesIndentedSublists: true,
    ghCompatibleHeaderId: true,
    tables: true
  })
  return converter.makeHtml(doc)
}

Then you can easily statically render this Html in sapper by using the native preload function:

/src/routes/docs.svelte

<script context="module">
  import { getDocsAsHtml } from "../docs-generation/getDocs";

  export async function preload(page) {
    const DOCS_URL = 'https://raw.githubusercontent.com/johannchopin/restapify/main/docs/README.md'
    const response = await this.fetch(DOCS_URL)
    const inlineMd = await response.text()
    const htmlContent = getDocsAsHtml(inlineMd)

    return { htmlContent }
  }
</script>

<script>
  export let htmlContent
</script>

<svelte:head>
    <title>Docs • Restapify</title>
</svelte:head>

<div class="row" id="wrapper">
    {@html htmlContent}
</div>

Now just by running the command sapper export you will get a static website with a nice home and documentation page. So if you change on part of the README documentation you will only need to re-export and deploy the static files.

So that was for the core concept of creating a static website from a hosted README. Thanks for reading and hope it will help some of you to deploy a nice and small static website for some open-source project 🚀

You can see a full example of such website source code at https://github.com/johannchopin/restapify-website.

Feel also free to check the Restapify project if you are interested in easily mocking a REST API:

johannchopin / restapify

Quickly and easily deploy a mocked REST API by using an intuitive and developer friendly JSON file structure

Restapify

Restapify is a tool that allows you to quickly and easily deploy a local REST API by using an intuitive and developer friendly JSON file structure.

Summary

Why Restapify

When you start a new frontend project when the backend is not yet ready, you quickly come to the question of how to retrieve the data to be displayed. There are then many solutions that come with advantages but also some inconveniences. It's possible to use a tool like postman but it's not 100% free and require an account, to simply fetch local JSON data but it only supports a GET request or use a mocker library like json-server, mocker-api or http-fake-backend.

The problem of most of this libraries is the way you have to define your API endpoints (a single file for all the routes, javascript files that took almost the same…

View on GitHub

Build Nextjs app with a Restapify mocked API

johannchopin — Sat, 13 Mar 2021 17:24:45 +0000

Hey devs 👋

Today I wanted to share how you can easily develop a Nextjs web application that consumes a REST API with the help of Restapify.

If you didn't heard about Restapify before, I really encourage you to read the article Quickly and easily mock a REST API with Restapify first.

So for this example, I will build an "Animal shelter" app where the user will be able to check a list of all the shelter residents, read more about a specific animal, be able to adopt one if possible and login/logout. To easily manage my layout and not recreate UI components I will use the React Bootstrap library. The app will get the data from a REST API that is not yet created so I will create a mocked version of it with the API mocker library: Restapify. With this one I only need to define some API endpoints with simple JSON files. Theses are stored in the folder mockedApi so like the app file structure look like this:

📂 app
┣ 📂 components
┣ 📂 lib
┃ ┗ 📜 userContext.js
┣ 📂 mockedApi
┣ 📂 pages
┃ ┗ 📜 _app.js
┃ ┗ 📜 index.js
┣ 📜 next.config.js

Next thing to implement is a store for an axios instance to make our http request to the API which will be served from http://localhost:6767/api. So we create the file /app/axiosStore.js:

import axios from 'axios'

const instance = axios.create({
  baseURL: `http://localhost:6767/api`
})

export default instance

We can then continue with the implementation of the animals page which is a list of all animals. This page will be served from the route /animals:

📂 app
┣ 📂 pages
┃ ┣ 📂 animals
┃ ┃ ┗ 📜 index.js

This page is going to fetch the endpoint GET /animals and render a list of all animals object which contain an id and a name:

import React from 'react'
import Link from 'next/link'

import { ListGroup, ListGroupItem, Form, Row, Col } from 'react-bootstrap';

import api from '../../axiosStore'

const Animals = () => {
  const [animals, setAnimals] = React.useState(null)

  const fetchAnimals = () => {
    api.get('/animals').then((response) => {
      setAnimals(response.data)
    })
  }

  const renderAnimals = () => {
    return (
      <ListGroup className="px-3">
        {animals.map((animal) => {
          return (
            <Link key={animal.id} href={`/animals/${animal.id}`} style={{cursor: 'pointer'}}>
              <ListGroupItem action>{animal.id}. {animal.name}</ListGroupItem>
            </Link>
          )
        })}
      </ListGroup>
    )
  }

  React.useEffect(() => {
    fetchAnimals()
  }, [])

  return (
    <>
      <Row className='mb-3 p-3'>
        <Col><h1>Our Residents</h1></Col>
      </Row>
      {!animals 
        ? <p>Loading...</p> 
        : renderAnimals()
      }
    </>
    )
}

export default Animals

The interface is now ready so lets mock the API to serve /animals with Restapify so that we get back an array of 25 animals. For that, we just need to create a file /mockedApi/animals/_.json that contains the following JSON:

[
  "#for i in range(25)",
  {
    "id": "n:[i]",
    "name": "[#faker:name:firstName]"
  },
  "#endfor"
]

Then we can serve the API using restapify serve mockedApi/ and we directly see the result:

It's working fine for 25 animals but what if you want to show more or less animals in the list using the request GET /animals?limit=x. With Restapify you can mock this by using the route's query string variables limit instead of the hard written 25 number. So replace "#for i in range(25)" with "#for i in range([q:limit])" or "#for i in range([q:limit|25])" to have 25 as the default value. Now if you request GET /animals?limit=42, you will get back 42 animals.

We can now easily add a Select component to define and update the amount of animals to see in the interface:

const Animals = () => {
  // ...

  const fetchAnimals = (limit) => {
    api.get(`/animals?limit=${limit}`).then((response) => {
      setAnimals(response.data) 
    })
  }

  // ...

  React.useEffect(() => {
    fetchAnimals(15)
  }, [])

  return (
    <>
      <Row className='mb-3 p-3'>
        <Col><h1>Our Residents</h1></Col>
        <Col lg="2" style={{display: 'flex'}}>
          Limit
          <Form.Control 
            className="ml-2 align-items-center" 
            as="select" 
            size="sm" 
            style={{width: 'fit-content'}} 
            onChange={e => { fetchAnimals(e.target.value) }}
          >
            {[15, 25, 50, 100].map(limit => (
              <option key={limit}>{limit}</option>
            ))}
          </Form.Control>
        </Col>
      </Row>
     // ...

If you click on one of the list item you are redirect to the detail page of an animal so lets create the corresponding page /pages/animals/[animalid].js:

import { useRouter } from 'next/router'
import { Card, Row, Col, Button } from 'react-bootstrap';

import api from '../../axiosStore'

export default function Animal() {
  const router = useRouter()
  const { animalid } = router.query

  const [animal, setAnimal] = React.useState(null)

  const fetchAnimal = (id) => {
    api.get(`/animals/${id}`).then((response) => {
      setAnimal(response.data)
    })
  }

  const renderAnimal = () => {
    return (
      <Card style={{ width: '22rem', margin: 'auto' }}>
        <Card.Img variant="top" src={animal.avatar} />
        <Card.Body>
          <Card.Title>{animal.name}</Card.Title>
          <Card.Text>{animal.description}</Card.Text>
          <Button variant="primary">Adopt me</Button>
        </Card.Body>
      </Card>
    )
  }

  React.useEffect(() => {
    if (animalid) fetchAnimal(animalid)
  }, [animalid])

  return (
    <>
      <Row>
        <Col>
          {!animal 
            ? <p>Loading...</p> 
            : renderAnimal()
          }
        </Col>
      </Row>
    </>
  )
}

We just also need to mock the API endpoint GET /animals/:id by creating the file /mockedApi/animals/[animalid]/_.json:

{
    "id": "n:[animalid]",
    "name": "[#faker:name:firstName]",
    "avatar": "[#faker:image:animals]",
    "description": "[#faker:lorem:paragraph]"
}

So when you navigate to /animals/42 you will see your UI populated with some mocked data:

Lets continue with the adoption feature. When an user click on Adopt me, the request PUT /animals/:id/adopt should be send. The response can be a 204 No Content if the adoption succeed or a 404 Not Found if it's not possible to adopt him. So we can implement it in the frontend by using simple alert messages:

export default function Animal() {

  // ...

  const adopt = () => {
    api.put(`/animals/${animal.id}/adopt`).then((response) => {
      if (response.status === 204) {
        alert(`You have adopted ${animal.name}`)
      }
    }).catch(({ response }) => {
      if (response.status === 404) alert(`Not possible to adopt ${animal.name}`)
    })
  }

  const renderAnimal = () => {
    return (
      <Card style={{ width: '22rem', margin: 'auto' }}>
        <Card.Img variant="top" src={animal.avatar} />
        <Card.Body>
          <Card.Title>{animal.name}</Card.Title>
          <Card.Text>{animal.description}</Card.Text>
          <Button variant="primary" onClick={adopt}>Adopt me</Button>
        </Card.Body>
      </Card>
    )
  }

  // ...
}

The again we just need to mock the PUT /animals/:animalid/adopt endpoint. So the default response will be a 204 No Content so we can add the file /mockedApi/animals/[animalid]/adopt.PUT.204.json that contain only [null] because it doesn't respond anything (see the no content response documentation). Then we need to create another state that mock a response 404 Not Found. Just create for that the file /mockedApi/animals/[animalid]/adopt.PUT.404.{ADOPTED}.json that only contains [null].

So if you click on the Adopt me button you will see the alert message You have adopted . To now see how the interface handle the case where the animal can't be adopted just go the restapify dashboard web application (it should open in the browser after serving the API with Restapify) and select the state ADOPTED for the route PUT /animals/:animalid/adopt:

If you now retry to adopt the animal, you should see the alert message Not possible to adopt .

Using states with the dashboard is a really nice flow to test your interface for all cases in a snap.

You can find the complete example of it on GitHub if you want to play with it by your own: https://github.com/johannchopin/restapify-examples/tree/main/nextjs-animal-shelter-app. It also implement an user Authentication form that is mocked in the same way than the adopt feature.

If you have some question or some ideas about Restapify feel free to open a discussion or an issue 👍

If you like the process of mocking an REST API with Restapify and want to support it's development just leave a ⭐ on the GitHub repo.

johannchopin / restapify

Quickly and easily deploy a mocked REST API by using an intuitive and developer friendly JSON file structure

Restapify

Restapify is a tool that allows you to quickly and easily deploy a local REST API by using an intuitive and developer friendly JSON file structure.

Summary

Why Restapify

The problem of most of this libraries is the way you have to define your API endpoints (a single file for all the routes, javascript files that took almost the same…

View on GitHub

Quickly and easily mock a REST API with Restapify

johannchopin — Tue, 09 Mar 2021 11:01:59 +0000

Hey devs 👋

Often when you start developing a new frontend project that consume a REST API, the backend is not yet ready. However, very often this one is at first basic and you only want to receive faked data to see how the application behaves. That's when you decide to use a tool to mock your API like postman or library like json-server, mocker-api or http-fake-backend. These tools are really good but there still have some negative points. Postman for example is not entirely free to use and needs to login, mocker-api define all routes in a single javascript file and json-server is at some point very restrictive for edge-cases.

So I decided to work on a new API mocker tool that should be able to handle all cases and that within a nice developer experience flow: Restapify.

Restapify is a nodejs based CLI that allows you to quickly and easily deploy a local REST API by using an intuitive and developer friendly JSON file structure like you will see in NextJS or Sapper. Lets describe how it works by creating a simple mocked API that should serve the following:

GET  /me
GET  /posts
GET  /users
GET  /users/:userid
POST /users/:userid
DEL  /users/:userid
GET  /users/:userid/comments

Create the endpoints

The starting point is the creation of the folder that will contain your route json file, I will call it /api. Then we can add some routes to be served. Creating a route means to add a .json file where its filename describe the endpoint, the method and the status code and its content the response body. So to create the GET /me endpoint with the status code 200 just create the following file:

📂 api
┣ 📜 me.GET.200.json

Since GET and 200 are the default value for the method and the status code, you can simplify the filename to:

📂 api
┣ 📜 me.json

The response should contain a firstname, a lastname and an email, so the file content of /api/me.json would be something like:

{
  "firstname": "Janie",
  "lastname": "Hermann",
  "email": "Jo.Kessler@yahoo.com"
}

Then lets add the endpoints for /users. Since there are a few of them we can group them in the same folder users

📂 api
┣ 📂 users
┃ ┗ 📜 _.json
┃ ┣ 📂 [userid]
┃ ┃ ┗ 📜 _.json
┃ ┃ ┗ 📜 _.POST.201.json
┃ ┃ ┗ 📜 _.DELETE.201.json
┣ 📜 me.json

The folder [userid] indicate that this route is dynamic. You can then in the JSON file content consume this variable by using the syntax [userid]. Example in the file /api/users/[userid]/_.json:

{
  "id": "[userid]",
  "email": "Jo.Kessler@yahoo.com"
}

If you call then GET /users/42 you will get the response:

{
  "id": "42",
  "email": "Jo.Kessler@yahoo.com"
}

Here to get the id as a number, just cast the variable by using the syntax n:[var] like "id": "n:[userid]". Variable casting docs

Restapify provide a syntax to use the famous fakerjs library to easily populate your response's body (checkout the docs):

{
  "firstname": "[#faker:name:firstName]",
  "lastname": "[#faker:name:lastName]",
  "email": "[#faker:internet:email]"
}

You can also easily create a waste amount of data by using the for-loop syntax. So if you want to get 10 comments with the request GET /users/:userid/comments just write this in the JSON file /api/users/[userid]/comments.json:

[
  "#for i in range(10)",
  {
    "id": "n:[i]",
    "creatorId": "n:[userid]",
    "content": "[#faker:lorem:sentences]"
  },
  "#endfor"
]

So now we have created all the endpoints of the API that send a succeeded response. But what if we want to test the behaviour of the application when the user doesn't exist in GET /users/:userid for example. A real API would probably return a 404 without any content. To mock this behaviour, Restapify implement the concept of endpoint states. To do this you just have to create a new file for each different state by adding at the end of the file the syntax {STATE_NAME} separated by a dot. So lets create a new state for GET /users/:userid:

📂 api
┣ 📂 users
┃ ┣ 📂 [userid]
┃ ┃ ┗ 📜 _.json
┃ ┃ ┗ 📜 _.404.{NOT_FOUND}.json

To return no-content in Restapify you have to use this syntax as file content:

[null]

An empty file would be more convenient but it's not valid for a JSON file according to the ECMA-404 standard.

Now that you have created your endpoints, it's time to serve the mocked API. For that install the Restapi CLI...

yarn global add restapify 
# or npm install -g restapify

...and then serve the api/ folder:

restapify serve api/

It will then open a dashboard in your browser that give you an overview of the mocked API.

You can in this dashboard consult the endpoints and their content, fetch them and more important select which state of the endpoints you want to serve.

So if you click on the state button NOT_FOUND, it will update the API to serve this state of the endpoint, so if you directly after request GET /users/42 you will receive a 404. This is really helpful to test your frontend (for example a login forms) and you can create so much several state as you want to fit all you need and edge cases.

So I presented the most important features of Restapify but I really encourage you to check the official documentation of it to see other use cases like query string, route variable in for-loops or the fakerjs integration in more details.

You can find some prepared examples of mocked API in https://restapify.vercel.app/examples so that you can directly play and see how it feel. If you have any question or feedback feel free to post it in the discussion and if you want to checkout the source code, here is the GitHub repository:

johannchopin / restapify

Quickly and easily deploy a mocked REST API by using an intuitive and developer friendly JSON file structure

Have a good day ⭐