The application is built using the following tech & fmks :

• kotlin
• ktor
• htmx
• tailwindcss

This proof of concept aims to show the simplicity of the alliance of Kotlin + Htmx & Ktor to add a GUI on your API/Project or even build an app in couple hours. This project is organized following Git branches.

You can navigate to diff using the Pull requests declared or you can jump directly on last branch step-7/add-beer to see final version.

An extra branch step-8/dnd show how HTMX can add browser interaction (Drag & Drop)

Scoped branch : main

First create a project using the Ktor Project Generator with this configuration.

Add development=true to gradle.properties

Commands

  ./gradlew run # run HTTP embedded server

  ./gradlew build -t # to run auto-build for automatic reloading

PS : run these commands in two distinct shells

Go here to see UI

Scoped branch : step-2/libs-styling

This branch add limited styling and libs we will use in this project See Index.kt file.

Scoped branch : step-3/add-api

This branch add basic API in ktor to demonstrate the use case and use the service in the Index.kt file. See api package

Scoped branch : step-4/components

This branch refactor the application to split logic into components.

Scoped branch : step-5/webjars

This branch show the use of webjars for HTMX and style the application

Scoped branch : step-6/beer-details

This branch add beer detail dialog component and API routing for beer details

Scoped branch : step-7/add-beer

This final branch add form to create and add a new beer.