HTMX + Go: Build Fullstack Applications with Golang and HTMX

Install go on macOS, Windows, and Linux for this course, downloading the correct go.dev installer, distinguishing Apple Silicon from Intel, and verifying with go version.

Install docker on macOS, Windows, and Linux using docker desktop or package managers, enabling a disposable, consistent environment for course projects, and verify with docker --version.

Explore a quick HTMX intro to refresh HTML basics and learn how HTMX attributes enable ajax and server-rendered updates with minimal JavaScript.

Learn how to make HTTP requests with HTMX, using get and post attributes to call a hypermedia API, and observe responses replace the calling element while exploring put and delete.

Explore request triggers in HTMX using the x trigger attribute to fire post requests on events like mouse enter, mouse leave, or change, with default click behavior when unspecified.

Explore trigger modifiers in HTMX to control how events fire, including once to stop repeated requests, delay to postpone actions, and from to trigger events on another element.

Learn to add a progress indicator for asynchronous HTTP requests, showing loading during latency, using a class like 'HTML indicator' or an indicator attribute with a CSS selector.

Learn how to send data with HTMX by posting form data, inline JSON, and hx-include payloads, and how the server echoes back email and password for validation.

Learn how to load htmx responses into an external container by using the ajax target attribute with css selectors such as #destination or .response.

Learn how HTMX swaps content in the DOM using the swap attribute, switching from innerHTML to outerHTML to replace the destination div with server-provided hypermedia.

Explore how to use the HTMX swap attribute to control how hypermedia loads into a destination div, applying after begin, before begin, before end, and after end swap styles.

Demonstrate out-of-bounds swaps to route part of a server response to a secondary div while updating the main target, using IDs to designate target two.

Load a subset of the response using the ajax select attribute to target a specific div, with id target two, while adjusting the backend to remove out of bounds swaps.

Master go templates to construct and deliver html responses from the server for every request, returning either a full page view or a fragment to update page sections with HTMX.

Master Go HTML templates by parsing single templates or fragments, passing files, naming fragments, and executing templates on a Go server to render dynamic HTML.

Learn to render multiple templates in Go by creating header and body fragments, importing them into a home template, and using pass glob to load all templates from a folder.

Pass dynamic data from Go to templates using execute template and a data struct with public fields, enabling shared data across embedded header and content templates.

Pass map data into Go templates and render social links in the footer by iterating over a map's keys and values.

Pass a slice of strings to a Go template and use range to display features in a list. Compare this with maps and learn how Go templates handle primitives.

Learn how to use global and user-defined functions in go templates, including range and gt comparisons, via a func map with template.New and template.Funcs to format dates and uppercase strings.

Create a base Go project by initializing the module, adding a main.go with hello world, and preparing to install a router and MySQL for future projects.

Configure a gorilla mux router in a Go project, install it with go get, and create a base handler that returns 'welcome to the home page' at localhost:3000.

Connect a Go server to a MySQL database using database/sql and the go-sql-driver/mysql, initialize a reusable db, ping the server, and fetch the database version.

Create a templates folder with a home.html and header and footer fragments, load them with template.ParseGlob in init, then render home.html via execute template in the main route.

Plan and build a fullstack to-do app with HTMX and Go, returning HTML via a hypermedia API and implementing CRUD across six endpoints plus two shared utility functions.

Design a dockerized MySQL database for a task manager by creating a tasks table with id (auto increment primary key), task, and done (default 0), and seed data.

Build a Go fullstack to-do app by loading tasks from a MySQL database, rendering with templates, and using HTMX to fetch and display the task list on load.

Create an add task form, post new tasks to the server, and refresh the task list by rendering the to do list template with HTMX-driven requests.

load update form by id with the edit button using htmx, then submit via put or post to update the task and refresh the list, strike through done items.

Delete tasks by adding a delete endpoint in Go, using RESTful delete by id, and confirming with HTMX's ajax confirm, then replace the task list with the server-rendered updated list.

Plan and build a profile management app with user registration, login, profile editing, avatar upload, and session handling using Go and HTMX, detailing a users table.

Set up the project's database with docker-managed MySQL, start the container, and create a user management database with a users table (uuid id, email, password, name, category, dob, bio, avatar).

Set up a Go fullstack project with a MySQL database, gorilla mux router, and gorilla sessions, create templates, and launch a local server on port 4000.

