> 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/create-an-api-and-integrate-it-with-the-frontend.md).

# Create an API and integrate it with the frontend

{% hint style="success" %}
The tool used in this guide is [MERN.AI](https://mern.ai/). You can download their free version by clicking [here](https://mern.ai/download).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=LfvdHghypY0>" %}
Create and Integrate API
{% endembed %}

## Creating Frontend and Backend Files

Let's start by creating a frontend file in the 'main-features' folder.

1. Add a new file by right clicking on 'main-features' folder.
2. Select 'Blank UI/React Component' and create a file named '`test-ui`'
3. Give the path as '`/test-ui`' in the properties tab.
4. Create a backend file using the 'Blank Backend Function' option and name the backend file as '`test`'.

> Note that the 'server.tsx' extension will be automatically appended to the file by [mern.ai](https://mern.ai/).

{% hint style="warning" %}
It's important to append the 'server.tsx' extension manually for all backend functions when using other IDEs like VS Code.
{% endhint %}

> In the backend file, you'll find a boilerplate for creating a backend function as given below:

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

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

export default createBackendFunction(async function () {
    const ctx = useFunctionContext(this)

    return "Message from server"
})
```

{% endcode %}

* This code defines a backend function using the `@magicjs.dev/backend` library, which, when invoked, will return the message "Message from server".

## Calling Backend Function from Frontend

Let's trigger the backend function on a button click.

> Refer the below code and update the `test-ui.tsx` file

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

```tsx
import { Button } from "antd"
import React from "react"
import testServer from "./test.server"

export default function Component(props: any) {
    const [msg, setMsg] = React.useState("")

    return (
        <div>
            <h1>Backend Test</h1>
            <h1>{`Response from backend: ${msg}`}</h1>
            <Button onClick={() => testServer().then((msg) => setMsg(msg))}>
                Call Backend function
            </Button>
        </div>
    )
}
```

{% endcode %}

<details>

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

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

```tsx
import React from "react";
import testServer from "./test.server";

export default function Component(props: any) {
    const [msg, setMsg] = React.useState("")

    return (
        <div className='flex flex-col justify-center items-center min-h-screen'>
            <div className="container">
                <h1 className="text-[72px] text-[#505050] font-medium mb-[56px]">Backend Test</h1>
                <h1 className="text-[56px] text-[#000000] mb-8">
                    Response from backend: <span className="text-[#147E1D]">{msg}</span>
                </h1>
                <button
                    onClick={() => testServer().then((msg) => setMsg(msg))}
                    className='text-[25px] text-[#151515] border border-[#BFBFBF] rounded-[10px] px-[62px] py-[15px] hover:opacity-70 active:scale-95'
                >
                    Call Backend function
                </button>
            </div>
        </div>
    )
}
```

{% endcode %}

</details>

* In the above code, the button triggers a request to the backend server, and upon receiving a response, it displays the response message on the UI.

After saving the changes, test the functionality by clicking the button. You should see the message from the backend displayed on the frontend.

<figure><img src="/files/Yqa0rIaoZrSLOtTzc8OW" alt=""><figcaption><p>Tailwind Styled Output</p></figcaption></figure>

> Our backend relies on Express.js for development.

:tada: Congratulations! You've learned how to create a backend function and seamlessly integrate it into the frontend using MagicJS framework.

***

## **Tired of Doing It All Yourself?**

> *Get help from the experts behind MERN.AI IDE.*

Our Professional Services team specializes in turning your ideas into fully functional applications. Focus on what you do the best and let us handle the development.

[Click to Learn More!](https://blog.mern.ai/professional-services)