Meteor / react: create mongodb entries by form inputs and “clicking” inputs

See more:

Javascript

MongoDB

Node.js

, +

Hello All,

I’m new to Meteor / React. I want to build a Real-Time Page where Entries in a MongoDB Collection will be displayed on a WebPage. But the first step would be to create these objects in MongoDB with a Config WebPage for the User that he can maintain the input/output.

For that, I’d like to create a Config Page where you can add Attributes/Values to a specific Key. To illustrate my Idea I created a MockUp.

See MockUp

In this Front End (P1) you could add a new House by enter a Text in the Textbox and press the “Create House” Button. If you’d like to delete a House, mark the House and Press the “Delete House” Button. The same logic is behind adding Rooms and deleting them.

If there are existing entries I’d get them with something like:

//to get the House List
db.collection.distinct("House") 
//to get the Room List
db.collection.distinct("Room")

The idea behind this page is that you can assign different rooms to different houses by double-clicking the entries on the rooms list.

In the MongoDB Collection I’d like the Configuration looking something like this as soon as something was “double-clicked”:

{
_id: 1
"House": "House_1",
"Room": "Kitchen"
},
{
_id: 2
"House": "House_1",
"Room": "LivingRoom"
},
{
_id: 3
"House": "House_1",
"Room": "Bedroom"
}

In the next step, I’d like to configure the different rooms of the different Houses. The Front End (P2) has similar looks and functionality to the House Configuration.

Now we are on to configure the different Rooms of the different Houses. First I’d like to select the House by a Dropdown. After I selected the House, on the left List I’d get every Room which is linked to the House. To configure the Furniture in the Room I’d select the Room and by double-clicking I’d add the Furniture.

My MongoDB Collection would look something like this afterward:

{
_id: 4
"House": "House_1",
"Room": "Bedroom",
"Furniture": "Bed"
},
{
_id: 5
"House": "House_1",
"Room": "Bedroom",
"Furniture": "Desk"
},
{
_id: 6
"House": "House_1",
"Room": "Bedroom",
"Furniture": "Wardrobe"
}

My question now is, can I achieve the desired functionality with Meteor / React and if so how would you approach this?

If you have read this far, I thank you very much and I am looking forward to your input!!

Regards, OctoDev

What I have tried:

So far I've just got the Concept. Now I'm looking for your Input on how you would approach this project. Thanks!