# Display App in Dashboard

### Adding the App to the Database

In order to display the app on the dashboard's main page, we need first to add it to the database. We have provided you with a script that allows you to perform this process in an easy fashion.

First step is to pull the script from the original repository (since most likely it is not available on your fork).

Open git bash or your preferred terminal, navigate to your **backend** repository and type the following commands:

```bash
git remote add upstream https://github.com/MedTech-CS321/smuportal-backend.git
```

```bash
git fetch upstream
```

```bash
git checkout --track upstream/app-creator
```

Finally, run `npm run createApp` and fill in the prompt with information related to your app, in this, we have done the following,

```bash
npm run createApp

> smuportal@0.0.0 createApp ~/smuportal-backend
> node models/appCreator.js

Database connection established!
Enter Application's Name: Book Management System
Enter Application's Description: Managing Lists of Books
Enter Feature n1 | (Leave Blank to Finish): Get Books
Enter Feature n2 | (Leave Blank to Finish): Add Books
Enter Feature n3 | (Leave Blank to Finish): Delete Books
Enter Feature n4 | (Leave Blank to Finish):
Choose Roles ( Current Roles: student,professor): professor,student
Book Management System Has Been Successfully Created!
Database connection closed

You can now safely run `npm start`
```

{% hint style="warning" %}
**Caution:** Do not forget to revert back to your master branch after creating your app.
{% endhint %}

### Displaying the App on the Frontend Side

For this part you need to navigate to the **frontend** directory.

To display the app on the dashboard's main page, we need **add** an entry to the  `config.json` file. You can find the file at `src/assets/apps/`

```javascript
{
    "appName": "Book Management System",
    "iconUrl": "book.png",
    "path": "/apps/bms"
}
```

This is how the`config.json` file should be.

{% tabs %}
{% tab title="src/assets/apps/config.json" %}

```javascript
[
  {
    "appName": "Logistics Reservation",
    "iconUrl": "logistics-reservation.png",
    "path": "/apps/logistics"
  },
  {
    "appName": "Job App",
    "iconUrl": "job-applications.png",
    "path": "/apps/jobs"
  },
  {
    "appName": "Document and Services",
    "iconUrl": "docs.png",
    "path": "/apps/docs"
  },
  {
    "appName": "Admin Dashboard",
    "iconUrl": "users.png",
    "path": "/apps/admin"
  },
  {
    "appName": "Book Management System",
    "iconUrl": "book.png",
    "path": "/apps/bms"
  }
]
```

{% endtab %}
{% endtabs %}

Finally, our app is displayed in the dashboard and the icon is clickable. <br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://smu-portal.gitbook.io/get-started/book-module-tutorial/frontend/display-app-in-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.