As someone who actively builds applications within the JavaScript / Node.js ecosystem leveraging frameworks like Next.js, Vue, Express.js, etc., hot reloading is usually built into the framework or needs to install a package to get it up and running.

While exploring the Go ecosystem, hot reloading seems like an afterthought in most of their popular frameworks. In fact, it became a source of concern for me and led me down the rabbit hole of finding possible solutions on how to include hot reloading in my Go applications.

This guide will explore what hot reloading is and why it is needed. It will also explore two libraries to help build hot reloading into your applications.

# What is hot reloading?

Hot reloading is a technique used during application development, allowing you to observe updated changes to the source code in real-time without reloading the entire application. It preserves the application state, enabling you to continue working without losing the current state of the application. It allows you to view changes instantly, accelerating the development process and enhancing productivity.

# What are the benefits of hot reloading?

The following are the benefits of enabling hot reloading in your applications:

-   Enhanced user experience
-   Fast development
-   Minimal context switching
-   Improved feedback loop

1. **Enhanced user experience**: The ability to make changes to the codebase and see them in real-time improves the development process. With this capability, developers can rapidly prototype and design better applications.
2. **Fast development**: With hot reloading, developers don't have to manually reload the application to see the latest changes. Development time is fast because changes are reflected immediately.
3. **Minimal context switching**: A major source of distraction for developers is having to go back to the terminal to rebuild and run the application every time changes are made. However, with hot reloading, they can focus on the task without any interruptions or worries about their changes being reflected as updates occur in real-time.
4. **Improved feedback loop**: Because changes are visible in real-time, developers receive immediate feedback and can easily fix bugs, identify where the application is broken, and consequently improve the development workflow.

# How to implement hot reloading in a Go application

This section will explore two libraries that make hot reloading possible in a Go application:

-   Modd
-   Air

Before we explore how to use these libraries, let’s set up a sample Go project using the Gin-gonic framework.

Create a directory.

```bash
mkdir sample_go && cd sample_go
```

Next, initialize a Go module to manage project dependencies.

```bash
go mod init sample_go
```

Install the required dependency.

```bash
go get github.com/gin-gonic/gin
```

Create a sample application.

```go
package main

import "github.com/gin-gonic/gin"

func main() {
    r := gin.Default()
    r.GET("/", func(c *gin.Context) {
        c.JSON(200, gin.H{
            "message": "Hello world!",
        })
    })

    r.Run()
}
```

## Modd for hot reloading

