DEV Community: Mahesh Odedara

Redoed #5: Building a Markdown editor with CodeMirror and React

Mahesh Odedara — Thu, 27 Mar 2025 17:55:37 +0000

Building Redoed: Markdown editor with CodeMirror and React

Creating a React App with Vite and Bun

For the frontend, we are going to use React. I chose Vite and Bun to set up the React app inside our project’s root directory. The frontend code will live in the frontend folder, which we will later serve using a Go server

To set up the Vite app, I ran:

bun create vite@latest

I am also using Tailwind CSS and ShadCN UI for styling, so I followed their guides to set everything up, including implementing dark mode as guided by ShadCN UI documentation.

Building the Markdown Editor

Now, let's focus on building the Markdown editor. We'll use CodeMirror, a powerful and flexible code editor component for the web. It comes with syntax highlighting, customization options, and smooth React integration.

Installing dependencies

I'll use @uiw/react-codemirror which is CodeMirror component for React. Let's install it using bun along with the theme and other dependencies. We will use react-markdown for previewing and remark-gfm to support Github-flavoured Markdown.

bun add @uiw/codemirror-theme-github @uiw/react-codemirror @codemirror/lang-markdown @codemirror/language-data react-markdown remark-gfm github-markdown-css

Setting Up CodeMirror

Now that the dependencies are installed, Let's create a src/components/markdown-editor.tsx file and bring the dependencies into the project and set up the editor.

import { useCodeMirror, basicSetup, EditorView } from "@uiw/react-codemirror";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { githubDark, githubLight } from "@uiw/codemirror-theme-github";

CodeMirror supports syntax highlighting via HighlightStyle. I defined a highlight style for Markdown headings to make them standout.

import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";

const markdownHighlightStyle = HighlightStyle.define([
  { tag: t.heading1, fontSize: "2em", fontWeight: "bold" },
  { tag: t.heading2, fontSize: "1.75em", fontWeight: "bold" },
  { tag: t.heading3, fontSize: "1.5em", fontWeight: "bold" },
]);

We'll make the editor's background transparent so it blends in with the site's theme.

const myTheme = EditorView.theme({
  "&": {
    backgroundColor: "transparent !important",
  },
});

The Editor Component

The core of the editor is built within a functional React component. It uses useState to store the Markdown content and useCallback to handle text changes. Here, we are also using useTheme hook to get the theme information to make sure the site theme also applies to the editor.

import { useCallback, useState } from "react";
import { useTheme } from "./theme-provider";

function Editor() {
  const { theme } = useTheme();
  const resolvedTheme =
    theme === "system"
      ? window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light"
      : theme;

  const [value, setValue] = useState<string>("# Welcome to Redoed!");
  const handleChange = useCallback((val: string) => setValue(val), []);

Initializing CodeMirror

Now that we have the theme, syntax highlighting, and state set up, it's time to put it all together. We'll use useCodeMirror to create the editor and apply everything we've configured so far.

const { setContainer } = useCodeMirror({
  value, // Uses the state we set earlier to store the Markdown content
  height: "90vh", // Sets a fixed height for the editor
  extensions: [
    basicSetup(), // Adds essential features like line numbers and bracket matching
    markdown({
      base: markdownLanguage, // Enables Markdown syntax support
      codeLanguages: languages, // Adds syntax highlighting for code blocks
      addKeymap: true, // Enables useful keyboard shortcuts
    }),
    syntaxHighlighting(markdownHighlightStyle), // Applies our custom Markdown styling
    EditorView.lineWrapping, // Enables line wrapping
    myTheme, // Uses our transparent background theme
  ],
  theme: resolvedTheme === "dark" ? githubDark : githubLight, // Adjusts the theme dynamically
  onChange: handleChange, // Updates the state when the user types
});

The last step is rendering the editor by attaching setContainer to a div, which gives CodeMirror a place to mount itself.

Rendering the Markdown Preview

Now that the editor is set up, it's time to display the rendered Markdown. I'll use ReactMarkdown to convert the Markdown text into HTML and remark-gfm to support GitHub-style extensions like tables and strikethroughs.

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import "github-markdown-css";

return (
    <div className="w-screen sm:grid sm:grid-cols-2 py-2">
      <div>
        <div ref={setContainer} className="border-r-1" />
      </div>
      <div>
        <div className="h-[90vh] markdown-body p-2 markdown-preview overflow-y-auto scrollbar hidden sm:block !bg-background">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
        </div>
      </div>
    </div>
  );
);

