> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/magicjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/magicjs/basic-guide/perform-crud-operations.md).

# Perform CRUD Operations

{% embed url="<https://www.youtube.com/watch?v=rtndX85uMjE>" %}
Perform CRUD Operations
{% endembed %}

## Setup

1. Create a React component file named `db-test` with the path `/db`.
2. Add buttons for CRUD operations: Add Product, Get Product, Update Product and Delete Product.

{% code title="db-test.tsx" %}

```tsx
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
    return (
        <div>
            <Button>Add Product</Button>
            <Button>Get Product</Button>
            <Button>Update Product</Button>
            <Button>Delete Product</Button>
        </div>
    )
}
```

{% endcode %}

<details>

<summary>Expand for Tailwind styled code.</summary>

{% code title="db-test.tsx" lineNumbers="true" %}

```typescript
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
  return (
    <div className="h-screen flex items-center justify-center">
      <Button className="text-xl w-60 h-14">
        Add Product
      </Button>
      <Button className="text-xl w-60 h-14">
        Get Product
      </Button>
      <Button className="text-xl w-60 h-14">
        Update Product
      </Button>
      <Button className="text-xl w-60 h-14">
        Delete Product
      </Button>
    </div>
  )
}
```

{% endcode %}

</details>

<figure><img src="/files/WqBbQWyf7JGCocmQcHis" alt=""><figcaption><p>Tailwind styled output</p></figcaption></figure>

## Create

### Backend Configuration

1. Create a backend file named `add` within the `main-features` folder.
2. Import the `data` function from `magicjs.dev/backend`.
3. Use `data()` to connect to MongoDB and specify the collection name as '`products`'.
4. Utilize MongoDB's functions to add products, such as `insertOne()`.

> Refer the snippet below.

{% code title="add.server.tsx" %}

```tsx
import { createBackendFunction, data } from "@magicjs.dev/backend"

export default createBackendFunction(async function (name: string) {

    await data('products').insertOne({
        name
    })

    return "Message from server"
})
```

{% endcode %}

### Frontend Configuration

1. Import `addServer` into the frontend component.
2. Call `addServer` in the onClick event of the Add Product button to trigger an alert indicating successful addition.

> Refer the snippet below.

{% code title="db-test.tsx" %}

```tsx
import React from "react"
import { Button } from "antd"
import addServer from "./add.server"

export default function Component(props: any) {
    return (
        <div>
            <Button onClick={() => addServer('Rubiks Cube').then(() => alert('Added'))}>
                Add Product
            </Button>
            <Button>Get Product</Button>
            <Button>Update Product</Button>
            <Button>Delete Product</Button>
        </div>
    )
}
```

{% endcode %}

<figure><img src="/files/iK02olPvo6xLFJajMxgB" alt=""><figcaption><p>Create</p></figcaption></figure>

## Read

### Backend Configuration

1. Create a backend file named `list`.
2. Import `data` and fetch all products using `find().toArray()`.
3. Return the list of products.

> Refer the snippet below.

{% code title="list.server.tsx" %}

```tsx
import { createBackendFunction, data } from "@magicjs.dev/backend"

export default createBackendFunction(async function () {

  const allProducts = await data('products').find().toArray()

  return allProducts
})
```

{% endcode %}

### Frontend Configuration

1. Import `listServer` into the frontend component.
2. Call `listServer` in the onClick event of the Get Product button, displaying an alert with a comma-separated list of product names upon clicking.

> Refer the snippet below.

```tsx
<Button
    onClick={() => listServer()
        .then((allProducts) => alert(allProducts.map((p) => p.name)
            .join(', ')))}>
    Get Product
</Button>
```

<figure><img src="/files/tkaluhhaWQdGqjzrGeQU" alt=""><figcaption><p>Read</p></figcaption></figure>

## Update

### Backend Configuration

1. Create a backend file named `update`.
2. Import `data` and utilize `updateOne()` to modify product details.
3. Pass both the old and new names of the product to be updated.

> Refer the snippet below.

{% code title="udpate.server.tsx" %}

```tsx
import { createBackendFunction, data } from "@magicjs.dev/backend"

export default createBackendFunction(async function (name: string, newName: string,) {
    data("products").updateOne({ name },
        {
            $set: {
                name: newName,
            },
        },
    )

    return "Message from server"
})
```

{% endcode %}

### Frontend

1. Import `updateServer` into the frontend component.
2. Call `updateServer` in the onClick event of the Update Product button, triggering an alert upon successful update.

> Refer the snippet below.

```tsx
<Button
    onClick={() => updateServer('Rubiks Cube', 'Water Bottle')
        .then(() => alert("Updated"))}>
    Update Product
</Button>
```

<figure><img src="/files/9tHivI7yyTJFqxg8jjPQ" alt=""><figcaption><p>Update</p></figcaption></figure>

## Delete

### Backend Configuration

1. Create a backend file named `delete`.
2. Import `data` and use `deleteOne()` to remove a product based on specified criteria.

> Refer the snippet below.

```tsx
import { createBackendFunction, data } from "@magicjs.dev/backend"

export default createBackendFunction(async function (name: string) {
    await data('products').deleteOne({ name })

    return "Message from server"
})
```

### Frontend Configuration

1. Import `deleteServer` into the frontend component.
2. Call `updateServer` in the onClick event of the Delete Product button, triggering an alert upon successful deletion.

> Refer the snippet below.

```tsx
<Button
    onClick={() => deleteServer('Water Bottle')
        .then(() => alert('Deleted'))}>
    Delete Product
</Button>
```

<figure><img src="/files/8wX4oWwRScoNGFuvCkxB" alt=""><figcaption><p>Delete</p></figcaption></figure>

## Access MongoDB database

1. Click the **Connect to Database** button in the bottom section.
2. Click the **Launch MongoDB Express** button.
3. Login with the provided credentials.

<figure><img src="/files/v85ptJ58nZA1MxQuMVmb" alt=""><figcaption><p>Connect to MongoDB</p></figcaption></figure>

<figure><img src="/files/h8tVdFehFegAOndTA0HJ" alt=""><figcaption><p>MongoDB Express - Web</p></figcaption></figure>

> Once logged in, you will be able to view and interact with the database.

:tada: Congratulations! You have successfully implemented CRUD operations using MagicJS, enabling seamless interaction with a backend database.

By mastering these techniques, you can create dynamic and responsive applications with robust data management capabilities. Experiment with different functionalities to enhance your web development projects further.