The Astro & HTMX Masterclass

The Astro & HTMX Masterclass is a highly practical course focused on teaching you how to build a Web App using the “AHA Stack”, a term I coined to identify the combination of Astro, HTMX and Alpine.js.

We’ll use PocketBase for the data layer.

During the course we’ll build a project management SaaS app, similar to Basecamp or other project management tools out there.

Here’s a screenshot of the app we’ll build together:

The course is designed to be hands-on, with a focus on building a real-world application from scratch. You’ll learn how to set up the AHA Stack, integrate PocketBase for your data needs, and create a fully functional web app that you can use as a portfolio piece or even launch as a product.

We’ll handle all the functionality, payments, permissions, security, user invites to collaborate… it’s a pretty intensive course.

Note: if you enrolled in the 2024 edition of the Bootcamp last year, this is the same course, but in a non-cohort format (hence the lower price), so you don’t need to enroll again.

Here’s a full table of contents of the course:

Astro + HTMX Masterclass — Detailed topic list

• Foundations
  • Introduction
  • App requirements and architecture
  • Data storage choices
  • Initial data modeling approach
• PocketBase setup
  • Installing PocketBase locally
  • Exploring the admin UI and API
  • Creating collections: projects and tasks
  • Editing API rules and permissions
  • Updating PocketBase
  • Exporting and versioning the PocketBase configuration
• Getting started with Astro
  • Creating a new Astro project
  • Adding Tailwind integration
  • Running and verifying the development setup
• Building the core app
  • Creating the dashboard route and sample data
  • Fetching data from PocketBase in Astro
  • Establishing an app layout and styling lists
  • Displaying project status
  • Understanding SSR tradeoffs and enabling SSR in Astro
  • Building modal UX for creating projects
  • Introducing HTMX and wiring up actions
  • Creating projects via forms and modals
  • Building a single project page
  • Adding tasks to a project and listing them
  • Troubleshooting common issues
• Sidebar and productivity features
  • Building a responsive sidebar with mobile hamburger menu
  • Using hx-boost for snappier navigation
  • Sorting projects by status
  • Fixing TypeScript errors and polishing UI details
  • CRUD operations
    • Deleting projects and tasks
    • Editing project status and name
    • Editing task text
    • Marking tasks as done and separating done vs active lists
    • Starring tasks and surfacing starred tasks in the dashboard
• Authentication and user data isolation
  • Signup and login flows
  • Logout handling
  • Redirects for app routes
  • Route and API protection
  • Scoping lists to the current user
  • Associating new data with the current user
  • Forgot password and email validation
  • Adding Cloudflare Turnstile for bot protection
  • PocketBase schema snapshots provided
• File uploads, security, and error handling
  • Reviewing file and folder structure
  • Security topics: CSP, CSRF, and XSS hygiene
  • Showing task images and enlarging thumbnails
  • Drag and drop uploads and deletions
  • Handling errors in requests and 404s
  • Dealing with HTMX connection errors
• Teams and payments
  • Designing teams model and paid feature gating
  • Creating teams collection and team pages
  • Listing and managing team projects in the sidebar
  • Team activation via webhooks
  • Adding, listing, and highlighting team projects
• Invites and advanced team workflows
  • Invites collection and team settings
  • Listing team members and pending invites
  • Accepting and rejecting invites
  • PocketBase permission adjustments for multi-member rendering
  • Fixing edge cases in starred task editing
  • Changing team name
  • Subscription cancellation and freezing projects
  • Stripe subscription management links
  • Handling team deletion and data cleanup
• Activities and PWA enhancements
  • Activities collection and first event recording
  • Activities page and logging across the codebase
  • Personal settings: user profile name
  • Filters by team, project, person
  • Surfacing “tasks done today” in dashboards
  • Performance optimizations and service worker for offline screen
  • Enabling PWA installability
• Caching and performance
  • Preventing double roundtrips with HX-Redirect
  • Adding loading spinners and disabling double clicks
  • Caching modals and assets
  • Reducing accidental text selection
  • Preloading experiments and further optimization ideas
• Deployment to Railway with Docker
  • End-to-end deployment overview
  • Creating Railway account and services
  • PocketBase service setup
  • Dockerfile for the Astro app
  • Branch configuration and environment variables
  • Deploying the website
  • Cloudflare Turnstile site updates
  • Stripe webhook secret configuration
  • Verifying cache behavior in production

Frequenty Asked Questions

• How is the course delivered? The course is delivered online through text lessons.
• Is there a money-back guarantee? Yes, I offer a 30-day money-back guarantee if you’re not satisfied with the course.
• How long do I have access to the course? You have lifetime access to the course materials after enrollment.

Our order process is conducted by our online reseller Paddle.com. Paddle.com is the Merchant of Record for all our orders. Paddle provides all customer service inquiries and handles returns