This layout keeps the editor and preview side by side on larger screens while keeping the UI clean. Any text typed into the editor instantly reflects in the preview without needing a manual refresh.

Adding a Header component

Let’s also create header.tsx and add this code. For now, it’s just for the show, with none of the buttons working, but it will evolve later.

import { Save, SquarePen } from "lucide-react";
import { ModeToggle } from "./mode-toggle";
import { Button } from "./ui/button";

function Header() {
  return (
    <header className="bg-background flex h-12 w-screen items-center justify-between border px-4 py-2">
      <div className="flex items-center gap-1">
        <Button variant={"outline"} className="cursor-pointer">
          <SquarePen />
        </Button>
        <div className="w-25 sm:w-auto">
          <p className="truncate font-medium">Untitled</p>
        </div>
      </div>

      <div className="flex gap-1">
        <Button className="cursor-pointer" variant={"outline"}>
          <Save />
          Save
        </Button>
        <Button className="cursor-pointer">Login</Button>
        <Button className="cursor-pointer" variant={"secondary"}>
          Sign Up
        </Button>
        <ModeToggle />
      </div>
    </header>
  );
}

export default Header;

Putting Everything Together

Now that we have both the Editor and Header components, let’s bring them into App.tsx.

import Editor from "@/components/markdown-editor";
import Header from "@/components/header";
import { ThemeProvider } from "./components/theme-provider";

function App() {
  return (
    <ThemeProvider>
      <main className="h-fit">
        <Header />
        <Editor />
      </main>
    </ThemeProvider>
  );
}

export default App;

To start the development server, run:

bun run dev

Here's how the Markdown editor looks in action

Here's how far we've progressed in Redoed up to this point: GitHub - ui-md-editor branch

Redoed #4: Building the Document CRUD API

Mahesh Odedara — Mon, 03 Mar 2025 13:00:00 +0000

Building Redoed: Writing the Document CRUD API

Now that we have a database connection, let's write the APIs to create, retrieve, update, and delete documents.

Project structure

For this project, I'll use the following folder structure:

/redoed
├── cmd
│   └── server
│       └── main.go
├── docker-compose.yml
├── Dockerfile
├── go.mod
├── go.sum
├── internal
│   ├── db
│   │   └── db.go
│   ├── handlers
│   │   └── document_handler.go
│   ├── models
│   │   └── documents.go
│   ├── repository
│   │   └── document_respository.go
│   └── router
│       └── router.go
├── LICENSE
├── README.md
└── utils
    └── utils.go

The repository package will serve as the data access layer, meaning all functions that interact with the database will be placed here.
The handlers package will contain our HTTP handlers.
The router package will handle request routing.

Now, let's start by implementing the repository in repository/document_repository.go.

Implementing the Document Repository

internal/repository/document_repository.go.

package repository

import (
    "github.com/heshify/redoed/internal/db"
    "github.com/heshify/redoed/internal/models"
)

type DocumentRepository struct{}

func NewDocumentRepository() *DocumentRepository {
    return &DocumentRepository{}
}

Here, we:

Import the db and models packages.
Define a DocumentRepository struct.
Provide a constructor function NewDocumentRepository() to create an instance of DocumentRepository.

Now, let's implement the CRUD functions for managing documents, starting with document creation.

Creating a Document

func (r *DocumentRepository) CreateDocument(doc *models.Document) error {
    result := db.DB.Create(doc)
    return result.Error
}

