Generate Crud Ui and Rest Api from a Schema

I would like to define a couple of schemas and automatically generate simple tables and forms from that automatically retrieve and store data via a standard REST API in a database (ideally a MongoDB).

The schema could for example look like this:

{
  "title": "AudioInputDevices",
  "type": "object",
  "properties": {
    "id": {
      "type": "number"
    },
    "name": {
      "type": "string"
    },
    "channelCount": {
      "type": "number"
    }
  },
  "required": ["id", "name", "channelCount"]
}

(But it could of course be more complicated and have properties of type array or object.)

UI

From the example schema, it should generate UI elements like this:

+----+-----------------------+--------------+
| id |         name          | channelCount |
+----+-----------------------+--------------+
|  0 | Built-in Microphone   |      1       |
|  1 | Behringer XR18        |     18       |
|  2 | Sennheiser Stereo Mic |      2       |
+----+-----------------------+--------------+

  [Add]   [Edit]   [Delete]

The Add button opens a form like this:

+--------------------------------+
|      Create New Record         |
+--------------------------------+
|           name: [          ]   |
|   channelCount: [          ]   |
|                                |
|            [Submit]            |
+--------------------------------+

The Edit button opens a form like this:

+------------------------------------+
|             Edit Record            |
+------------------------------------+
|           name: [Behringer XR18]   |
|   channelCount: [            18]   |
|                                    |
|              [Submit]              |
+------------------------------------+

REST API

The table should automatically load its data from GET /api/AudioInputDevices which would return something like this:

[
  {
    "id": 0,
    "name": "Built-in Microphone",
    "channelCount": 1
  },
  {
    "id": 1,
    "name": "Behringer XR18",
    "channelCount": 18
  },
  {
    "id": 2,
    "name": "Sennheiser Stereo Mic",
    "channelCount": 2
  }
]

When the Add form is submitted the data from the form should be submitted via POST /api/AudioInputDevices with a json like this:

{
  "name": "Headset Mic",
  "channelCount": 1
}

The response would be:

{
  "id": 3,
  "name": "Headset Mic",
  "channelCount": 1
}

and should be added to the table in the UI automatically.

When the Edit form is submitted the data from the form should be submitted via PUT /api/AudioInputDevices/:idOfSelectedItem (e.g. /api/AudioInputDevices/3 with a json like this:

{
  "name": "Hello",
  "channelCount": 1
}

The response would be:

{
  "id": 3,
  "name": "Hello",
  "channelCount": 1
}

and the entry in the table should be updated accordingly automatically.

When the Delete button is pressed, a request should be sent to DELETE /api/AudioInputDevices/:idOfSelectedItem and if a status code 200 is received the element should be removed from the table in the UI automatically.

Database

A request to GET /api/AudioInputDevices should create a MongoDB query like this:

db.AudioInputDevices.find({})

A request to GET /api/AudioInputDevices/123 should create a MongoDB query like this:

db.AudioInputDevices.find({"_id": 123})

A request to POST /api/AudioInputDevices should create a MongoDB query like this:

db.AudioInputDevices.insertOne({
  name: "New Microphone",
  channelCount: 1
})

A request to PUT /api/AudioInputDevices/22 should create a MongoDB query like this:

db.AudioInputDevices.updateOne(
  { id: 22 },
  { $set: { name: "Updated Microphone", channelCount: 20 } }
)

A request to DELETE /api/AudioInputDevices/2 should create a MongoDB query like this:

db.AudioInputDevices.deleteOne({ id: 2 })

Ideas

express-restify-mongoose seems to be great for creating complete MONGODB-connected REST APIs from a Mongoose Schema.
UI-Schema seems to be great for generating tables and forms including frontend validation. It's based on JSON Schema, extended by a couple of UI-specific keywords.

But even if I were to write a UI-Schema to Mongoose Schema converter, the UI still wouldn't automatically be connected to the API.

The whole idea seems like such a trivial and obvious problem, that has most likely been solved before I would guess. I'm just not able to find anything online. Does anyone of you have any experience with this or ideas on how to solve it without too many hacks?

Edit: I would prefer a solution using a JSON-based REST API, React.js frontend and MongoDB for storage in the backend, but I am open to alternative solutions. It's just important that it needs to be a JS-based browser frontend and a JS-based nodejs backend.

3
Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.

Share this article