Organize a Go project into models, repository, and handlers, then define the user model and install a UUID package to auto generate IDs.

Populate the repository package with database functions that interact with the users table, covering get all users, get by id, get by email, create, update, update avatar, and delete.

Create reusable authentication templates in a go and htmx fullstack app, with a libs template and auth header and footer for login and register.

Create the registration page by building the register.html template and a get /register route to render it, with full name, email, password, and category fields mapped to the backend.

Implement a secure Go registration flow with HTMX, posting full name, email, and password to /register, hashing passwords with bcrypt before saving and handling errors via an auth errors template.

Create the login page using a template and a login form with email and password, wired by a Go handler to route to the login page after registration.

Create a login handler in Go using gorilla sessions to validate user credentials, establish a session, and route to the home page, with front-end Ajax login and robust error handling.

Implement a route guard to check the session, fetch the user, and render a two-column inner home page with header and footer templates.

Create an edit profile page with a preloaded form for name, date of birth, and bio, using a template and a route handler. Test by loading /edit and saving changes.

Add a post-based update profile handler in Go that reads name, date of birth, and bio from the form, validates input, updates the user, and redirects home.

Create an avatar upload page for a profile with a template and file input named avatar; a backend route saves the image in the database and references it.

Create an uploads folder and static file server; build an avatar upload handler that saves images with a UUID, updates the user avatar, and replaces old files via htmx.

Learn to implement logout in a Go and HTMX fullstack app by deleting the session user, clearing cookies, and redirecting to the login page via a logout route.

Learn to enhance a Go and HTMX fullstack app with Ajax without heavy JavaScript, add loading indicators, ajaxify navigation with hx-boost, and implement real-time form validations.

Build a fullstack shopping cart app with HTMX and Go, featuring product listings, an interactive cart, and admin section for managing products and orders with HTML, CSS, and no JavaScript.

Design a shopping database by building three tables—products, orders, and order items—in MySQL, detailing product id, name, price, description, image, dates, plus order id, user id, status, and date.

Clone the seed base project from the base project branch to start the go shopping app, reviewing the models and repository layers for products and orders.

Set up the handlers package, define a handler type with a repository field, and initialize it in main.go to map routes for the application.

Set up HTML templates by organizing templates into admin and user folders, configure Go to parse all HTML files in the templates folder and subfolders with parse glob.

Create and apply admin layout templates using bootstrap styles, ensuring a persistent header, side menu, and footer across pages, with customized css files and a shared loading indicator.

Seed the database with 20 dummy products using go faker, assign a placeholder image, and expose a seed-products post endpoint to populate a paginated product list.

Build a full-stack admin interface with htmx and Go to list, view, edit, and paginate products using swap-in templates and ajax-driven updates.

View a product by fetching it via get request and swapping the products table with a detailed view using out of bounds swaps in a HTMX and Go fullstack setup.

Develop a full-stack Go app feature to create new products with a multipart form, image upload, and HTMX-based view swaps, featuring smart templates that display errors or the product list.

Demonstrate editing an existing product with htmx and go: render the edit form with current values, submit updates via put, and swap to the product view on success.

Implement a delete product feature with a confirmation dialog; on confirmation, remove the product and its image and refresh the all products view.

Build the user-facing shopping page and cart flow, replacing dummy products with real-looking items and setting up header and footer templates.

Build a shopping homepage with Go and HTMX by structuring header, footer, and main sections; load items via Ajax, swap cart views, and persist the cart state.

Discover how to add items to a cart using HTMX and Go, refresh a cart preview, and display success or duplicate messages with a calculated total.

Build a responsive cart page by swapping the cart view, updating item quantities with add, subtract, and remove actions, and refreshing both the cart and page via a smart template.

Place the order saves the order and items to the database, displays the order complete page with a breakdown, and clears the cart before returning home.

Build an admin orders page displaying all orders in a data table, enable viewing details, and update status (ordered, out for delivery, delivered) with templates and pagination.

Explore viewing order details and its breakdown in Go and HTMX fullstack app, showing items, quantities, prices, and total, with status updates from out for delivery to delivered.

Enlarge images on click and provide a view product page with detailed information. Add quantity controls and a confirmation dialog, and empower admin with filters, time formatting, and a dashboard.