Build the 'Stack' in WhatTheStack

A Hands-On Guide to Astro, Pocketbase, SolidJS & Tailwind

Ever wondered what powers the website you're using right now? In this hands-on workshop, we'll pull back the curtain and build a real-world feature for the WhatTheStack conference website itself! We'll explore the modern, lightweight, and developer-friendly stack it's built on: Astro for a blazingly fast frontend, Pocketbase for a simple yet powerful backend, SolidJS for sprinkling reactive interactivity, and Tailwind CSS with DaisyUI for rapid styling.

This session is perfect for developers curious about the modern web who want to go from zero to a deployed, dynamic feature in just three hours. You'll leave with a working project, a clear understanding of how these technologies fit together, and the confidence to build your own performant web applications.

 

What are we exploring?

By the end of this workshop, attendees will be able to:

• Understand the core concepts of Astro's "islands architecture."

• Build static and dynamic pages with Astro, including reusable layouts and components.

• Style a web application from scratch using Tailwind CSS utility classes.

• Set up a simple backend and API using the Pocketbase admin dashboard.

• Fetch data from the Pocketbase API and render it dynamically in Astro.

• Add client-side interactivity to an otherwise static site using SolidJS.

• Integrate these four technologies to create a cohesive, full-stack application.

🛠️ The Project: A Dynamic Speaker Directory

We will build a core feature of any conference website: a filterable directory of speakers.

• Static Rendering: Astro will fetch all speaker data from Pocketbase at build time to create a super-fast, static HTML page.

• Dynamic Data: Speaker information (name, bio, photo, talk title) will be managed easily through the Pocketbase admin UI.

• Live Filtering: A SolidJS component will act as an "island of interactivity," allowing users to filter the speaker list in real-time without a page reload.
  
  

Note: Of course, we'll use the actual speaker and session data from the conference :)

✅ Prerequisites & Setup

Just bring a laptop with a working terminal, browser and editor. Ideally, you'd also have NodeJS 20+ installed. We'll set everything else up.