This function takes a Document object and inserts it into the database. If the operation succeeds, it returns nil otherwise, it returns an error.

Retrieving a Document by ID

Next, we need a function to fetch a document by its ID.

func (r *DocumentRepository) GetDocument(id string) (models.Document, error) {
    var document models.Document
    result := db.DB.First(&document, "id = ?", id)
    return document, result.Error
}

This function searches for a document with the given ID. If found, it returns the document along with any potential errors.

Retrieving All Documents

Now, let's add a function to fetch all documents.

func (r *DocumentRepository) GetDocuments() ([]models.Document, error) {
    var documents []models.Document
    result := db.DB.Find(&documents)
    return documents, result.Error
}

Currently, this function retrieves all documents without any restrictions. However, in a real-world scenario, we would implement pagination for better efficiency. Additionally, users should only access their own documents, which we'll enforce after implementing authentication and user management.

Updating a Document

Next, let's add a function to update a document.

func (r *DocumentRepository) UpdateDocument(id string, doc *models.Document) error {
    var document models.Document
    result := db.DB.Model(&document).Where("id = ?", id).Updates(doc)
    return result.Error
}

This function updates an existing document based on its ID using the provided changes.

Deleting a Document

Finally, let's implement the delete function.

func (r *DocumentRepository) DeleteDocument(id string) error {
    result := db.DB.Delete(&models.Document{}, "id = ?", id)
    return result.Error
}

This function removes a document from the database based on its ID.

With these repository functions in place, we can now move on to writing the HTTP handlers that will use them.

But, before doing that, we need some helper functions for JSON handling, validation, and error responses.

Utility Functions

utils/utils.go

package utils

import (
    "encoding/json"
    "errors"
    "fmt"
    "net/http"

    "github.com/heshify/redoed/internal/models"
)

func ValidateDocument(doc models.Document) error {
    if doc.Title == "" {
        return fmt.Errorf("title is required")
    }
    return nil
}

func WriteJSON(w http.ResponseWriter, status int, data any) error {
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(status)
    return json.NewEncoder(w).Encode(data)
}

func ParseJSON(r *http.Request, data any) error {
    if r.Body == nil {
        return fmt.Errorf("missing request body")
    }

    decoder := json.NewDecoder(r.Body)
    decoder.DisallowUnknownFields()

    if err := decoder.Decode(data); err != nil {
        return fmt.Errorf("invalid JSON: %w", err)
    }

    if decoder.More() {
        return fmt.Errorf("unexpected extra data in request body")
    }

    return nil
}

func WriteError(w http.ResponseWriter, status int, err error) {
    if err == nil {
        err = errors.New("unknown error")
    }
    WriteJSON(w, status, map[string]string{"error": err.Error()})
}

These functions validate documents, parse JSON requests, and send structured responses, reducing boilerplate in handlers. Now, let's move on to implementing the API handlers.

Setting Up the Document Handler

First, we define a DocumentHandler struct, which holds a reference to the DocumentRepository. This allows the handler functions to interact with the database.

internal/handlers/document_handler.go

type DocumentHandler struct {
    Repo *repository.DocumentRepository
}

func NewDocumentHandler(repo *repository.DocumentRepository) *DocumentHandler {
    return &DocumentHandler{Repo: repo}
}

The NewDocumentHandler function initializes a new handler instance with a given repository.

Creating a Document

func (h *DocumentHandler) CreateDocument(w http.ResponseWriter, r *http.Request) {
    var newDocument models.Document

    if err := utils.ParseJSON(r, &newDocument); err != nil {
        utils.WriteError(w, http.StatusBadRequest, err)
        return
    }

    if err := utils.ValidateDocument(newDocument); err != nil {
        utils.WriteError(w, http.StatusBadRequest, err)
        return
    }

    if err := h.Repo.CreateDocument(&newDocument); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, err)
        return
    }

    if err := utils.WriteJSON(w, http.StatusCreated, newDocument); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, err)
        return
    }
}

