Simple To-Do List Application

This project is created to learn and explore various web development technologies including HTMX, Gin, Temple, Firebase Authentication, and Firestore. The aim is to build a web application that showcases these technologies in action.

Project Overview

A simple web application to manage to-do tasks, built with Golang, Gin framework, htmx for interactions, and Firebase for authentication and data storage.

Link to the repository: go-gin-htmx repository

Features

• User Authentication (Sign Up and Login)
• Task Management (Create, Read, Update, Delete tasks)
• Updates with htmx

Technology Stack

• Go 1.16+
• Gin Web Framework
• HTMX
• Templ
• Firebase Authentication & Firestore
• TailwindCSS & DaisyUI
• Dev Environment: Project IDX with Air (Live Reload)

Development Tools

• Air for live reloading
• Make for build automation
• TailwindCSS for styling
• Templ for type-safe templates

Prerequisites

• Go (version 1.16 or higher)
• Firebase Account
• Node.js and npm (for frontend dependencies)

Setup Instructions

Firebase Configuration

1. Go to the Firebase Console and create a new project.
2. Enable Authentication (Email/Password) in the Firebase project settings.
3. Create a Firestore database in the Firebase project.
4. Download the google-services.json file and place it in the root of your backend project.

IDX Configuration

If you're using Project IDX, create a .idx/idx.nix file in your project root:

{ pkgs, ... }: {
  # Use stable nixpkgs channel
  channel = "stable-23.11";
 
  # Required packages for development
  packages = [
    pkgs.go
    pkgs.nodejs_20
    pkgs.nodePackages.nodemon
    pkgs.gnumake
    pkgs.air
    pkgs.gotools
  ];
 
  # IDX-specific configuration
  idx = {
    # Add Go extension
    extensions = [
      "golang.go"
    ];
    # Configure preview settings
    previews = {
      enable = true;
      previews = {
        web = {
          command = [
            "nodemon"
            "--signal"
            "SIGHUP"
            "-w"
            "."
            "-e"
            "go,html"
            "-x"
            "go run main.go -addr localhost:$PORT"
          ];
          manager = "web";
        };
      };
    };
  };
}

This configuration:

• Sets up the development environment with necessary tools (Go, Node.js, Air, Make)
• Configures the Go extension for IDX
• Enables live preview with nodemon watching for changes in Go and HTML files
• Automatically rebuilds and restarts the application when files change

Backend Setup

1. Clone the repository:

   git clone https://github.com/Zenk41/go-gin-htmx.git
   cd go-gin-htmx

Project Structure

go-gin-htmx/
├── api/              # API handlers and routes
├── firebase/         # Firebase configuration and clients
├── handlers/         # HTTP request handlers
├── middlewares/      # Custom middleware functions
├── models/           # Data models
├── public/           # Static assets
├── styles/          # CSS and styling files
├── utils/           # Utility functions
├── views/           # Templ templates
│   └── components/  
│       └── task.templ # Task components
├── .air.toml        # Air configuration for live reload
├── .env.example     # Environment variables template
├── Makefile         # Build and development commands
├── tailwind.config.js # Tailwind CSS configuration
└── main.go          # Application entry point

Features

Task Management

• Create, Read, Update, Delete (CRUD) operations for tasks
• Task status management (Done/Pending)
• Batch operations (Done all)
• Date-based task filtering

UI Components

The application uses Templ for type-safe HTML templates and HTMX for dynamic interactions:

Task Card Component

<div class="shadow-xl card bg-base-100 w-96" id={ task.TaskID }>
    <div class="card-body">
        <h2 class="card-title">{ task.Title }</h2>
        <p>{ task.Description }</p>
        <!-- Status badge -->
        if task.Status != "" {
            <div class="badge badge-accent badge-outline">{ task.Status }</div>
        }
        <!-- Action buttons -->
        <div class="justify-end card-actions">
            <div class="dropdown dropdown-end">
                <!-- Task operations dropdown -->
            </div>
            <button class="btn btn-primary" hx-put="/task/{taskID}/done">DONE</button>
        </div>
    </div>
