Fast prototyping without worrying about the backend

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 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 (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

{
    "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:

{
    "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

{
    "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:

{
    "_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:

[
    {
        "_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

[
    {
        "_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 where I write weekly blogs about whatever in the world of programming has my attention!