This function handles the creation of a new document. It:

Parses the JSON request body.
Validates the document fields.
Calls the repository function to save the document.
Returns the newly created document in the response.

If any step fails, it responds with an appropriate HTTP error code.

Deleting a Document

func (h *DocumentHandler) DeleteDocument(w http.ResponseWriter, r *http.Request) {
    id := r.PathValue("id")
    if id == "" {
        utils.WriteError(w, http.StatusBadRequest, errors.New("missing document ID"))
        return
    }

    if err := h.Repo.DeleteDocument(id); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, errors.New("failed to delete document"))
        return
    }

    utils.WriteJSON(w, http.StatusOK, map[string]string{"message": "document deleted"})
}

This function removes a document by its ID. If the ID is missing or deletion fails, it returns an error.

Updating a Document

func (h *DocumentHandler) UpdateDocument(w http.ResponseWriter, r *http.Request) {
    id := r.PathValue("id")
    if id == "" {
        utils.WriteError(w, http.StatusBadRequest, errors.New("missing document ID"))
        return
    }

    _, err := h.Repo.GetDocument(id)
    if err != nil {
        if errors.Is(err, gorm.ErrRecordNotFound) {
            utils.WriteError(w, http.StatusNotFound, errors.New("document not found"))
        } else {
            utils.WriteError(w, http.StatusInternalServerError, errors.New("failed to fetch document"))
        }
        return
    }

    var newDocument models.Document

    if err := utils.ParseJSON(r, &newDocument); err != nil {
        utils.WriteError(w, http.StatusBadRequest, err)
        return
    }

    if err := utils.ValidateDocument(newDocument); err != nil {
        utils.WriteError(w, http.StatusBadRequest, err)
        return
    }

    if err := h.Repo.UpdateDocument(id, &newDocument); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, errors.New("failed to update document"))
        return
    }

    if err := utils.WriteJSON(w, http.StatusOK, newDocument); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, err)
        return
    }
}

This function updates an existing document:

Retrieves the document by ID to ensure it exists.
Parses and validates the updated data.
Calls the repository to update the document.
Returns the updated document.

If the document is missing, it returns a 404 Not Found response.

Retrieving a Document by ID

func (h *DocumentHandler) handleGetDocument(w http.ResponseWriter, r *http.Request) {
    id := r.PathValue("id")
    if id == "" {
        utils.WriteError(w, http.StatusBadRequest, errors.New("missing document ID"))
        return
    }

    document, err := h.Repo.GetDocument(id)
    if err != nil {
        if errors.Is(err, gorm.ErrRecordNotFound) {
            utils.WriteError(w, http.StatusNotFound, errors.New("document not found"))
        } else {
            utils.WriteError(w, http.StatusInternalServerError, errors.New("failed to fetch document"))
        }
        return
    }

    if err := utils.WriteJSON(w, http.StatusOK, document); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, err)
        return
    }
}

This function retrieves a document by its ID. If the document is not found, it returns a 404 Not Found error.

Retrieving All Documents

func (h *DocumentHandler) GetDocuments(w http.ResponseWriter, r *http.Request) {
    documents, err := h.Repo.GetDocuments()
    if err != nil {
        utils.WriteError(w, http.StatusInternalServerError, err)
        return
    }

    if err := utils.WriteJSON(w, http.StatusOK, documents); err != nil {
        utils.WriteError(w, http.StatusInternalServerError, err)
        return
    }
}

This function retrieves all documents and returns them as JSON.

Note: Right now, this function fetches all documents without filtering. Later, we will restrict it to return only the authenticated user's documents and implement pagination.

Setting Up the Router

After defining our HTTP handlers, we now register them with the router to handle incoming API requests. This ensures that each request is routed to the appropriate handler based on its method and endpoint.

package router

import (
    "net/http"

    "github.com/heshify/redoed/internal/handlers"
    "github.com/heshify/redoed/internal/repository"
)

