Day 14: Final Project - Contact Manager

Welcome to Day 14. You made it.

Today, we build the “Contact Manager”. This is the canonical example used on htmx.org.

Requirements

1. List View: Infinite scroll, Search bar, “Delete” buttons (with confirmation).
2. Edit View: Inline editing or separate page.
3. Create View: A form to add new contacts.
4. UX: Loading indicators, nice CSS transitions.

Architecture

We use HDA (Hypermedia Driven Architecture). The key is: The Server is the Single Source of Truth.

We don’t sync client state. We ask the server for the new HTML state.

Key Snippets

Delete with Confirmation:

<button hx-delete="/contact/1"
        hx-confirm="Are you sure you want to delete this user?"
        hx-target="closest tr"
        hx-swap="outerHTML swap:1s">
    Delete
</button>

Inline Validation (Email uniqueness):

<input name="email" hx-get="/contact/email" hx-target="next .error" hx-trigger="change">
<span class="error"></span>

Conclusion

You have learned:

• Attributes: hx-get, hx-post, hx-trigger.
• Swapping: innerHTML, outerHTML, OOB.
• Philosopy: Using HTML as the engine of application state.

You are now a Hypermedia Developer. Go simplify your stack.