Now is arguably the most exciting time to be a front-end developer. There is so much going on in the community. New frameworks and features come out every day. Inevitably, it gets harder and harder to keep up with all the latest developments.

While things are moving so fast in the front-end land, web apps still need a back-end if they want to “remember” any information. In order to be of any use to the end user, most web apps need to have a way of persisting data across time, browsers and devices. The way to achieve this is to have a server somewhere storing the information and sending it when the application asks for it.

The back-end, no matter how simple, is something that every developer has to invest time and effort setting up every time they want to get their cool prototype running. The skill of building a back-end, however, is not necessarily on every front-end developer’s priority list, especially given how much there is to learn on the front-end alone. Also, it is not as fun as building the app.

To make matters worse, if the prototype needs to “remember”, it can no longer be hosted on one of those simple static website hosting platforms. You will need to find a provider who allows you to manage your own back-end infrastructure, which comes at a higher cost both in terms of time and money.

Imagine if you could save all that time you would otherwise waste creating the back-end and instead focus on the work you care about. An online tool called CrudCrud can help you do just that.

What is CrudCrud?

CrudCrud is the name of a simple online service which was created to address the inconveniences, described above, which many front-end developers face while building their prototypes, side projects, minimum viable products etc.

When you first visit the CrudCrud website, a unique REST API endpoint will automatically be generated for you. It will look something like this:

https://crudcrud.com/api/9d12090a50e44e08b5479548888e77ae

The random string at the end is what makes each endpoint unique. That’s it. You have your back-end set up. It is ready to receive and respond to HTTP requests. It is fully CORS enabled, so that requests can be sent from a site running in any domain.

CRUD operations with arbitrary JSON objects

Your unique REST API endpoint will serve as the back-end for your app. Any REST resource you need will be automatically created the first time you send a request to it.

According to the general conventions, POST requests are used to create objects, which will be persisted on the back-end; GET requests are used to retrieve either all or individual entities, which can be referred to by their _id which CrudCrud generates automatically when they are created; PUT requests can update the contents of individual entities; and DELETE requests can be used to remove entities from the back-end store.

All entities must be represented using JSON. It is up to your app to decide the exact structure of the JSON it is going to use. CrudCrud can store arbitrary JSON objects.

Example

Here are a few example snippets of what you might do in order to carry out CRUD operations using JavaScript and your CrudCrud endpoint. You can go ahead and paste them in your browser console to quickly try them out.

Let’s say you are working on a “Todo App” (very worn out example, I know). Your app should be capable of Creating, Reading, Updating and Deleting todos.

We will use the fetch API to illustrate the requests your app would need to make:

Create

To create a new todo item, we need to use a POST request. Note how we can simply append /todos as a REST resource to our CrudCrud endpoint and it just works.

fetch('https://crudcrud.com/api/***/todos', {

headers: { "Content-Type": "application/json; charset=utf-8" },

method: 'POST',

body: JSON.stringify({

name: 'Write Tests',

done: false

})

})

.then(response => response.json())

.then(data => console.log(data))

If you paste this in your browser console and replace the “***” placeholder with your unique endpoint random string identifier, you will get the response logged on the console. It will look something like this:

{

"_id":"5d20d8cfe6280703e8ec06d9",

"name":"Write Tests",

"done":false

}

Run it a few more times to create a few more todo items. Next you will see how you can retrieve those items.

Read

First, we can read all items created so far for a given REST resource by issuing a GET request. Similarly to the example above, you can paste this snippet in your browser console to see it working:

fetch('https://crudcrud.com/api/***/todos')

.then(response => response.json())

.then(data => console.log(data))

You should get all items that you created in the previous step reported back on the console.

You can also retrieve individual entities from a REST resource using its _id, which gets automatically generated by CrudCrud on creation. From the example response in the previous step, the identity of the todo item we created was “5d20d8cfe6280703e8ec06d9”.

So, let’s ask for it:

fetch(

'https://crudcrud.com/api/***/todos/5d20d8cfe6280703e8ec06d9')

.then(response => response.json())

.then(data => console.log(data))

The response should unsurprisingly return the same item we created earlier. If you are trying this yourself, don’t forget to change the _id value to the one of your item. If you use an _id for which no item exists, the response will be a 404 Not Found.

Update

In order to update an already existing entity, we need to issue a PUT request and refer to the entity of interest using its _id. Let’s say the “todo” item we created in the first step is now done and we want to update its state:

fetch(

'https://crudcrud.com/api/***/todos/5d20d8cfe6280703e8ec06d9', {

headers: { "Content-Type": "application/json; charset=utf-8" },

method: 'PUT',

body: JSON.stringify({

name: 'Write Tests',

done: true,

note: 'Bob wrote 5 tests'

})

})

.then(response => console.log(response))

There are a couple of things to note here.

First is that the response does not contain a payload like in the creation case. Note the missing response => response.json() line.

Second thing to note is that the update effectively replaces all fields of the existing entity apart from the _id. In this case, we decided to keep the same name property and add an additional note. Had we not included the name property in the request payload, the todo would have been left without a name.

Delete

To delete an entity from a REST resource, all you need is its _id and a DELETE request.

fetch(

'https://crudcrud.com/api/***/todos/5d20d8cfe6280703e8ec06d9', {

method: 'DELETE'

})

.then(response => console.log(response))

Use instead of Local Storage

An expedient way of achieving short term persistence in a single-page application is to use the local browser storage. This is not ideal because then there is no way to get information shared between different instances of the app on different browsers and devices.

If you have written apps like that or are following a tutorial which makes use of local storage instead of a persistent back-end store, you can simply replace the implementation of the CRUD methods with the code snippets from above or similar code calling your CrudCrud endpoint. Your app will instantly turn into an app which “remembers”. App instances on different devices will be able to access the same state because it will be persisted by CrudCrud.

Host as a static site

Since all the back-end is taken care of by CrudCrud, your app can be hosted easily as a static website in one of the numerous available platforms at no or very low cost.

This should allow you to get your prototypes and proof-of-concept apps in front of people’s eyes faster and be able to iterate on their feedback quicker. The apps will create the impression of fully working implementations because information will be persisted in the back-end.

Once the prototype needs to grow into a fully developed production application, someone will have to spend the effort and develop a real secure and optimized back-end implementation. CrudCrud is not trying to be a substitute for a secure, optimized and production quality back-end infrastructure. CrudCrud is there to save you the time and effort until you need one.

Thank you for reading and happy CRUDing with CrudCrud!