func NewRouter() *http.ServeMux {

    docRepo := repository.NewDocumentRepository()
    docHandler := handlers.NewDocumentHandler(docRepo)

    r := http.NewServeMux()

    r.HandleFunc("POST /api/document", docHandler.CreateDocument)
    r.HandleFunc("GET /api/document", docHandler.GetDocuments)
    r.HandleFunc("GET /api/document/{id}", docHandler.GetDocument)
    r.HandleFunc("PUT /api/document/{id}", docHandler.UpdateDocument)
    r.HandleFunc("DELETE /api/document/{id}", docHandler.DeleteDocument)
    return r
}

Here, we initialize the document repository and pass it to the handler, ensuring a clean separation between data access and request handling. Each API route is mapped to its corresponding handler using http.ServeMux which dispatches requests based on their method and path.

Updating `main.go` and the Dockerfile

The main.go file from the first post, where our server existed, has now been moved to cmd/server/main.go, and I’ve made some changes to it.
Our server was initializing database and had a simple "Hello, World!" handler.

Now, we set up CORS, and use our router:

package main

import (
    "log"
    "net/http"

    "github.com/heshify/redoed/internal/db"
    "github.com/heshify/redoed/internal/router"
    "github.com/rs/cors"
)

func init() {
    db.InitDb()
}

func main() {
    r := router.NewRouter()
    port := "8080"
    c := cors.New(cors.Options{
        AllowedOrigins:   []string{"*"}, // Change to specific origins if needed
        AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
        AllowedHeaders:   []string{"Content-Type", "Authorization"},
        AllowCredentials: true,
    })
    handlerWithCors := c.Handler(r)

    log.Printf("Starting server on port %s", port)
    err := http.ListenAndServe(":"+port, handlerWithCors)
    if err != nil {
        log.Fatal(err)
    }
}

Updating the Dockerfile

Since main.go was moved to cmd/server/, we need to update the Dockerfile accordingly.

Before (from the second post):

# Build the Go application
RUN go build -o server ./cmd/server

After:

# Build the Go application
RUN go build -o server ./cmd/server

This change ensures that Docker builds and runs the server from the correct location.

With this, our API is fully wired up and ready to handle document operations.

Here's how far we've progressed in Redoed up to this point: GitHub - document-crud-api branch.

References

A lot of the structure and best practices in this project were inspired by these awesome resources.

Redoed #3: Connecting Go Server to PostgreSQL with GORM

Mahesh Odedara — Sat, 01 Mar 2025 13:00:00 +0000

Building Redoed : Connecting Go Server to PostgreSQL with GORM

Now that our Go server and PostgreSQL database are running inside Docker containers, it's time to integrate the database with the server. I’ll be using GORM, a popular ORM for Go. Writing raw SQL is always an option if we want to avoid dependencies, but I wanted to experiment with GORM for this project.

Installing Dependencies

Before we start writing the database logic, let's install the required dependencies:

go get -u gorm.io/gorm gorm.io/driver/postgres github.com/joho/godotenv github.com/google/uuid

With these installed, we're ready to connect to PostgreSQL.

Setting Up the Database Package

To keep the codebase organized, database logic will live in its own package. Inside internal/db/db.go, we'll set up the connection.

Initializing the Database

The database package will manage the connection and keep it accessible across the application. First, we import the required packages:

package database