</div>

Task Navigation Component

<div class="navbar bg-base-100">
    <!-- Batch operations -->
    <div class="navbar-start">
        <form>
            <a hx-put="/task/done-all" class="btn btn-ghost">done all</a>
        </form>
    </div>
    <!-- Date picker -->
    <div class="navbar-center">
        <input type="date" 
               hx-post="/task/update" 
               hx-target="#task-list"/>
    </div>
    <!-- Create task button -->
    <div class="navbar-end">
        <a class="btn btn-ghost" onclick="my_modal_1.showModal()">create task</a>
    </div>
</div>

Technical Features

HTMX Integration

• Optimistic UI updates
• Form validation
• Modal dialogs for task operations

Task Operations

1. Create Task

   • Modal form with title and description
   • Date selection

2. Update Task

   • In-place editing
   • Status updates
   • Optimistic UI updates

3. Delete Task

   • Confirmation modal

4. Batch Operations

   • Mark all tasks as done
   • Date-based filtering

UI Components

• DaisyUI components
• TailwindCSS for styling
• Responsive design
• Modal dialogs for operations
• Loading indicators
• Dropdown menus

Development Setup

Project Build Commands

The project uses a Makefile to automate common development tasks. Here's our Makefile with detailed explanations:

# Run the application (requires tailwind and nix build)
run: tailwind build-in-nix
	@./bin/app
 
# Install all project dependencies
install: 
	@go install github.com/a-h/templ/@latest
	@go get ./...
	@go mod vendor
	@go mod tidy
	@go mod download
	@npm install -D
 
# Compile TailwindCSS
tailwind:
	@tailwindcss -i styles/input.css -o public/globals.css
 
# Watch and generate Templ templates with hot reload
templ:
	@templ generate --watch --proxy=http://localhost:8080
 
# Build the project (standard build)
build:	
	@templ generate views
	@go build -o bin/app main.go
 
# Run Templ in Nix environment
nix-templ:
	@nix run github.com/a-h/templ generate --watch --proxy=http://localhost:8080
 
# Build specifically for Nix environment
build-in-nix:
	# for nix 
	@nix run github:a-h/templ generate views
	@go build -o bin/app main.go

Make Commands Explained

1. make run

   • Compiles TailwindCSS
   • Builds the application using Nix
   • Runs the compiled binary

2. make install

   • Installs the Templ template engine
   • Gets all Go dependencies
   • Creates a vendor directory
   • Ensures Go modules are tidy
   • Downloads all Go dependencies
   • Installs Node.js development dependencies

3. make tailwind

   • Compiles TailwindCSS from styles/input.css to public/globals.css

4. make templ

   • Watches for changes in Templ templates
   • Automatically regenerates when changes are detected
   • Provides hot reload via proxy to localhost:8080

5. make build

   • Standard build process
   • Generates Templ templates
   • Compiles the Go application

6. make nix-templ

   • Runs Templ generator in Nix environment
   • Includes hot reload functionality

7. make build-in-nix

   • Specialized build for Nix environment
   • Uses Nix to run Templ generator
   • Compiles the Go application

Key Features in Detail

Task Model

type Task struct {
    TaskID      string
    Title       string
    Description string
    Status      string
    Date        time.Time
}

Modal Dialogs

Three types of modals are implemented:

1. Create Task Modal (my_modal_1)
2. Edit Task Modal (my_modal_2)
3. Delete Confirmation Modal (confirm_delete_modal)

Date Management

• Date picker for filtering tasks
• Hidden date inputs for form submissions
• JavaScript functions for date synchronization:

  function copyDate1() {
      var dateValue = document.getElementById("start").value;
      document.getElementById("hidden-date-task-1").value = dateValue;
  }

Conclusion

This project demonstrates how to build a modern web application with minimal JavaScript using Go, HTMX, and Firebase. The combination of server-side rendering with Templ and dynamic updates via HTMX creates a smooth user experience while maintaining simplicity in the codebase.

Link to the repository: go-gin-htmx repository