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

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.

Build a product delivery page with Rust and Uniform

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

If you work with Docker, you’ve probably run into this at some point.

You spin up a Postgres or MySQL container for a project. Everything is running fine. Then you want to look at the data. Maybe a migration behaved strangely, maybe you want to insert a quick test row, or maybe you just want to confirm what’s actually in the database.

That’s when things get annoying.

You either drop into the terminal and start typing `psql` commands, install a desktop tool like pgAdmin and wait for it to load, or spin up another heavy container just to get a UI. It always feels like more effort than it should be just to inspect your own data.

I kept running into this friction, and eventually I decided to stop working around it and build something that fits how I actually use Docker.

That’s how **DockAdmin** started.

## What is DockAdmin?

DockAdmin is a lightweight database admin UI that runs directly inside your Docker environment. You add it to your compose file, run your stack, and immediately get a clean browser interface for managing your database.

```yaml
services:
    postgres:
        image: postgres:16
        environment:
            POSTGRES_USER: admin
            POSTGRES_PASSWORD: admin
            POSTGRES_DB: myapp

    dockadmin:
        image: demlabz/dockadmin
        ports:
            - '3000:3000'
```

No extra configuration, no setup wizard, and no external tools to install. It’s just another container that gives you a database UI.

It supports PostgreSQL, MySQL, and SQLite, which covers most everyday development use cases.

## Why Build Another Database Admin Tool?

There are already plenty of tools out there, but most of them don’t fit naturally into a Docker-first workflow.

Desktop tools are powerful, but they live outside your container environment. That means installing them, configuring connections, and maintaining them separately. That feels excessive when you only need to inspect a few rows or quickly test something.