import (
  "fmt"
  "log"
  "os"

  "github.com/joho/godotenv"
  "gorm.io/driver/postgres"
  "gorm.io/gorm"

This line declares a global DB variable that will hold the database connection:

var DB *gorm.DB

Keeping it global makes it accessible throughout the app without needing to pass it around. It'll be assigned a connection inside InitDb(), so once Initialized, we can use DB for queries and migrations.

Loading Environment Variables

Now, let's write the function that initializes the database. First, we load the database credentials from the .env file:

func InitDb() {
  if err := godotenv.Load(); err != nil {
        log.Fatal("Error loading .env file")
    }
 //...
}

If the .env file is missing, the application logs an error and exits, preventing it from running with missing credentials.

Constructing the Connection String

With the environment variables loaded, we can now construct the PostgreSQL connection string dynamically:

//...
    host := os.Getenv("DB_HOST")
    port := os.Getenv("DB_PORT")
    user := os.Getenv("DB_USER")
    password := os.Getenv("DB_PASSWORD")
    dbname := os.Getenv("DB_NAME")

    connectionStr := fmt.Sprintf(
        "host=%s user=%s password=%s dbname=%s port=%s sslmode=disable",
        host, user, password, dbname, port,
    )
//...

Here, we’re pulling values from the environment and constructing the connection string, which we’ll use to connect to the database.

Connecting to PostgreSQL

With the connection string ready, GORM provides a simple way to open a connection:

//...
    DB, err = gorm.Open(postgres.Open(connectionStr), &gorm.Config{})
    if err != nil {
        log.Fatalf("ERROR: Failed to initialize database: %v", err)
    }

    log.Println("INFO: Database initialized")
}

The gorm.Open() function initializes the database connection. It takes postgres.Open(connectionStr) as the driver and a configuration struct. If the connection fails due to incorrect credentials or an unreachable database then the app logs the error and exits. Otherwise, we get a confirmation message, and the database is ready to use.

Connecting the Server to the Database

At this point, the database is set up, but the server doesn’t know about it yet. Let’s initialize the connection when the application starts.

Inside main.go, add:

func init() {
  db.InitDb()
}

Now, every time the server runs, it ensures that the database is connected and ready to use.

Defining the Document Model

Now that the database is set up, let;s define the structure for documents.

Inside internal/models/document.go

package models

import (
    "time"

    "github.com/google/uuid"
)

type Document struct {
    ID        uuid.UUID `gorm:"type:uuid;default:gen_random_uuid();primaryKey"`
    Title     string    `json:"title"`
    Content   string    `json:"content"`
    CreatedAt time.Time
    UpdatedAt time.Time
}

Each document will have a title and content along with a unique UUID as its primary key and timestamps to track creation and updates.

Running Migrations

We can create the documents table in the database using GORM’s AutoMigrate function. For now, let's add this line inside InitDb():

func InitDb() {
//...
DB.AutoMigrate(&models.Document{})
}

This ensures that whenever the application starts, the database schema is up to date.

Now, if we run:

docker compose up --build

It will build our Go code and start both server and database containers.

If there are no errors, we can check the document table inside psql by running \dt:

mydb-# \dt
         List of relations
 Schema |   Name    | Type  | Owner
--------+-----------+-------+-------
 public | documents | table | user
(1 row)

Conclusion

With the datbase connected, we're now ready to start building the API.

See you in the next post!

Redoed #2: Containerizing the Go Server and PostgreSQL with Docker

Mahesh Odedara — Fri, 28 Feb 2025 13:00:00 +0000

Building Redoed : Containerizing the Go Server and PostgreSQL with Docker

Now that we’ve got a basic HTTP server running, it’s time to add a database. I’ll be using PostgreSQL to store our documents and user data. Instead of setting up PostgreSQL locally, I’m opting to use Docker. Because, Docker helps avoid potential headaches with local setups. It makes everything more portable, and with Docker Compose, I can manage both the Go server and the database in a unified, isolated environment. It also means I won’t have to worry about dealing with different configurations on different machines—what works in my container will work everywhere.

I use Arch btw, so I followed these instructions to install and set up Docker on my machine.

Defining the Go Server Container

The first step in containerizing our Go server is to create a Dockerfile. This file will describe how the Go application should be packaged into a container.

# Use the official Golang image
FROM golang:1.24-alpine

# Set working directory inside the container
WORKDIR /app

# Copy everything into the container
COPY . .

# Build the Go application
RUN go build -o server .

# Expose port 8080
EXPOSE 8080

# Run the binary
CMD ["./server"]

This Dockerfile does the following:

