DEV Community

Cover image for Fast prototyping without worrying about the backend
Luke Garrigan
Luke Garrigan

Posted on

Fast prototyping without worrying about the backend

#programming #javascript

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
{
    "name": "How to write a good blog?",
    "note": "Well, first you'd have to be a writer for codeheir.com",
    "author": "Codeheir"
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
{
    "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"
}
Enter fullscreen mode Exit fullscreen mode

GET entity

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

https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes/6085b55113120c03e81c9522
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

https://crudcrud.com/api/b431386d6a404a768024221e158b3b17/notes
Enter fullscreen mode Exit fullscreen mode 
[
    {
        "_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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Read next

rimi_jalil2002 profile image

Can English Replace Java? The Future of Programming in Plain Language

Rimsha Jalil -

mrinasugosh profile image

3 Myths, 3 Facts, and 3 Strategies to Scale Node.js Apps

Mrinalini Sugosh (Mrina) -

mikeyoung44 profile image

World's Largest Telegram Dataset Reveals How Information Spreads Across 120,000+ Channels

Mike Young -

mikeyoung44 profile image

Microsoft's Phi-4: Smaller AI Model Achieves Big Results Through Clean Training Data

Mike Young -