[Adminer](https://www.adminer.org/en/) comes much closer to what I wanted. It’s lightweight, runs in a container, and uses database credentials for authentication, which keeps things simple. But the interface feels dated, and the overall experience doesn’t match what modern developer tooling looks like today.

[phpMyAdmin](https://www.phpmyadmin.net/) is also container-friendly, but it’s MySQL-only and carries a lot of historical baggage.

What I really wanted was something simple like Adminer, but with a modern UI, proper multi-database support, and a design that feels native to Docker from the start. That combination didn’t really exist, so I built DockAdmin.

## Why Rust on the backend?

Choosing Rust was a practical decision.

The full DockAdmin Docker image is around 15 MB, which is smaller than many `node_modules` directories. Rust compiles to a single static binary, so the runtime container only needs Alpine Linux and the compiled executable. There’s no interpreter, no runtime dependency chain, and no garbage collector to manage.

The backend uses Axum as the web framework and SQLx for database access. Axum is fast and ergonomic, and SQLx provides compile-time query checking with async support across Postgres, MySQL, and SQLite.

Here’s the Dockerfile:

```Dockerfile
# Frontend Build
FROM node:22-alpine AS frontend
WORKDIR /ui
COPY ui/package*.json ./
RUN npm install
COPY ui .
RUN npm run build

# Backend Build
FROM rust:1-alpine AS backend
WORKDIR /backend
COPY backend/Cargo.toml backend/Cargo.lock ./
RUN mkdir src && echo "fn main() {}" > src/main.rs
RUN cargo build --release
COPY backend/src ./src
RUN touch src/main.rs
RUN cargo build --release
RUN strip target/release/backend

# Runtime
FROM alpine:latest
COPY --from=backend /backend/target/release/backend ./dockadmin
COPY --from=frontend /ui/dist ./ui
EXPOSE 3000
CMD ["./dockadmin"]
```

It’s a straightforward multi-stage build that compiles the frontend, compile the backend, and copy both into a minimal runtime container. Stripping debug symbols trims the binary further, and the final image starts quickly and uses very little memory.

## The Frontend Stack

The UI is built with **React 19**, **TypeScript**, and **shadcn/ui** components on top of **Radix UI** and **Tailwind CSS**. Routing is handled by **TanStack Router**, and the SQL editor uses **CodeMirror 6**.

The goal was to make the interface feel like a tool you’d actually enjoy using, not just something functional. shadcn/ui helped a lot here because it provides polished components without forcing a rigid design system.

The frontend compiles into static files that the Rust backend serves directly, so there’s no separate frontend server at runtime.

## What You Can Do With It

Here's a quick rundown of the features in the current release (v0.1.0):

**Connect to Your Database**

Open `localhost:3000`, pick your database type, enter your credentials, and you're in. When running inside Docker Compose, you use the container name as the host (e.g., `postgres` or `mysql`). That's the whole auth flow. Your database credentials are your login, the same approach Adminer uses, and it works really well.

![Auth page](https://paper-attachments.dropboxusercontent.com/s_F7A81FD18698A2A0DAA2E49AE47E9EE5806BC2A0C98ACE1794ED3FBA3C1217AC_1771168431303_auth.png)

**Browse and Edit Data**

Click on any table and you'll see your data in a clean, paginated grid. You can scroll through records, and get a feel for what's in there.

Need to change or add something? Use the CRUD buttons to add, edit, or delete a row.

![CRUD operation](https://paper-attachments.dropboxusercontent.com/s_F7A81FD18698A2A0DAA2E49AE47E9EE5806BC2A0C98ACE1794ED3FBA3C1217AC_1771168583152_add_row.png)

**Create Tables Visually**

You can create new tables without writing any SQL. The table builder lets you define columns, set data types, and toggle constraints like primary key, not null, and unique. You can also set up foreign key relationships to other tables, including ON DELETE and ON UPDATE cascade rules.

![Create Table](https://paper-attachments.dropboxusercontent.com/s_F7A81FD18698A2A0DAA2E49AE47E9EE5806BC2A0C98ACE1794ED3FBA3C1217AC_1771168634065_create_table.png)

**Explore Your Schema**

The schema viewer gives you a quick look at any table's structure. You can check the column names, data types, constraints, and foreign key relationships. It's handy when you need to understand how a database is set up without digging through migration files.

![Schema view](https://paper-attachments.dropboxusercontent.com/s_F7A81FD18698A2A0DAA2E49AE47E9EE5806BC2A0C98ACE1794ED3FBA3C1217AC_1771168698838_schema_view.png)

**Write Raw SQL**

For those times when a UI just won't cut it, there's a built-in SQL editor powered by CodeMirror. It has syntax highlighting, and you can run any query and see results right there. Great for quick debugging, running one-off scripts, or testing complex queries.

![SQL Editor](https://paper-attachments.dropboxusercontent.com/s_F7A81FD18698A2A0DAA2E49AE47E9EE5806BC2A0C98ACE1794ED3FBA3C1217AC_1771168745174_sql_editor.png)

## What I learned Building It

Supporting multiple databases consistently was harder than expected. Postgres, MySQL, and SQLite all expose schema information differently. Listing tables, reading constraints, handling relationships. Each database has its own quirks, and building one abstraction layer across all of them required more edge-case handling than I initially planned.

Docker image optimization was another learning curve. The first image I built was over 100 MB. Getting it down to around 15 MB involved multi-stage builds, Alpine base images, dependency caching, and stripping the binary. Each change helped a little, but together they made a huge difference.

I also learned how important open-source infrastructure is from the beginning. Issue templates, contribution guides, CI/CD pipelines, and automated workflows take time to set up, but they make collaboration much smoother once people start contributing.

## What’s Next

DockAdmin is currently in active development, and there’s a clear roadmap:

- Data export to SQL and CSV
- File import
- Full-text search
- Multi-database sessions

These are all areas where community feedback and contributions can shape what it becomes.

## Try It Out

You can run DockAdmin in seconds:

```bash
docker run -p 3000:3000 demlabz/dockadmin
```

Or add it to your Docker Compose setup:

```yaml
dockadmin:
    image: demlabz/dockadmin
    ports:
        - '3000:3000'
```

The project is open source under MIT and available on [GitHub](https://github.com/Mr-Malomz/dockadmin).

If you find it useful, star the [repo](https://github.com/Mr-Malomz/dockadmin). If something breaks, open an [issue](https://github.com/Mr-Malomz/dockadmin/issues). And if you want to contribute, check the [good-first-issue](https://github.com/Mr-Malomz/dockadmin/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22good%20first%20issue%22) label and the contributing guide.

The stack is Rust and React, so there’s plenty to explore on either side.

Thanks for reading.


DockAdmin is a lightweight, modern database admin UI that runs as a Docker container. It supports PostgreSQL, MySQL, and SQLite. The entire image is ~15MB.

#frontend

How to implement hot reloading in a Go application

Build a product delivery page with Rust and Uniform

Getting started with Nuxt Server Handlers

Getting started with Next.js 14 Server Actions

I Built a Docker-Native Database Admin UI in Rust. Here’s Why.