It starts with the official Golang image, which is based on Alpine Linux for a lightweight container.
Sets the working directory to /app.
Copies the entire local project directory into the container's /app directory.
Compiles our go code and generates binary named server.
It exposes port 8080, so the server can be accessed externally.
Specifies the command to run the server binary when the container starts.

Building and Running the Go Server Docker Container

Now that we have the Dockerfile, we can build and run the container.

docker build -t redoed-server .

This will create an image called redoed-server based on the instructions in the Dockerfile. Once the image is built, we can run it with:

docker run -p 8080:8080 redoed-server

This command starts the container, mapping port 8080 on the host machine to port 8080 inside the container, so we can access the server at localhost:8080.

Setting Up PostgreSQL with Docker Compose

We can start a PostgreSQL container using the docker run command like this:

docker run --name redoed-db -e POSTGRES_PASSWORD=mysecretpassword -d postgres

However, since we’re going to use multiple services (our Go server and the PostgreSQL database) It won't be convient to manually start each containers with individual commands, Docker Compose makes things a lot easier. Instead of manually managing each container, Docker Compose allows us to define and run both services from a single configuration file. This file is called docker-compose.yml.

services:
  server:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      db:
        condition: service_healthy
        restart: true

  db:
    image: postgres:17-alpine

    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${DB_USER} -d ${DB_NAME}"]
    restart: always
    environment:
      POSTGRES_USER: ${DB_USER}
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_DB: ${DB_NAME}
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

In our docker-compose.yml file, we define two services: the Go server (server) and the PostgreSQL database (db).

server: This container is built from the current directory (.). It exposes port 8080 to allow access from the host. The depends_on directive ensures that the server container waits until the db container is healthy before starting. It also restarts automatically if it crashes.
db: This container runs the postgres:17-alpine image. The healthcheck ensures the database is ready before the server tries to connect. It also defines the necessary environment variables (POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_DB) for configuring the database. Port 5432 is exposed to allow communication, and the pgdata volume ensures data persists even if the container is restarted.
volumes: The pgdata volume ensures that the PostgreSQL data persists even if the container is recreated.

Once everything is set up, We can start both containers with the following command :

docker compose up --build

This will build the Docker images and start both the Go server and PostgreSQL containers. The Go server will be available at localhost:8080, and PostgreSQL will be running on localhost:5432.

If we want to interact with database, we can do that by running following command:

docker run -it redoed-db-1 psql -U ${DB_USER} -d ${DB_NAME}

This opens an interactive session inside our container and connects to PostgreSQL using the specified user and database.

Conclusion

We’ve successfully containerized the Go server and PostgreSQL using Docker Compose. With everything set up, the next step is to connect the database to the server. Once that's done, we’ll write the CRUD APIs to interact with the data.

See you in the next post!

References

Redoed #1: Setting Up a Basic HTTP Server in Go

Mahesh Odedara — Thu, 27 Feb 2025 12:31:37 +0000

Building Redoed : Setting up a Basic HTTP Server in Go

I want to build a real-time collaborative Markdown editor in Go, where multiple users can simultaneously edit a document and see each other's changes in real-time. I'm calling this project Redoed (Real-time Document Editor).

Every project starts somewhere. Before diving into the complexities of real-time collaboration, WebSockets, and Markdown processing, let’s begin with something fundamental: setting up a basic HTTP server in Go. This will be the first step in building Redoed.

Initalizing the Module

A Go project starts with module initialization. For Redoed, I initialized the module with following command :

go mod init github.com/heshify/redoed

This generated a go.mod file, which will track dependencies for the project.

Now, we’ll place all our server code inside a main.go file.

Creating the HTTP Server

Defining the Package

Every Go program starts with a package declaration. Since this is an executable program, we use package main at the top of main.go :

package main

Importing Required Packages

Go’s standard library provides everything needed to run an HTTP server. We import the necessary packages:

import (
    "fmt"
    "log"
    "net/http"
)