[Modd](https://github.com/cortesi/modd) is a library that makes hot reloading possible in Go applications. To use it, install it on your machine using the command below:

    go install github.com/cortesi/modd/cmd/modd@latest

In your project directory, create a `modd.conf` file and add the snippet below:

```bash
**/*.go {
    prep: go test @dirmods
}
```

The command above tells **Modd** to watch for changes to any `.go` file and run the changes on `test` directories.

To enable hot reloading, run the command below in your terminal:

```bash
modd
```

> In case you get an error about `go: errors parsing go.mod: /project/path/  invalid go version '1.XX.X': must match format 1.23`. Remove the Go semantic version stated inside the `go.mod` file. For example change `go 1.22.1` to `go 1.22`

## Air for hot reloading

[Air](https://github.com/cosmtrek/air) is another library that enables hot reloading in Go applications. To use it, install it on your machine using the command below:

```
go install github.com/cosmtrek/air@latest
```

Next, initialize **Air** by running the command below:

```
air init
```

The command above will create a `.air.toml` file with default configurations to get your application up and running.

Finally, to enable hot reloading, run the command below:

```
air
```

# Conclusion

Both libraries enable hot reloading and offer extensive configuration and flexibility regarding which files and folders should be excluded or ignored, pattern matching, environment setup, and much more. To learn more, you can check out their official documentation.

Useful resources:

-   [Modd documentation](https://github.com/cortesi/modd)
-   [Air documentation](https://github.com/cosmtrek/air)


This guide will explore what hot reloading is and why it is needed. It will also explore two libraries to help build hot reloading into your applications.

How to implement hot reloading in a Go application

Go is a statically typed, compiled high-level programming language for building systems, command-line interfaces (CLI), and more. It is typically designed for use on the backend; however, there are times when you want to use the same language to build a full-stack application with a functional backend and a visual frontend.

In most cases, Go developers opt for frontend frameworks/libraries like React, Vue, Angular, etc., to build the frontend part of the application. This means they must learn JavaScript/TypeScript, framework-specific paradigms, and other frontend-related overheads.

In this guide, you’ll learn how to build a fullstack application with Go using Templ, HTMX, and Xata.

# Technology Overview

**Templ**: is a templating engine that lets you build HTML with Go. It also lets you use Go syntax like `if`, `switch`, and `for` statements to build a robust frontend. You will use Templ to build reusable components and pages for the frontend.

**HTMX**: is a frontend library that lets you access modern browser features directly using HTML rather than JavaScript. You will use HTMX to process the form submission and perform other dynamic operations.

**Xata**: is a serverless database with analytics and free-text search support that makes a wide range of applications easy to build.

# Prerequisites

To follow along with this tutorial, the following are needed:

-   [Go version 1.20 or higher installed](https://go.dev/dl/)
-   Basic understanding of Go
-   Xata account. [Signup is free](https://app.xata.io/signin?mode=signup?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)

# Getting started

To get started, you need to install Templ binary. The binary generates Go code from a Templ file.

```bash
go install github.com/a-h/templ/cmd/templ@latest
```

Create a directory.

```bash
mkdir go_fullstack && cd go_fullstack
```

Next, initialize a Go module to manage project dependencies.

```bash
go mod init go-fullstack
```

Finally, we proceed to install the required dependencies with:

```bash
go get github.com/gin-gonic/gin github.com/a-h/templ github.com/joho/godotenv
```

`github.com/gin-gonic/gin` is a framework for building web applications.

`github.com/a-h/templ` is the Templ library used in the project.

`github.com/joho/godotenv` is a library for loading environment variables.

## Structuring the application

To do this, create a `cmd`, `internals`, and `views` folder in our project directory.

`cmd` is for structuring the application entry point.

`internals` is for structuring API-related files.

`views` is for structuring frontend-related files.

# Setup the database on Xata

Log into the [Xata workspace](https://app.xata.io/workspaces) and create a `todo` database. Inside the `todo` database, create a `Todo` table and add a `description` column of type `String`.

![create project](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703592508608_Screenshot+2023-12-26+at+13.07.33.png)

## Get the Database URL and set up the API Key

To get the database URL, click the **Get code snippet** button and copy the URL. Then click the **API Key** link, add a new key, save and copy the API key.

![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596013324_Screenshot+2023-12-26+at+14.04.29.png)
![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596030165_Screenshot+2023-12-21+at+23.42.03.png)

**Setup environment variable**

Create a `.env` file in the root directory and add the copied URL and API key.

```bash
XATA_DATABASE_URL= <REPLACE WITH THE COPIED DATABASE URL>
XATA_API_KEY=<REPLACE WITH THE COPIED API KEY>
```

# Build the application Frontend

To build the frontend, you’ll use Templ and HTMX to structure the application and add dynamism to a Todo application.

## Create the application components

Inside the `views` folder, create a `components/header.templ` file and add the snippet below:

```go
package components

templ Header() {
    <head>
        <script
            src="https://unpkg.com/htmx.org@1.9.10"
            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
            crossorigin="anonymous"
        ></script>
        <script src="https://cdn.tailwindcss.com"></script>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>GO Fullstack</title>
    </head>
}
```

The snippet creates a `Header` component and adds HTMX and TailwindCSS CDNs. TailwindCSS is a low-level framework for styling.

Next, create a `components/footer.templ` file to create the application footer and style using TailwindCSS classes.

```go
package components

templ Footer() {
    <footer class="fixed p-1 bottom-0 bg-gray-100 w-full border-t">
    <div class="rounded-lg p-4 text-xs italic text-gray-700 text-center">
        &copy; Go Fullstack
    </div>
    </footer>
}
```

Finally, create an `index.templ` file inside the same `views` folder and add the snippet below:

```go
package views

import (
    "fmt"
    "go_fullstack/views/components"
)

type Todo struct {
    Id          string
    Description string
}

templ Index(todos []*Todo) {
    <!DOCTYPE html>
    <html lang="en">
        @components.Header()
        <body>
            <main class="min-h-screen w-full">
                <nav class="flex w-full border border-b-zinc-200 px-4 py-4">
                    <h3 class="text-base lg:text-lg font-medium text-center">
                        GO Fullstack app
                    </h3>
                </nav>
                <div class="mt-6 w-full flex justify-center items-center flex-col">
                    // FORM PROCESSING
                    <form
                        hx-post="/"
                        hx-trigger="submit"
                        hx-swap="none"
                        onsubmit="reloadPage()"
                        class="w-96"
                    >
                        <textarea
                            name="description"
                            cols="30"
                            rows="2"
                            class="w-full border rounded-lg mb-2 p-4"
                            placeholder="Input todo details"
                            required
                        ></textarea>
                        <button
                            class="py-1 px-4 w-full h-10 rounded-lg text-white bg-zinc-800"
                        >
                            Create
                        </button>
                    </form>
                    <section class="border-t border-t-zinc-200 mt-6 px-2 py-4 w-96">
                        // LOOP THROUGH THE TODOS
                        <ul id="todo-list">
                            for _, todo := range todos {
                                <li class="ml-4 ml-4 border p-2 rounded-lg mb-2" id={ fmt.Sprintf("%s", todo.Id) }>
                                    <p class="font-medium text-sm">Todo item { todo.Id }</p>
                                    <p class="text-sm text-zinc-500 mb-2">
                                        { todo.Description }
                                    </p>
                                    <div class="flex gap-4 items-center mt-2">
                                        <a
                                            href="#"
                                            class="flex items-center border py-1 px-2 rounded-lg"
                                        >
                                            <p class="text-sm">Edit</p>
                                        </a>
                                        <button
                                            hx-delete={ fmt.Sprintf("/%s", todo.Id) }
                                            hx-swap="delete"
                                            hx-target={ fmt.Sprintf("#%s", todo.Id) }
                                            class="flex items-center border py-1 px-2 rounded-lg hover:bg-red-300"
                                        >
                                            <p class="text-sm">Delete</p>
                                        </button>
                                    </div>
                                </li>
                            }
                        </ul>
                    </section>
                </div>
            </main>
        </body>
        @components.Footer()
    </html>
    <script>
        function reloadPage() {
                setTimeout(function() {
            window.location.reload();
        }, 2000);
        }
    </script>
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Creates a `Todo` struct to represent the response data coming from the backend
-   Creates an `Index` component that uses the `Header` and `Footer` components to structure the page. Then, it uses the HTMX attributes to process form submissions and deletion of todos by calling the respective endpoints `/` and `/{todo.Id}`

## Generating Go files from the Templ files

Next, use the Templ binary you installed earlier to Generate Go codes from the views created above by running the command below in your terminal:

```bash
templ generate
```

After you run this command, you’ll see new Go files generated for each view. You use generated file to render your frontend in next section.

![Generated files](https://paper-attachments.dropboxusercontent.com/s_F11F11938F7C8DFA1B769A23ABB6104DEEFCB6B159F515F54CB1BDB5F18F2959_1713349771513_Screenshot+2024-04-17+at+11.28.49.png)

> The generated files are not to be edited.

# Putting it together and building the backend

With that done, you can use it to build the backend and render the required page.

## Create the API models and helper function

To represent the application data, create a `model.go` file inside the `internals` folder and add the snippet below:

```go
package internals

type Todo struct {
    Id          string `json:"id,omitempty"`
    Description string `json:"description,omitempty"`
}

type TodoRequest struct {
    Description string `json:"description,omitempty"`
}

type TodoResponse struct {
    Id string `json:"id,omitempty"`
}
```

The snippet above creates a `Todo`, `TodoRequest`, and `TodoResponse` struct with the required properties to describe requests and response types.

Finally, create a `helpers.go` file with a reusable function to load environment variables.

```go
package internals

import (
    "log"
    "os"
    "github.com/joho/godotenv"
)

func GetEnvVariable(key string) string {
    err := godotenv.Load()
    if err != nil {
        log.Fatal("Error loading .env file")
    }
    return os.Getenv(key)
}
```

## Create the application and API routes

Create a `route.go` file for configuring the API routes and add the snippet below:

```go
package api

import "github.com/gin-gonic/gin"

type Config struct {
    Router *gin.Engine
}

func (app *Config) Routes() {
    //routes will come here
}
```

The snippet above does the following:

-   Imports the required dependency
-   Creates a `Config` struct with a `Router` property to configure the application methods
-   Creates a `Routes` function that takes in the `Config` struct as a pointer

## Create the API services

With that done, create a `xata_service.go` file for the application and update it by doing the following:

First, import the required dependencies and create a helper function:

```go
package internals

import (
    "bytes"
    "encoding/json"
    "fmt"
    "net/http"
)

var xataAPIKey = GetEnvVariable("XATA_API_KEY")
var baseURL = GetEnvVariable("XATA_DATABASE_URL")

func createRequest(method, url string, bodyData *bytes.Buffer) (*http.Request, error) {
    var req *http.Request
    var err error'

    if method == "GET" || method == "DELETE" || bodyData == nil {
        req, err = http.NewRequest(method, url, nil)
    } else {
        req, err = http.NewRequest(method, url, bodyData)
    }

    if err != nil {
        return nil, err
    }

    req.Header.Add("Content-Type", "application/json")
    req.Header.Add("Authorization", fmt.Sprintf("Bearer %s", xataAPIKey))

    return req, nil
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Creates required environment variables
-   Creates a `createRequest` function that creates HTTP requests with the required headers

Lastly, add a `createTodoService`, `deleteTodoService`, and `getAllTodosService` methods to create, delete, and get the list of todos.

```go
//imports goes here

func createRequest(method, url string, bodyData *bytes.Buffer) (*http.Request, error) {
    //createRequest code goes here
}

func (app *Config) createTodoService(newTodo *TodoRequest) (*TodoResponse, error) {
    createTodo := TodoResponse{}
    jsonData := Todo{
        Description: newTodo.Description,
    }

    bodyData := new(bytes.Buffer)
    json.NewEncoder(bodyData).Encode(jsonData)

    fullURL := fmt.Sprintf("%s:main/tables/Todo/data", baseURL)
    req, err := createRequest("POST", fullURL, bodyData)
    if err != nil {
        return nil, err
    }

    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        return nil, err
    }

    defer resp.Body.Close()
    if err := json.NewDecoder(resp.Body).Decode(&createTodo); err != nil {
        return nil, err
    }

    return &createTodo, nil
}
func (app *Config) deleteTodoService(id string) (string, error) {
    fullURL := fmt.Sprintf("%s:main/tables/Todo/data/%s", baseURL, id)
    client := &http.Client{}
    req, err := createRequest("DELETE", fullURL, nil)
    if err != nil {
        return "", err
    }

    resp, err := client.Do(req)
    if err != nil {
        return "", err
    }
    defer resp.Body.Close()

    return id, nil
}

func (app *Config) getAllTodosService() ([]*Todo, error) {
    var todos []*Todo

    fullURL := fmt.Sprintf("%s:main/tables/Todo/query", baseURL)
    client := &http.Client{}
    req, err := createRequest("POST", fullURL, nil)
    if err != nil {
        return nil, err
    }

    resp, err := client.Do(req)
    if err != nil {
        return nil, err
    }

    defer resp.Body.Close()
    var response struct {
        Records []*Todo `json:"records"`
    }

    decoder := json.NewDecoder(resp.Body)
    if err := decoder.Decode(&response); err != nil {
        return nil, err
    }

    todos = response.Records
    return todos, nil
}
```

## Create the API handlers

With that done, you can use the services to create the API handlers. Create a `handler.go` file inside `internals` folder and add the snippet below:

```go
package internals

import (
    "context"
    "fmt"
    "go_fullstack/views"
    "net/http"
    "time"
    "github.com/a-h/templ"
    "github.com/gin-gonic/gin"
)

const appTimeout = time.Second * 10

func render(ctx *gin.Context, status int, template templ.Component) error {
    ctx.Status(status)
    return template.Render(ctx.Request.Context(), ctx.Writer)
}

func (app *Config) indexPageHandler() gin.HandlerFunc {
    return func(ctx *gin.Context) {
        _, cancel := context.WithTimeout(context.Background(), appTimeout)
        defer cancel()

        todos, err := app.getAllTodosService()
        if err != nil {
            ctx.JSON(http.StatusBadRequest, err.Error())
            return
        }

        var viewsTodos []*views.Todo
        for _, todo := range todos {
            viewsTodo := &views.Todo{
                Id:          todo.Id,
                Description: todo.Description,
            }
            viewsTodos = append(viewsTodos, viewsTodo)
        }

        render(ctx, http.StatusOK, views.Index(viewsTodos))
    }
}

func (app *Config) createTodoHandler() gin.HandlerFunc {
    return func(ctx *gin.Context) {
        _, cancel := context.WithTimeout(context.Background(), appTimeout)
        description := ctx.PostForm("description")
        defer cancel()

        newTodo := TodoRequest{
            Description: description,
        }

        data, err := app.createTodoService(&newTodo)
        if err != nil {
            ctx.JSON(http.StatusBadRequest, err.Error())
            return
        }

        ctx.JSON(http.StatusCreated, data)
    }
}

func (app *Config) deleteTodoHandler() gin.HandlerFunc {
    return func(ctx *gin.Context) {
        _, cancel := context.WithTimeout(context.Background(), appTimeout)
        id := ctx.Param("id")
        defer cancel()

        data, err := app.deleteTodoService(id)
        if err != nil {
            ctx.JSON(http.StatusBadRequest, err.Error())
            return
        }

        ctx.JSON(http.StatusAccepted, fmt.Sprintf("Todo with ID: %s deleted successfully!!", data))
    }
}
```

The snippet above does the following

-   Imports the required dependencies
-   Creates a `render` function that uses the `Templ` package to render matching template
-   Creates an `indexPageHandler` function that returns a Gin-gonic handler and takes in the `Config` struct as a pointer. Inside the returned handler, use the `getAllTodosService` service to get the list of todos and then render the appropriate page using the generated code from the views package (frontend)
-   Creates a `createdTodoHandler` and `deleteProjectHandler` functions that return a Gin-gonic handler and take in the `Config` struct as a pointer. Use the service created earlier to perform the corresponding action inside the returned handler

## Update the API routes to use handlers

Update the `routes.go` file with the handlers as shown below:

```go
package internals

import (
    "github.com/gin-gonic/gin"
)

type Config struct {
    Router *gin.Engine
}

func (app *Config) Routes() {
    //views
    app.Router.GET("/", app.indexPageHandler())

    //apis
    app.Router.POST("/", app.createTodoHandler())
    app.Router.DELETE("/:id", app.deleteTodoHandler())
}
```

## Putting it all together

Create the application entry point to use to serve the routes. To do this, create a `main.go` file inside the `cmd` folder and add the snippet below:

```go
package main

import (
    "go_fullstack/internals"
    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()

    //initialize config
    app := internals.Config{Router: router}

    //routes
    app.Routes()

    router.Run(":8080")
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Creates a Gin router using the `Default` configuration
-   Initialize the `Config` struct by passing in the `Router`
-   Adds the route and run the application on port `:8080`

With that done, you can start a development server using the command below:

    go run cmd/main.go

![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdmh4OGFocG9qMndmbXpsbW1hY2Q3dXRhYjA5OG9wdXppc3d3MjRrdCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gPVi98WZGeVZuCgBG9/giphy.gif)

The complete source code can be found on [GitHub](https://github.com/Mr-Malomz/go_fullstack).

# Conclusion

This post discusses how to build a fullstack application with Go, Templ, HTMX, and Xata. You can extend the application further to support viewing and editing todos.

These resources may also be helpful:

-   [Xata documentation](https://xata.io/docs?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [Templ documentation](https://templ.guide/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [HTMX documentation](https://htmx.org/docs/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [Go + Xata](https://fullstackwriter.dev/post/xata-go-a-getting-started-guide?category=Golang)


In this guide, you’ll learn how to build a fullstack application with Go using Templ, HTMX, and Xata.

How to build a fullstack application with Go, Templ, and HTMX

This post discusses what Xata is and provides a detailed step-by-step guide to using it to build a basic project management application with Flutter

Xata + Flutter: A getting started guide.

This post discusses what Xata is and provides a detailed step-by-step guide to using it to build a project management API in Go.

Xata + Go: A getting started guide.

[Xata](https://xata.io/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) is a serverless data platform for building modern and robust applications. Built on top of PostgreSQL, Xata provides a unified REST API for efficient data management. Setting itself apart from other data platforms, Xata introduces unique functionalities that significantly streamline the developer workflow. Here are some key benefits of integrating Xata into any application:

-   **Robust file management**: Xata provides APIs and SDKs to manage and securely upload images, documents, and more, directly to a database record.
-   **Multiple environments support and workflow**: With Xata, creating isolated production environments for testing, staging, or feature releases is seamless.
-   **Fast search support**: Xata automatically indexes uploaded data, facilitating fast and efficient data searches across tables and branches.
-   **AI support**: Xata offers vector embedding and AI solutions that empower the development of intelligent applications.

To experience the capabilities of Xata, we will build a project management API in Rust. This API will offer features for creating, reading, updating, and deleting (CRUD) projects. The project repository can be found [here](https://github.com/Mr-Malomz/rust-xata).

## Prerequisites

To follow along with this tutorial, the following are needed:

-   Basic understanding of Rust
-   Xata account. Signup is [free](https://app.xata.io/signin?mode=signup?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [Postman](https://www.postman.com/downloads/) or any API testing application of your choice

## Getting started

To get started, we need to navigate to the desired directory and run the command below:

    cargo new rust-xata && cd rust-xata

This command creates a Rust project called `rust-xata` and navigates into the project directory.

Next, we install the required dependencies by modifying the `[dependencies]` section of the `Cargo.toml` file as shown below:

```toml
[dependencies]
actix-web = "4.4.1"
serde = { version = "1.0.195", features = ["derive"] }
serde_json = "1.0.111"
dotenv = "0.15.0"
reqwest = { version = "0.11.23", features = ["json"] }
```

`actix-web = "4.4.1"` is a Rust-based framework for building web applications.

`serde = { version = "1.0.145", features = ["derive"] }` for serializing and deserializing Rust data structures.

`serde_json = "1.0"` for manipulating JSON and vice versa.

`reqwest = { version = "0.11", features = ["json"] }` for making HTTP requests.

We need to run the command below to install the dependencies:

```bash
cargo build
```

**Structuring the application**

It is essential to have a good project structure as it makes the codebase maintainable and seamless for anyone to read or manage.

To do this, we need to navigate to the `src` directory and, in this folder, create an `api` folder. In the `api` folder, we also need to create a `mod.rs`, `models.rs`, `services.rs`, and `handlers.rs` files.

`mod.rs` is a file for managing application visibility.

`models.rs` is for structuring our application data.

`xata_services.rs` is for abstracting our application logic.

`handlers.rs` is for structuring our APIs.

Next, we need to declare these files as a module by importing them into the `mod.rs` file

```rust
pub mod handlers;
pub mod models;
pub mod services;
```

Finally, we need to register `api` folder as a parent module by importing it into the `main.rs` file as shown below:

```rust
mod api; //add

fn main() {
    println!("Hello world")
}
```

## Setup the database on Xata

To get started, log into the [Xata workspace](https://app.xata.io/workspaces) and create a `project` database. Inside the `project` database, create a `Project` table and add columns as shown below:

| **Column type** | **Column name** |
| --------------- | --------------- |
| String          | name            |
| Text            | description     |
| String          | status          |

![Create database](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706440285877_Screenshot+2024-01-28+at+12.11.03.png)
![Add table](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706442245485_Screenshot+2024-01-20+at+22.09.07.png)
![Add field](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706442310277_Screenshot+2024-01-20+at+22.35.14.png)

Inside a table, Xata automatically adds an `id`, `xata.createdAt`, `xata.updatedAt`, and `xata.version` columns that we can also leverage to perform advanced data operations.

![Created column](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706441400678_Screenshot+2024-01-28+at+12.19.01.png)

**Get the Database URL and set up the API Key**

To securely connect to the database, Xata provides a unique and secure URL for accessing it. To get the database URL, click the **Get code snippet** button and copy the URL. Then click the **API Key** link, add a new key, save and copy the API key.

![click the Get code snippet button](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706442511712_Screenshot+2024-01-20+at+22.40.52.png)
![copy URL](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706442537662_Screenshot+2024-01-20+at+22.42.04.png)
![create API key](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596030165_Screenshot+2023-12-21+at+23.42.03.png)

**Setup environment variable**

Next, we must add our database URL and API key as an environment variable. To do this, create `.env` file in the root directory and add the copied URL and API key.

```bash
XATA_DATABASE_URL= <REPLACE WITH THE COPIED DATABASE URL>
XATA_API_KEY=<REPLACE WITH THE COPIED API KEY>
```

## Building the project management API with Rust and Xata

We can start building our API with our database fully set up on Xata and a secure URL created to access it.

**Create the API models**

To represent the application data, we need to update the `models.rs` file as shown below:

```rust
use serde::{Deserialize, Serialize};

#[derive(Deserialize, Serialize, Debug, Clone)]
pub struct Project {
    pub id: String,
    pub name: String,
    pub description: String,
    pub status: String,
}

#[derive(Deserialize, Serialize, Debug, Clone)]
pub struct ProjectRequest {
    pub name: String,
    pub description: String,
    pub status: String,
}

#[derive(Deserialize, Serialize, Debug, Clone)]
pub struct ProjectResponse {
    pub id: String,
}

#[derive(Serialize, Debug, Clone)]
pub struct APIResponse<T> {
    pub status: u16,
    pub message: String,
    pub data: Option<T>,
}

#[derive(Serialize, Debug, Clone)]
pub struct APIErrorResponse {
    pub status: u16,
    pub message: String,
    pub data: Option<String>,
}
```

The snippet above does the following:

-   Imports the required dependency
-   Creates a `Project`, `ProjectRequest`, and `ProjectResponse` structs with required properties to describe request and response body accordingly
-   Creates an `APIResponse`, and `APIErrorResponse` structs with the required properties needed for the API response

**Create the API services**

With our application models fully set up, we can now use them to create our application logic. To do this, we need to update the `xata_service.rs` file by doing the following:

First, we need to import the required dependencies and create helper functions:

```rust
use std::env;
use dotenv::dotenv;
use reqwest::{header, Client, Error, RequestBuilder};
use super::model::{Project, ProjectRequest, ProjectResponse};

pub struct XataService;

impl XataService {
    fn env_loader(key: &str) -> String {
        dotenv().ok();
        match env::var(key) {
            Ok(v) => v.to_string(),
            Err(_) => format!("Error loading env variable"),
        }
    }

    fn init() -> Client {
        Client::new()
    }

    fn create_headers() -> header::HeaderMap {
        let mut headers = header::HeaderMap::new();
        headers.insert("Content-Type", "application/json".parse().unwrap());
        headers.insert(
            header::AUTHORIZATION,
            format!("Bearer {}", XataService::env_loader("XATA_API_KEY"))
                .parse()
                .unwrap(),
        );
        headers
    }

    async fn send_request(builder: RequestBuilder) -> Result<reqwest::Response, reqwest::Error> {
        builder.send().await
    }

    async fn handle_response<T>(response: reqwest::Response) -> Result<T, reqwest::Error>
    where
        T: serde::de::DeserializeOwned,
    {
        let json = response.text().await?;
        Ok(serde_json::from_str(json.as_str()).unwrap())
    }
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Creates an `XataService` struct
-   Creates an implementation block that adds `env_loader`, `init`, `create_headers`, `send_request`, and `handle_response` helper methods. These methods are designed to load environment variables, create a connection pool for making asynchronous requests, generate request headers, handle the sending of requests, and manage the deserialization of JSON responses.

Lastly, we need to add methods that use the helper methods to perform CRUD operations.

```rust
//imports goes here

pub struct XataService;

impl XataService {
    //helper methodes goes here

    pub async fn create_project(new_project: ProjectRequest) -> Result<ProjectResponse, Error> {
        let url = format!(
            "{}:main/tables/Project/data",
            XataService::env_loader("XATA_DATABASE_URL")
        );

        let client = XataService::init()
            .post(url)
            .headers(XataService::create_headers())
            .json(&new_project);

        let response = XataService::send_request(client).await?;
        XataService::handle_response(response).await
    }

    pub async fn get_project(project_id: String) -> Result<Project, Error> {
        let url = format!(
            "{}:main/tables/Project/data/{}",
            XataService::env_loader("XATA_DATABASE_URL"),
            project_id
        );

        let client = XataService::init()
            .get(url)
            .headers(XataService::create_headers());

        let response = XataService::send_request(client).await?;
        XataService::handle_response(response).await
    }

    pub async fn update_project(
        updated_project: ProjectRequest,
        project_id: String,
    ) -> Result<ProjectResponse, Error> {
        let url = format!(
            "{}:main/tables/Project/data/{}",
            XataService::env_loader("XATA_DATABASE_URL"),
            project_id
        );

        let client = XataService::init()
            .put(url)
            .headers(XataService::create_headers())
            .json(&updated_project);

        let response = XataService::send_request(client).await?;
        XataService::handle_response(response).await
    }

    pub async fn delete_project(project_id: String) -> Result<String, Error> {
        let url = format!(
            "{}:main/tables/Project/data/{}",
            XataService::env_loader("XATA_DATABASE_URL"),
            project_id
        );

        let client = XataService::init()
            .delete(url)
            .headers(XataService::create_headers());

        let _response = XataService::send_request(client).await?;
        Ok(format!(
            "Project with ID: {} deleted successfully!!",
            project_id
        ))
    }
}
```

The snippet above creates a `create_project`, `get_project`, `update_project`, and `delete_project` methods for performing CRUD operations.

**Create the API handlers**

With that done, we can use the services to create our API handlers. To do this, first, we need to add the snippet below to the `handlers.rs` file:

```rust
use actix_web::{
    delete, get, post, put,
    web::{Json, Path},
    HttpResponse,
};
use reqwest::StatusCode;
use super::{
    model::{APIErrorResponse, APIResponse, Project, ProjectRequest, ProjectResponse},
    xata_service::XataService,
};

#[post("/project")]
pub async fn create_project_handler(new_project: Json<ProjectRequest>) -> HttpResponse {
    let project_details = XataService::create_project(new_project.to_owned()).await;

    match project_details {
        Ok(data) => HttpResponse::Accepted().json(APIResponse::<ProjectResponse> {
            status: StatusCode::CREATED.as_u16(),
            message: "success".to_string(),
            data: Some(data),
        }),
        Err(error) => HttpResponse::InternalServerError().json(APIErrorResponse {
            status: StatusCode::INTERNAL_SERVER_ERROR.as_u16(),
            message: "failure".to_string(),
            data: Some(error.to_string()),
        }),
    }
}

#[get("/project/{id}")]
pub async fn get_project_handler(path: Path<String>) -> HttpResponse {
    let id = path.into_inner();
    if id.is_empty() {
        return HttpResponse::BadRequest().json(APIErrorResponse {
            status: StatusCode::BAD_REQUEST.as_u16(),
            message: "failure".to_string(),
            data: Some("invalid ID".to_string()),
        });
    };

    let project_details = XataService::get_project(id).await;

    match project_details {
        Ok(data) => HttpResponse::Accepted().json(APIResponse::<Project> {
            status: StatusCode::OK.as_u16(),
            message: "success".to_string(),
            data: Some(data),
        }),
        Err(error) => HttpResponse::InternalServerError().json(APIErrorResponse {
            status: StatusCode::INTERNAL_SERVER_ERROR.as_u16(),
            message: "failure".to_string(),
            data: Some(error.to_string()),
        }),
    }
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Creates a `create_project_handler` and `get_project_handler` handler with corresponding API routes that use the services to perform the corresponding actions and return the appropriate response using the `APIResponse` and `APIErrorResponse`

Lastly, we need to add `update_project_handler` and `delete_project_handler` handlers that use logic similar to the handlers above to update and delete a project.

```rust
//imports goes here

#[post("/project")]
pub async fn create_project_handler(new_project: Json<ProjectRequest>) -> HttpResponse {
    //create_project_handler code goes here
}

#[get("/project/{id}")]
pub async fn get_project_handler(path: Path<String>) -> HttpResponse {
    //get_project_handler code goes here
}

#[put("/project/{id}")]
pub async fn update_project_handler(
    updated_project: Json<ProjectRequest>,
    path: Path<String>,
) -> HttpResponse {
    let id = path.into_inner();
    if id.is_empty() {
        return HttpResponse::BadRequest().json(APIErrorResponse {
            status: StatusCode::BAD_REQUEST.as_u16(),
            message: "failure".to_string(),
            data: Some("invalid ID".to_string()),
        });
    };

    let project_details = XataService::update_project(updated_project.to_owned(), id).await;

    match project_details {
        Ok(data) => HttpResponse::Accepted().json(APIResponse::<ProjectResponse> {
            status: StatusCode::OK.as_u16(),
            message: "success".to_string(),
            data: Some(data),
        }),
        Err(error) => HttpResponse::InternalServerError().json(APIErrorResponse {
            status: StatusCode::INTERNAL_SERVER_ERROR.as_u16(),
            message: "failure".to_string(),
            data: Some(error.to_string()),
        }),
    }
}

#[delete("/project/{id}")]
pub async fn delete_project_handler(path: Path<String>) -> HttpResponse {
    let id = path.into_inner();
    if id.is_empty() {
        return HttpResponse::BadRequest().json(APIErrorResponse {
            status: StatusCode::BAD_REQUEST.as_u16(),
            message: "failure".to_string(),
            data: Some("invalid ID".to_string()),
        });
    };

    let project_details = XataService::delete_project(id).await;

    match project_details {
        Ok(data) => HttpResponse::Accepted().json(APIResponse::<String> {
            status: StatusCode::ACCEPTED.as_u16(),
            message: "success".to_string(),
            data: Some(data),
        }),
        Err(error) => HttpResponse::InternalServerError().json(APIErrorResponse {
            status: StatusCode::INTERNAL_SERVER_ERROR.as_u16(),
            message: "failure".to_string(),
            data: Some(error.to_string()),
        }),
    }
}
```

**Putting it all together**

With that done, we must update the `main.rs` file to include our application entry point and use the handlers.

```rust
use actix_web::{App, HttpServer};
use api::handler::{
    create_project_handler, delete_project_handler, get_project_handler, update_project_handler,
};
mod api;

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(move || {
        App::new()
            .service(create_project_handler)
            .service(get_project_handler)
            .service(update_project_handler)
            .service(delete_project_handler)
    })
    .bind(("localhost", 8080))?
    .run()
    .await
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Creates a new server that adds the handlers and runs on `localhost:8080`

With that done, we can start a development server using the command below:

```rust
cargo run main
```

![Create project](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706483516010_Screenshot+2024-01-29+at+00.09.09.png)
![Get a project](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706483516012_Screenshot+2024-01-29+at+00.09.28.png)
![Update a project](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706483516046_Screenshot+2024-01-29+at+00.10.05.png)

![Delete a project](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706483516086_Screenshot+2024-01-29+at+00.11.02.png)

We can also confirm the project management data by checking the table on Xata.

![Data on Xata](https://paper-attachments.dropboxusercontent.com/s_E1CBF4A45089EFC3D9C461B80BB9F97D882823FECDCA010DD86FEAC6EC26A79C_1706483568817_Screenshot+2024-01-29+at+00.11.32.png)

# Conclusion

This post discussed what Xata is and provided a detailed step-by-step guide to use it to build a project management API in Rust. In addition to the functionalities explored earlier, Xata also includes well-tailored features that developers can harness to build applications ranging from small to large.

These resources may also be helpful:

-   [Xata documentation](https://xata.io/docs?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [Actix web framework](https://actix.rs/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)


This post discussed what Xata is and provided a detailed step-by-step guide to use it to build a project management API in Rust.

Xata + Rust: A getting started guide.

This post describes what Nuxt’s Server Handlers are and how to use them to create a todo application using the Xata serverless database platform.

Getting started with Nuxt Server Handlers

Next.js, Nuxt, SvelteKit, and others consistently innovate their solutions based on the server-side rendering paradigm. This paradigm generates web content on the server side for each request, leading to improved web application performance, SEO, and user experience.

Beyond simply outputting and generating content on the web page, a notable addition in the [Next.js 14 release](https://nextjs.org/blog/next-14#forms-and-mutations) is the support for [Server Actions and Mutations](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations). This feature allows us to define functions that run securely on the server and can be called directly from a client or server component for submitting forms and data mutations. This is a game-changer because it eliminates the need to define a directory for the API, create an endpoint, and then consume it in a component.

In this post, we will learn how to use Next.js’s Server Actions to create a basic todo application using the Xata serverless database platform. The project repository can be found [here](https://github.com/Mr-Malomz/server-actions/tree/dev).

## Prerequisites

To follow along in this tutorial, the following are required:

-   Basic understanding of TypeScript and Next.js
-   Xata [CLI](https://xata.io/docs/getting-started/cli?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) installed
-   Xata [account](https://app.xata.io/signin?mode=signup?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)

## Project setup

In this project, we'll use a prebuilt UI to expedite development. To get started, let’s clone the project by navigating to a desired directory and running the command below:

```bash
git clone https://github.com/Mr-Malomz/server-actions.git && cd server-actions
```

**Running the project**

Next, we’ll need to install the project dependencies by running the command below:

```bash
npm i
```

Then, run the application:

```
npm run dev
```

![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703252879108_Screenshot+2023-12-22+at+14.35.42.png)

The components in the codebase follow the normal Next.js/React pattern of creating components. Notably, the `src/components/ui/Button.tsx` and `src/components/ui/DeleteButton.tsx` components have been modified. They have the [useFormStatus](<https://react.dev/reference/react-dom/hooks/useFormStatus#noun-labs-1201738-(2)>) hook for managing form submissions (disabling and enabling clicks).

## Setup the database on Xata

To get started, log into the [Xata workspace](https://app.xata.io/workspaces) and create a `todo` database. Inside the `todo` database, create a `Todo` table and add a `description` column of type `String`.

![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703592508608_Screenshot+2023-12-26+at+13.07.33.png)

**Get the Database URL and set up the API Key**

To securely connect to the database, Xata provides a unique and secure URL for accessing it. To get the database URL, click the **Get code snippet** button and copy the URL. Then click the **API Key** link, add a new key, save and copy the API key.

![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596013324_Screenshot+2023-12-26+at+14.04.29.png)
![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596030165_Screenshot+2023-12-21+at+23.42.03.png)

**Setup environment variable**

Next, we must add our database URL and API key as an environment variable. To do this, create `.env.local` file in the root directory and add the copied URL and API key.

```bash
XATA_DATABASE_URL= <REPLACE WITH THE COPIED DATABASE URL>
XATA_API_KEY=<REPLACE WITH THE COPIED API KEY>
```

**Integrate Xata with Next.js**

To seamlessly integrate Xata with Next.js, Xata provides a [CLI](https://xata.io/docs/getting-started/cli) for installing required dependencies and generating a fully type-safe API client. To get started, we need to run the command below:

```bash
xata init
```

On running the command, we’ll have to answer a few questions. Answer them as shown below:

```bash
Generate code and types from your Xata database <TypeScript>
Choose the output path for the generated code <PRESS ENTER>
```

With that, we should see a `xata.ts` file in the root directory.

A best practice is not to modify the generated code but to create a helper function to use it. To do this, create a `utils/xataClient.ts` file inside the `src` folder and insert the snippet below:

```ts
import { XataClient } from '@/xata';

export const xataClient = () => {
	const xata = new XataClient({
		databaseURL: process.env.XATA_DATABASE_URL,
		apiKey: process.env.XATA_API_KEY,
		branch: 'main',
	});
	return xata;
};
```

The snippet above imports the `XataClient` class from the generated code and configures the client with the required parameters.

Finally, we must create `utils/types.ts` to manage our application from the state.

```ts
export type FormResponseType =
	| { type: 'initial' }
	| { type: 'error'; message: string }
	| { type: 'success'; message: string };
```

## Building the todo application

In our todo applications, we will use Server Actions to do the following:

-   Create a todo
-   Update a todo
-   Delete a todo

**Create a todo**

To create a todo, we need to create an `actions/createTodo.ts` inside the `app` folder and insert the snippet below:

```ts
'use server';

import { FormResponseType } from '@/utils/types';
import { revalidatePath } from 'next/cache';
import { xataClient } from '@/utils/xataClient';

export const createTodo = async (
	_: FormResponseType,
	formData: FormData
): Promise<FormResponseType> => {
	const xata = xataClient();
	const description = String(formData.get('description'));

	const response = await xata.db.Todo.create({ description });

	if (response.description) {
		revalidatePath('/');
		return {
			type: 'success',
			message: 'Todo created successfully!',
		};
	} else {
		return {
			type: 'error',
			message: 'Error creating todo!',
		};
	}
};
```

The snippet above does the following:

-   Uses the `use server` directive to mark the function as a Server Action
-   Imports the required dependencies
-   Creates a `createTodo` function that extracts the required information and uses the `xataClient` to create a todo. The function also uses the `revalidatePath` function to refresh the homepage when a todo is created successfully

**Update a todo**

To update a todo, we need to create an `actions/updateTodo.ts` and insert the snippet below:

```ts
'use server';

import { FormResponseType } from '@/utils/types';
import { xataClient } from '@/utils/xataClient';
import { redirect } from 'next/navigation';

export const updateTodo = async (
	_: FormResponseType,
	formData: FormData
): Promise<FormResponseType> => {
	const xata = xataClient();
	const description = String(formData.get('description'));
	const id = String(formData.get('id'));

	const response = await xata.db.Todo.update(id, { description });

	if (response?.description) {
		redirect('/');
		return {
			type: 'success',
			message: 'Todo updated successfully!',
		};
	} else {
		return {
			type: 'error',
			message: 'Error updating todo!',
		};
	}
};
```

The snippet above performs an action similar to the create todo functionality but updates the todo by searching for the corresponding todo and updating it. Then, redirect users to the homepage when it is successful.

**Delete a todo**

To delete a todo, we need to create an `actions/deleteTodo.ts` and insert the snippet below:

```ts
'use server';

import { xataClient } from '@/utils/xataClient';
import { revalidatePath } from 'next/cache';

export const deleteTodo = async (formData: FormData) => {
	const xata = xataClient();
	const id = String(formData.get('id'));

	await xata.db.Todo.delete(id);
	revalidatePath('/');
};
```

The snippet above also uses the `xataClient` to delete the corresponding todo and refreshes the homepage when a todo deletion is successful.

## Putting it all together!

With that done, we can start using the actions in the UI.

**Update the create todo component**

To do this, we need to modify the `src/components/TodoForm.tsx` file as shown below:

```tsx
'use client';

import { Button } from './ui/Button';
import { useFormState } from 'react-dom'; //add
import { createTodo } from '@/app/actions/createTodo'; //add

export const TodoForm = () => {
	const [formState, action] = useFormState(createTodo, { type: 'initial' }); //add
	return (
		<form action={action}>
			{formState.type === 'error' && (
				<p className='mb-6 text-center text-red-600'>
					{formState.message}
				</p>
			)}
			<textarea
				name='description'
				cols={30}
				rows={2}
				className='w-full border rounded-lg mb-2 p-4'
				placeholder='Input todo details'
				required
			/>
			<div className='flex justify-end'>
				<div>
					<Button title='Create' />
				</div>
			</div>
		</form>
	);
};
```

The snippet above uses the `useFormState` hook to update the form state based on the `createTodo` action. Then use the `action` and `formState` to submit the form and manage the UI state.

**Update the edit todo component**

First, we must modify the `src/components/EditTodoForm.tsx` file to update a todo as shown below:

```tsx
'use client';

import { Button } from './ui/Button';
import { useFormState } from 'react-dom';
import { updateTodo } from '@/app/actions/updateTodo';
import { TodoRecord } from '@/xata';

export const EditTodoForm = ({ todo }: { todo: TodoRecord }) => {
	const [formState, action] = useFormState(updateTodo, { type: 'initial' }); //add
	return (
		<form action={action}>
			{formState.type === 'error' && (
				<p className='mb-6 text-center text-red-600'>
					{formState.message}
				</p>
			)}
			<textarea
				name='description'
				cols={30}
				rows={2}
				className='w-full border rounded-lg mb-2 p-4'
				placeholder='Input todo details'
				required
				defaultValue={todo.description!}
			/>
			<input type='hidden' name='id' value={todo.id} />
			<div className='flex justify-end'>
				<div>
					<Button title='Update' />
				</div>
			</div>
		</form>
	);
};
```

The snippet above does the following:

-   Imports the required dependencies
-   Modify the `EditTodoForm` component to accept a `todo` prop
-   Uses the `useFormState` hook to update the form state based on the `updateTodo` action. Then use the `action` and `formState` to submit the form and manage the UI state.
-   Uses the `todo` prop to display the required information

> With this, we will get an error about props. We will solve it in the next step.

Lastly, we need to modify the `src/app/[edit]/page.tsx` file to get the value of a matching todo and pass in the required prop to the `EditTodoForm` component.

```tsx
//other imports goes here
import { xataClient } from '@/utils/xataClient';

const xata = xataClient();

export default async function Page({ params }: { params: { edit: string } }) {
	const todo = await xata.db.Todo.read(params.edit);

	return (
		<div className={`relative z-10 open-nav `}>
			<div className='fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity'></div>
			<div className='fixed inset-0 z-10 w-screen overflow-y-auto'>
				<div className='flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0'>
					<div className='relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg'>
						<div className='bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4'>
							<Link href='/' className='flex justify-end mb-2'>
								<X className='cursor-pointer' />
							</Link>
							<EditTodoForm todo={todo!} />
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}
```

**Update the homepage to get the list of todos and delete a todo**

To do this, we first need to modify the `src/components/TodoComp.tsx` file as shown below:

```tsx
//other imports
import { deleteTodo } from '@/app/actions/deleteTodo';
import { TodoRecord } from '@/xata';

export const TodoComp = ({ todo }: { todo: TodoRecord }) => {
	return (
		<div className='flex border p-2 rounded-lg mb-2'>
			<div className='ml-4'>
				<header className='flex items-center mb-2'>
					<h5 className='font-medium'>Todo item {todo.id}</h5>
					<p className='mx-1 font-light'>|</p>
					<p className='text-sm'>
						{todo.xata.createdAt.toDateString()}
					</p>
				</header>
				<p className='text-sm text-zinc-500 mb-2'>{todo.description}</p>
				<div className='flex gap-4 items-center'>
					<Link
						href={todo.id}
						className='flex items-center border py-1 px-2 rounded-lg hover:bg-zinc-300'
					>
						<Pencil className='h-4 w-4' />
						<p className='ml-2 text-sm'>Edit</p>
					</Link>
					<form action={deleteTodo}>
						<input type='hidden' name='id' value={todo.id} />
						<DeleteButton />
					</form>
				</div>
			</div>
		</div>
	);
};
```

The snippet above does the following:

-   Imports the required dependencies
-   Modify the `TodoComp` component to accept a `todo` prop
-   Uses the prop to display the required information
-   Uses the `deleteTodo` action and the `todo.id` to handle the deletion form.

Lastly, we need to update the `src/app/page.tsx` file as shown below:

```tsx
//other imports
import { xataClient } from '@/utils/xataClient';

const xata = xataClient();

export default async function Home() {
	const todos = await xata.db.Todo.getAll();
	return (
		<main className='min-h-screen w-full bg-[#fafafa]'>
			<Nav />
			<div className='w-full mt-6 flex justify-center'>
				<div className='w-full lg:w-1/2'>
					<TodoForm />
					<section className='border-t border-t-zinc-200 mt-6 px-2 py-4'>
						{todos.length < 1 ? (
							<p className='text-sm text-zinc-500 text-center'>
								No todo yet!
							</p>
						) : (
							todos.map((todo) => (
								<TodoComp todo={todo} key={todo.id} />
							))
						)}
					</section>
				</div>
			</div>
		</main>
	);
}
```

The snippet above gets the list of todos, maps it through the `TodoComp`, and passes in the required prop.

With that done, we can test our application by running the following command:

```bash
npm run dev
```

Check out the demo below:

![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaHpmbXEydmNiYzcxaGt3eGZ3dTJncXVqdWNud203bmI0dGQ5MDdqdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/2IyKKEKv8twxGw3knZ/giphy.gif)

## Conclusion

This post discusses Next.js 14 Server Actions for form submissions and data mutation on client and server components. Server Actions eliminate the need for users to manually create API routes for running applications securely on the server. Instead, they can simply define a function.

Check out these resources to learn more:

-   [Next.js Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [React useFormState hook](https://react.dev/reference/react-dom/hooks/useFormState?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [React useFormStatus hook](https://react.dev/reference/react-dom/hooks/useFormStatus?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [Xata documentation](https://xata.io/docs?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)


This post describes what Next.js's Server Actions are and how to use them to create a todo application using the Xata serverless database platform.

Getting started with Next.js 14 Server Actions

Learn how to abstract technical overhead by leveraging Appwrite to build a project management API in Go

Appwrite + Go: Build APIs without technical overhead

Learn how to abstract technical overhead by leveraging Appwrite to build a project management API in Rust

Appwrite + Rust: Build APIs without technical overhead

Microservices architecture is one of the preferred methods of building scalable and robust applications. It involves breaking large applications into smaller components that are well-defined, performs a specific task and uses sets of application programming interface (API) for their communication.

Communication is an essential part of microservices; it plays an important role in letting services talk to each other within the larger application context. Some examples of protocol microservices use to communicate with each other includes HTTP, **gRPC**, message brokers, etc.

In this article, we will explore what gRPC is and how to get started by building a user management service using gRPC, MongoDB and Golang.

## What is gRPC?

gRPC is a modern communication framework that can run in any environment and helps connect services efficiently. It was introduced in 2015 and governed by the Cloud Native Computing Platform (CNCF). Beyond efficiently connecting services across a distributed system, mobile applications, frontend to backend, etc., it supports health checking, load balancing, tracing, and authentication.

gRPC offers a fresh perspective to developers building medium to complex applications as it can generate client and server bindings for multiple languages. The following are some of its benefits:

**Service definition**

gRPC uses Protocol Buffers as its interface description language, similar to JSON and provides features like authentication, cancellation, timeouts, etc.

**Lightweight and performant**

gRPC definitions are 30 percent smaller than JSON definitions and are 5 to 7 times faster than a traditional REST API.

**Multiple platform support**

gRPC is language agnostic and has automated code generation for client and server-supported languages.

**Scalable**

From the developer’s environment to production, gRPC is designed to scale millions ler seconds requests.

# Getting started

Now that we understand gRPC's importance in building scalable applications, let’s build a user management service with gRPC, MongoDB, and Golang. The project source code can be found [here](https://github.com/Mr-Malomz/grpc_go).

## Prerequisites

To fully grasp the concepts presented in this tutorial, the following are required:

-   Basic understanding of Golang
-   Basic understanding of Protocol Buffer
-   Protocol Buffer [compiler](https://grpc.io/docs/protoc-installation/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) installed
-   A [MongoDB account](https://www.mongodb.com/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) to host the database. [**Signup**](https://www.mongodb.com/cloud/atlas/register?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) **is completely free**.
-   [Postman](https://www.postman.com/downloads/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) or any gRPC testing application

## Project and Dependencies setup

To get started, we need to navigate to the desired directory and run the command below in our terminal:

```bash
mkdir grpc_go && cd grpc_go
```

This command creates a Golang project called `grpc_go` and navigates into the project directory.

Next, we need to initialize a Go module to manage project dependencies by running the command below:

```bash
go mod init grpc_go
```

This command will create a `go.mod` file for tracking project dependencies.

We proceed to install the required dependencies with:

```bash
go get google.golang.org/grpc go.mongodb.org/mongo-driver/mongo github.com/joho/godotenv google.golang.org/protobuf
```

`google.golang.org/grpc` is the Golang implementation of gRPC.

`go.mongodb.org/mongo-driver/mongo` is a driver for connecting to MongoDB.

`github.com/joho/godotenv` is a library for managing environment variables.

`google.golang.org/protobuf` is the Golang implementation of Protocol Buffers.

## Defining the user management Protocol Buffer and compilation

To get started, we need to define a Protocol Buffer to represent all the operations and responses involved in the user management service. To do this, first, we need to create a `proto` folder in the root directory, and in this folder, create a `user.proto` file and add the snippet below:

```proto
syntax = "proto3";
package user;
option go_package = "grpc_go/proto";

service UserService {
    rpc GetUser (UserRequest) returns (UserResponse);
    rpc CreateUser (CreateUserRequest) returns (CreateUserResponse);
    rpc UpdateUser (UpdateUserRequest) returns (UpdateUserResponse);
    rpc DeleteUser (DeleteUserRequest) returns (DeleteUserResponse);
    rpc GetAllUsers (Empty) returns (GetAllUsersResponse);
}

message UserRequest {
    string id = 1;
}

message UserResponse {
    string id = 1;
    string name = 2;
    string location = 3;
    string title = 4;
}

message CreateUserRequest {
    string name = 2;
    string location = 3;
    string title = 4;
}

message CreateUserResponse {
    string data = 1;
}

message UpdateUserRequest {
    string id = 1;
    string name = 2;
    string location = 3;
    string title = 4;
}

message UpdateUserResponse {
    string data = 1;
}

message DeleteUserRequest {
    string id = 1;
}

message DeleteUserResponse {
    string data = 1;
}

message Empty {}

message GetAllUsersResponse {
    repeated UserResponse users = 1;
}
```

The snippet above does the following:

-   Specifies the use of `proto3` syntax
-   Declares `user` as the package name
-   Uses the `go_package` option to define the import path of the package and where the generated code will be stored
-   Creates a `service` to Create, Read, Edit, and Delete (CRUD) a user and their corresponding responses as `message`s.

Lastly, we need to compile the `user.proto` file using the command below:

```bash
protoc --go_out=. --go_opt=paths=source_relative \
    --go-grpc_out=. --go-grpc_opt=paths=source_relative \
    proto/user.proto
```

The command above uses the Protocol Buffer [compiler](https://grpc.io/docs/protoc-installation/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) to generate Golang server and client code by specifying the relative part and using the `user.proto` file.

> To avoid errors, we must ensure we add Golang to the path.

On successful compilation, we should see `user_grpc.pb.go` and `user.pb.go` files added to the `proto` folder. These files contain the gRPC-generated server and client code. In this article, we will only use the server code.

![gRPC-generated files](https://paper-attachments.dropboxusercontent.com/s_342FCE23FB720A94B62FAADA71BB64C7EAFA3BCC57C036F2CB5FC2D41E7F294F_1683671528193_Screenshot+2023-05-07+at+23.04.33.png)

## Using the generated code from gRPC in our application

With the compilation process done, we can start using the generated code in our application.

**Database setup and integration**

First, we need to set up a database and a collection on MongoDB as shown below:

![database setup](https://paper-attachments.dropboxusercontent.com/s_342FCE23FB720A94B62FAADA71BB64C7EAFA3BCC57C036F2CB5FC2D41E7F294F_1683672826154_Screenshot+2023-05-09+at+23.49.07.png)

We also need to get our database connection string by clicking on the **Connect** button and changing the Driver to `Go`.

![](https://paper-attachments.dropboxusercontent.com/s_342FCE23FB720A94B62FAADA71BB64C7EAFA3BCC57C036F2CB5FC2D41E7F294F_1683672832009_Screenshot+2023-05-09+at+23.52.03.png)

Secondly, we must modify the copied connection string with the user's password we created earlier and change the database name. To do this, we need to create a `.env` file in the root directory and add the snippet copied:

```bash
MONGOURI=mongodb+srv://<YOUR USERNAME HERE>:<YOUR PASSWORD HERE>@cluster0.e5akf.mongodb.net/<DATABASE NAME>?retryWrites=true&w=majority
```

Sample of a properly filled connection string below:

```bash
MONGOURI=mongodb+srv://malomz:malomzPassword@cluster0.e5akf.mongodb.net/projectMngt?retryWrites=true&w=majority
```

Thirdly, we need to create a helper function to load the environment variable using the `github.com/joho/godotenv` library. To do this, we need to create a `configs` folder in the root directory; here, create an `env.go` file and add the snippet below:

```go
package configs

import (
    "log"
    "os"
    "github.com/joho/godotenv"
)

func EnvMongoURI() string {
    err := godotenv.Load()
    if err != nil {
        log.Fatal("Error loading .env file")
    }
    return os.Getenv("MONGOURI")
}
```

Fourthly, we need to create a model to represent our application data. To do this, we need to create `user_model.go` file in the same `configs` folder and add the snippet below:

```go
package configs

import "go.mongodb.org/mongo-driver/bson/primitive"

type User struct {
    Id       primitive.ObjectID `json:"id,omitempty"`
    Name     string             `json:"name,omitempty" validate:"required"`
    Location string             `json:"location,omitempty" validate:"required"`
    Title    string             `json:"title,omitempty" validate:"required"`
}
```

Lastly, we need to create a `db.go` file to implement our database logic in the same `configs` folder and add the snippet below:

```go
package configs

import (
    "context"
    "fmt"
    "log"
    "time"

    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

type dbHandler interface {
    GetUser(id string) (*User, error)
    CreateUser(user User) (*mongo.InsertOneResult, error)
    UpdateUser(id string, user User) (*mongo.UpdateResult, error)
    DeleteUser(id string) (*mongo.DeleteResult, error)
    GetAllUsers() ([]*User, error)
}

type DB struct {
    client *mongo.Client
}

func NewDBHandler() dbHandler {
    client, err := mongo.NewClient(options.Client().ApplyURI(EnvMongoURI()))
    if err != nil {
        log.Fatal(err)
    }

    ctx, _ := context.WithTimeout(context.Background(), 10*time.Second)
    err = client.Connect(ctx)
    if err != nil {
        log.Fatal(err)
    }

    //ping the database
    err = client.Ping(ctx, nil)
    if err != nil {
        log.Fatal(err)
    }

    fmt.Println("Connected to MongoDB")

    return &DB{client: client}
}

func colHelper(db *DB) *mongo.Collection {
    return db.client.Database("projectMngt").Collection("User")
}

func (db *DB) CreateUser(user User) (*mongo.InsertOneResult, error) {
    col := colHelper(db)
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    newUser := User{
        Id:       primitive.NewObjectID(),
        Name:     user.Name,
        Location: user.Location,
        Title:    user.Title,
    }
    res, err := col.InsertOne(ctx, newUser)

    if err != nil {
        return nil, err
    }

    return res, err
}

func (db *DB) GetUser(id string) (*User, error) {
    col := colHelper(db)
    var user User
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    objId, _ := primitive.ObjectIDFromHex(id)

    err := col.FindOne(ctx, bson.M{"_id": objId}).Decode(&user)

    if err != nil {
        return nil, err
    }

    return &user, err
}

func (db *DB) UpdateUser(id string, user User) (*mongo.UpdateResult, error) {
    col := colHelper(db)
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    objId, _ := primitive.ObjectIDFromHex(id)

    update := bson.M{"name": user.Name, "location": user.Location, "title": user.Title}
    result, err := col.UpdateOne(ctx, bson.M{"_id": objId}, bson.M{"$set": update})

    if err != nil {
        return nil, err
    }

    return result, err
}

func (db *DB) DeleteUser(id string) (*mongo.DeleteResult, error) {
    col := colHelper(db)
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    objId, _ := primitive.ObjectIDFromHex(id)

    result, err := col.DeleteOne(ctx, bson.M{"_id": objId})

    if err != nil {
        return nil, err
    }

    return result, err
}

func (db *DB) GetAllUsers() ([]*User, error) {
    col := colHelper(db)
    var users []*User
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    results, err := col.Find(ctx, bson.M{})

    if err != nil {
        return nil, err
    }

    for results.Next(ctx) {
        var singleUser *User
        if err = results.Decode(&singleUser); err != nil {
            return nil, err
        }
        users = append(users, singleUser)
    }

    return users, err
}
```

The snippet above does the following:

-   Imports the required dependencies
-   **Line 15 - 21**: Defines a `dbHandler` interface that describes all the associated functions in our user management service
-   **Line 23 - 25**: Creates a `DB` struct with `col` property that will implement the `dbHandler` interface
-   **Line 27 - 48**: Creates a `NewDBHandler` constructor function that ties the `DB` struct and the `dbHandler` interface it implements by initializing the database connection to MongoDB and returning the appropriate response
-   **Line 50 - 52**: Creates a `colHelper` function that accepts the database connection by specifying the database name and associated collection
-   **Line 54 - 145**: Creates the required methods `CreateUser`, `GetUser`, `UpdateUser`, `DeleteUser`, and `GetAllUsers` with a `DB` pointer receiver and returns the appropriate responses. The methods also use the appropriate methods from MongoDB to perform the required operations

**Integrating the database logic with gRPC-generated code**

With our database logic setup, we can use the methods to create our application handlers. To do this, we need to create a `service` folder; here, create a `user_service.go` file and add the snippet below:

```go
package services

import (
    "context"
    "grpc_go/configs"
    pb "grpc_go/proto"
)

var db = configs.NewDBHandler()

type UserServiceServer struct {
    pb.UnimplementedUserServiceServer
}

func (service *UserServiceServer) GetUser(ctx context.Context, req *pb.UserRequest) (*pb.UserResponse, error) {
    resp, err := db.GetUser(req.Id)

    if err != nil {
        return nil, err
    }

    return &pb.UserResponse{Id: resp.Id.String(), Name: resp.Name, Location: resp.Location, Title: resp.Title}, nil
}

func (service *UserServiceServer) CreateUser(ctx context.Context, req *pb.CreateUserRequest) (*pb.CreateUserResponse, error) {
    newUser := configs.User{Name: req.Name, Location: req.Location, Title: req.Title}
    _, err := db.CreateUser(newUser)

    if err != nil {
        return nil, err
    }

    return &pb.CreateUserResponse{Data: "User created successfully!"}, nil
}

func (service *UserServiceServer) UpdateUser(ctx context.Context, req *pb.UpdateUserRequest) (*pb.UpdateUserResponse, error) {
    newUser := configs.User{Name: req.Name, Location: req.Location, Title: req.Title}
    _, err := db.UpdateUser(req.Id, newUser)

    if err != nil {
        return nil, err
    }

    return &pb.UpdateUserResponse{Data: "User updated successfully!"}, nil
}

func (service *UserServiceServer) DeleteUser(ctx context.Context, req *pb.DeleteUserRequest) (*pb.DeleteUserResponse, error) {
    _, err := db.DeleteUser(req.Id)

    if err != nil {
        return nil, err
    }

    return &pb.DeleteUserResponse{Data: "User details deleted successfully!"}, nil
}

func (service *UserServiceServer) GetAllUsers(context.Context, *pb.Empty) (*pb.GetAllUsersResponse, error) {
    resp, err := db.GetAllUsers()
    var users []*pb.UserResponse

    if err != nil {
        return nil, err
    }

    for _, v := range resp {
        var singleUser = &pb.UserResponse{
            Id:       v.Id.String(),
            Name:     v.Name,
            Location: v.Location,
            Title:    v.Title,
        }
        users = append(users, singleUser)
    }

    return &pb.GetAllUsersResponse{Users: users}, nil
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Initializes the database using the `NewDBHandler` constructor function
-   Creates a `UserServiceServer` that implements the gRPC-generated `UserServiceServer` interface inside the `user_grpc.pb.go` file
-   Creates the required methods by passing the `UserServiceServer` struct as a pointer and returning the appropriate responses as generated by gRPC

**Creating the server**

With that done, we can create the application gRPC server by creating a `main.go` file in the root directory and add the snippet below:

```go
package main

import (
    "log"
    "net"

    pb "grpc_go/proto"
    "grpc_go/services"
    "google.golang.org/grpc"
)
func main() {
    lis, err := net.Listen("tcp", "[::1]:8080")
    if err != nil {
        log.Fatalf("failed to listen: %v", err)
    }

    grpcServer := grpc.NewServer()
    service := &services.UserServiceServer{}

    pb.RegisterUserServiceServer(grpcServer, service)
    err = grpcServer.Serve(lis)

    if err != nil {
        log.Fatalf("Error strating server: %v", err)
    }
}
```

The snippet above does the following:

-   Imports the required dependencies
-   Specifies the application port using the in-built `net` package
-   Creates an instance of gRPC server using the `NewServer` method and specifies the associated service using the `UserServiceServer` struct
-   Register the service implementation with the gRPC server
-   Starts the server using the `Serve` method by passing the required port and handling errors appropriately

With that done, we can test our application by running the command below in our terminal.

```bash
go run main.go
```

## Testing with Postman

With our server up and running, we can test our application by creating a new **gRPC Request**.

![Create new](https://paper-attachments.dropboxusercontent.com/s_80F8DDD905BBAA506022F629DD8AAC7F4C11E43711F085CB17CB09D07EC7D70E_1683337484831_Screenshot+2023-04-28+at+00.18.35.png)

![Select gRPC Request](https://paper-attachments.dropboxusercontent.com/s_80F8DDD905BBAA506022F629DD8AAC7F4C11E43711F085CB17CB09D07EC7D70E_1683337484805_Screenshot+2023-04-28+at+00.19.06.png)

Input `grpc://[::1]:8080` as the URL, select the **Import a .proto file** option and upload the `user.proto` file we created earlier.

![URL and upload proto file](https://paper-attachments.dropboxusercontent.com/s_80F8DDD905BBAA506022F629DD8AAC7F4C11E43711F085CB17CB09D07EC7D70E_1683337591306_Screenshot+2023-04-28+at+00.27.32.png)

With that done, the corresponding method will be populated and we can test them accordingly.

![getAllUsers](https://paper-attachments.dropboxusercontent.com/s_80F8DDD905BBAA506022F629DD8AAC7F4C11E43711F085CB17CB09D07EC7D70E_1683337760054_Screenshot+2023-04-28+at+00.43.19.png)
![getAUser](https://paper-attachments.dropboxusercontent.com/s_80F8DDD905BBAA506022F629DD8AAC7F4C11E43711F085CB17CB09D07EC7D70E_1683337760024_Screenshot+2023-04-28+at+00.43.59.png)

We can also validate that our gRPC server works by checking our MongoDB collection

![Collection](https://paper-attachments.dropboxusercontent.com/s_342FCE23FB720A94B62FAADA71BB64C7EAFA3BCC57C036F2CB5FC2D41E7F294F_1683757798244_Screenshot+2023-05-10+at+23.29.30.png)

## Conclusion

This post discussed what gRPC is, its role in building scalable applications and how to get started by building a user management service with Golang and MongoDB. Beyond what was discussed above, gRPC offers robust techniques around authentication, error handling, performance, etc.

These resources might be helpful:

-   [Golang gRPC implementation](https://pkg.go.dev/google.golang.org/grpc?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [Golang Protocol Buffer implementation](https://pkg.go.dev/google.golang.org/protobuf?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)
-   [MongoDB Golang driver](https://github.com/mongodb/mongo-go-driver?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)

gRPC is a modern communication framework that can run in any environment and helps connect services efficiently. This post explores what gRPC is and how to get started by building a user management service using gRPC, MongoDB and Golang.

Getting started with gRPC in Golang

gRPC is a modern communication framework that can run in any environment and helps connect services efficiently. This post explores what gRPC is and how to get started by building a user management service using gRPC, MongoDB and Rust.

Getting started with gRPC in Rust

Explore what Internal Tool is and how to leverage Uniform as an Internal tool to build a News timeline application in Flutter.

Beyond Composability: Using Uniform as an Internal Tool

Learn how to use MongoDB Data API and Flutter to build a mobile fullstack application.

Going fullstack with Flutter and MongoDB Atlas Data API

Learn how to build a product delivery page using Cloudinary for media optimization, Uniform for composing experience, and Yew; a Rust-based frontend framework for rendering the product markup.

all posts