E-Commerce Store Stock Management Dashboard Using AppSmith And MongoDB

This Project is for E-commerce Store as a Stock Management Dashboard used my many warehouses. Now let’s Dive into it

What is Appsmith ?

Appsmith is a low code, open-source framework to build internal applications.

With their JavaScript-based visual development platform, build CRUD apps, Dashboards, Admin Panels, and many more 10x faster. You can use their pre-built UI widgets, connect them to your APIs and databases to build dynamic apps and complex workflows. And the best part? Deploy these apps on the technology you prefer! (self-host for free!). (Extract from Appsmith blog)

Step 1: Configure MongoDB

First go to the MongoDB website. And Sign In and Create a new project. Name your Project and add members to the project. Now select the server type as free and hobby (It is free forever!!!). Now wait for your cluster to get provisioned.

Step 2: Connect MongoDB with Appsmith

In the mean time open appsmith.org in another tab and click on try cloud and sign In to your account in the dashboard click on create a new project. Once your project is created rename it to stock manager you can name it what ever you want. Now click on the + icon next to data sources and click on create new now select MongoDB. Now go to the Mongo DB website and click on connect now follow the steps in the gif to connect your MongoDB data source. Once you have entered all the details click on test button once the test is passed you can click on save button. Hurray we are getting closer to our goal.

Step 3: Add a sample data

Now go to the mongoDB website and navigate to collections and click on insert new documents. Now enter one document or two in this format.

{“_id”:{“$numberInt”:”1"},
”productname”:”Chocolate”,
”mrp”:{“$numberInt”:”10"},
”stock”:”not available”}

Step 4: Designing the UI

Now Let’s create the first query, The fetch query. Go to the Widgets tab and drag and drop a table and expand it according to your needs. Now click on the settings icon next to the table name and remove the table data. Now click on the ➕ icon next to data source. and click on create a new query. Rename the query to fetch . and select the find data option. and in the collections field enter the collection name. Now copy this sort data into the sort field.

{_id : 1 }

Step 5 : ADD Query

Go to the widgets tab and drag and drop a button and resize it and change the label to add anew product. Now again go to the widgets tab and drag and drop a model widget. Resize it and drag the two buttons down. Now add text widgets and rename them and also add the input and select widget. Once the UI is done. open the add a new product button properties and change the on click to open the model.

Now lets write the query. Create a new query and select insert documents and enter you collection name in the collection field. In the documents field enter the following query.

[
    {
      "_id": "{{Input1.text}}",
      "productname": "{{Input2.text}}",
      "mrp": "{{ Input3.text }}",
      "stock": "{{ Select1.selectedOptionValue}}"
    }
  ]

Now go to the add a product model widget and select the submit button and change the onclick to execute the add product query. and on success change it to close a model and on error show a error message. Now select the model properties and change the onclose action to execute the fetch query.

Now test out the add product query.

Step 6 : Update Query

Now let’s create the update query. Click on the table properties and click on add a new column button and rename it to update. Now go to the update column settings and change the column type to button. Now rename the label. Now head to the widgets tab and drag and drop a model widget and configure it according to the gif above. Now go the update column properties and change the onclick action to open the update model.

Now create a query and rename it to update. Change the query type to update documents. Enter the collection name in the collections field. In the query field enter the following.

{_id : {{Table1.selectedRow._id}}}

In the update field enter the following data and configure it according to your widgets.

{ 
stock: "{{ Select2.selectedOptionValue }}",
productname: "{{Text10.text}}",
mrp: "{{Text11.text}}"
}

Step 7 : Delete Query

Now create a new column just like you did for update and rename it as delete. Now create a new query and rename it as delete. Now change the query type to raw and enter the following data

{   "delete": "stock",  
    "deletes": [ { 
            "q" : {_id : {{Table1.selectedRow._id}}},                               "limit" : 1      }   ]}

Hurray you did it !! Now you have a full working stock management dashboard. You can customize it in the way you want.

LINKS :

Appsmith | Build & self-host internal tools

The most popular database for modern apps