fmt: Used for formatting and printing messages.
log: Provides logging functionality to record errors and other information.
net/http: Provides HTTP server and request handling functionality.

Defining a Request Handler

A handler function processes incoming HTTP requests and sends responses. Let’s define one that responds with Hello, World!:

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, World!\n")
}

This function takes two parameters
- w http.ResponseWriter: Used to send the HTTP response back to the client.
- r *http.Request: Represents the incoming HTTP request.

The fmt.Fprintf(w, "Hello, World!") line writes the response body, which is sent back to the client.

Setting Up the Router and Registering the Handler

We use http.NewServeMux() to create a router (multiplexer) that directs incoming requests to the appropriate handlers:

func main() {
    r := http.NewServeMux()
    r.HandleFunc("/", handler)
}

http.NewServeMux(): Creates a new request multiplexer (router).
r.HandleFunc("/", handler): Registers the handler function to handle requests at the root path (/).

Starting the HTTP Server

To start the server, we use http.ListenAndServe, which listens for incoming connections on port 8080:

func main() {
    r := http.NewServeMux()
    r.HandleFunc("/", handler)

    err := http.ListenAndServe(":8080", r)
    if err != nil {
        log.Fatal(err)
    }
}

http.ListenAndServe(":8080", r): Starts the server on port 8080 and routes requests using r.
log.Fatal(err): Logs any error and exits the program if the server fails to start.
ListenAndServe is a blocking call, meaning it will run indefinitely until manually stopped.

Testing the Server

Running the Server

Now, with the router and the server set up, we can run our Go program using:

go run main.go

The server will start listening on port 8080. We can test it by opening a browser and navigating to: http://localhost:8080

Alternatively, we can test the server using curl in the terminal:

curl http://localhost:8080/

which should return :

Hello, World!

Conclusion

We have successfully set up a basic HTTP server in Go, which serves as the foundation for building Redoed. Next, we’ll set up a database connection to store documents and user data.

Stay tuned!

DEV Community: Mahesh Odedara

Redoed #5: Building a Markdown editor with CodeMirror and React

Building Redoed: Markdown editor with CodeMirror and React

Creating a React App with Vite and Bun

Building the Markdown Editor

Installing dependencies

Setting Up CodeMirror

The Editor Component

Initializing CodeMirror

Rendering the Markdown Preview

Adding a Header component

Putting Everything Together

Redoed #4: Building the Document CRUD API

Building Redoed: Writing the Document CRUD API

Project structure

Implementing the Document Repository

Creating a Document

Retrieving a Document by ID

Retrieving All Documents

Updating a Document

Deleting a Document

Utility Functions

Setting Up the Document Handler

Creating a Document

Deleting a Document

Updating a Document

Retrieving a Document by ID

Retrieving All Documents

Setting Up the Router

Updating main.go and the Dockerfile

Updating the Dockerfile

Before (from the second post):

After:

References

Redoed #3: Connecting Go Server to PostgreSQL with GORM

Building Redoed : Connecting Go Server to PostgreSQL with GORM

Installing Dependencies

Setting Up the Database Package

Initializing the Database

Loading Environment Variables

Constructing the Connection String

Connecting to PostgreSQL

Connecting the Server to the Database

Defining the Document Model

Running Migrations

Conclusion

Redoed #2: Containerizing the Go Server and PostgreSQL with Docker

Building Redoed : Containerizing the Go Server and PostgreSQL with Docker

Defining the Go Server Container

Building and Running the Go Server Docker Container

Setting Up PostgreSQL with Docker Compose

Conclusion

References

Redoed #1: Setting Up a Basic HTTP Server in Go

Building Redoed : Setting up a Basic HTTP Server in Go

Initalizing the Module

Creating the HTTP Server

Defining the Package

Importing Required Packages

Defining a Request Handler

Setting Up the Router and Registering the Handler

Starting the HTTP Server

Testing the Server

Running the Server

Conclusion

Updating `main.go` and the Dockerfile