Fast prototyping without worrying about the backend
Tags: programming, javascript
Published: 2021-04-25 19:06:40

This week I had a small project I wanted to prototype with an even smaller timescale, so I did the obvious thing, rather than actually _getting on with it_ I did a google trying to find faster ways to prototype the project without having to implement the CRUD endpoints I'd need.

I came across [crudcrud.com](https://crudcrud.com/) which did exactly what I was hoping for; it generates a unique API endpoint address for you so that you can append any REST resource to it. _(I have no affiliation with crudcrud.com I just found the website very useful, enough to make me want to write about it)._

So let's say - because there isn't enough already - we're going to create a note-taking app. But we've got this really cool frontend idea that we want to demo with some working data. In comes crudcrud.com.

Let's open the site and grab the URL it's provided us:

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17
```

Next step, let's open [Postman](https://www.postman.com/) (Or whatever tool you use to test APIs). I want to create a `/notes` resource so I'm going to create POST a request to store a note.

### POST

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes
```

```json
{
    "name": "How to write a good blog?",
    "note": "Well, first you'd have to be a writer for codeheir.com",
    "author": "Codeheir"
}
```

Which gives you the response:

```json
{
    "name": "How to write a good blog?",
    "note": "Well, first you'd have to be a writer for codeheir.com",
    "author": "Codeheir",
    "_id": "6085b55113120c03e81c9522"
}
```

Now, I can make use of the `_id` it returns to make a `GET` request to retrieve the entity, `PUT` to update the entity, and `DELETE` to delete the entity.

### PUT

I've since updated the note that I wrote above, so I'd like to let the backend know about this to store it. Let's create a `PUT` request to do that. Now if I append the `_id` of the note to the URL and update the method to `PUT`.

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes/6085b55113120c03e81c9522
```

```json
{
    "name": "How to write a good blog? 🚀",
    "note": "Well, first you'd have to be a writer for codeheir.com and use emojis whenever possible 🔥",
    "author": "Codeheir"
}
```

### GET entity

Now I can perform a `GET` to view my newly updated note.

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes/6085b55113120c03e81c9522
```

And the response:

```json
{
    "_id": "6085b55113120c03e81c9522",
    "name": "How to write a good blog? 🚀",
    "note": "Well, first you'd have to be a writer for codeheir.com and use emojis whenever possible 🔥",
    "author": "Codeheir"
}
```

### GET resource

Now, for my UI I want to retrieve all of the notes so that I can display them. To do that we perform a `GET` on the resource itself.

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes
```

Which returns all of our notes:

```json
[
    {
        "_id": "6085b55113120c03e81c9522",
        "name": "How to write a good blog? 🚀",
        "note": "Well, first you'd have to be a writer for codeheir.com and use emojis whenever possible 🔥",
        "author": "Codeheir"
    },
    {
        "_id": "6085b89413120c03e81c9525",
        "name": "Test blog",
        "note": "This is just a test blog, delete it later",
        "author": "Codeheir"
    }
]
```

### DELETE

As you may have seen from the request above, I have a note that I don't really care for, I've even mentioned in the note that I'll delete it later, let's go ahead and do that by creating a `DELETE` request:

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes/6085b89413120c03e81c9525
```

Now when I perform the `GET` resource request I should no longer see the deleted entity:

```
https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes
```

```json
[
    {
        "_id": "6085b55113120c03e81c9522",
        "name": "How to write a good blog? 🚀",
        "note": "Well, first you'd have to be a writer for codeheir.com and use emojis whenever possible 🔥",
        "author": "Codeheir"
    }
]
```

And that's pretty much it, a really powerful website to create quick prototypes so you don't need to worry yourself about all the layers involved in getting a backend going.

Let me know if you have any other tips for creating quick prototypes, I'm all for speeding up the process!

I hope you've enjoyed this blog, if you do by some miracle enjoy my blabbering then head over to my blogging site at [codeheir.com](codeheir.com) where I write weekly blogs about whatever in the world of programming has my attention!