Workshop 1: Getting Started
In this workshop you will add an online user count feature to a Thonnas full-stack web project. Along the way you will experience the complete lifecycle -- from an idea expressed in plain English, through AI-powered planning and implementation -- including pulling pre-built modules from the marketplace -- to a running feature you can see in the browser.
What you will build
You will start by scaffolding a full-stack web application from a Thonnas template. Out of the box, this gives you a NestJS API, an Angular frontend, a PostgreSQL database, Redis caching, and a full observability stack (OpenTelemetry + SigNoz) -- all wired together and running in Docker with a single command.
From that foundation, you will add a real-time "users online" counter that appears on the homepage. This is a cross-cutting feature that touches the API (WebSocket gateway), the frontend (live UI component), the database (session tracking table), and the workflow engine (scheduled count aggregation). The count updates live as users connect and disconnect, and the underlying metrics flow through to the observability stack.
What you will learn
| Area | Skills |
|---|---|
| Project setup | thonnas init (default AI provider), install, doctor, setup (AI preferences), discover, build, config, start |
| AI-powered planning | /plan-req, /plan-req-review, /plan-arch, /plan-arch-review, /plan-tasks, /plan-tasks-review |
| AI-powered implementation | /code-it, /code-review, /verify, /apply-learnings |
| Testing and observability | Temporal dashboard, SigNoz metrics, multi-session browser testing |
| Project structure | Components, modules, manifest files, rules, and the rulesync aggregator |
Workshop steps
| Step | Title | Description |
|---|---|---|
| 1 | Set Up the Project | Scaffold, install, setup, build, configure, and start the full-stack web project |
| 2 | Test the Application | Verify the running app by registering, logging in, and updating a profile |
| 3 | Start Dev Tools and Cursor CLI | Launch the AI dev-tools containers and authenticate with Cursor |
| 4 | Plan a Feature | Use /plan-req to describe the user-count feature in natural language |
| 5 | Planning Lifecycle | Walk through the full review-arch-tasks planning cycle |
| 6 | Implementation | Execute /code-it and /code-review across multiple phases |
| 7 | Test the Feature | Rebuild, restart, and verify the user count works end-to-end |
| 8 | Explore Project Structure | Understand components, modules, and manifest files |
| 9 | Explore Rules Structure | Understand component, module, and framework rules and the rulesync aggregator |
| 10 | Deploy to AWS (Optional) | Deploy the project to AWS using CDK |
Prerequisites
- Completed the Installation guide (CLI installed, Git + Docker available)
- Completed the Quick Start guide (familiar with the basic CLI flow)
- A Cursor IDE installation with an active subscription (for AI-powered planning and implementation steps)
Key URLs
Once the project is running, these are the services you will interact with:
| Service | URL | Available |
|---|---|---|
| API (NestJS) | http://localhost:3000/api/v1 | After setup |
| Web Angular | http://localhost:4200 | After setup |
| SigNoz | http://localhost:8080 | After setup |
| Temporal UI | http://localhost:8088 | After user-count module is installed |
Time estimate
About 60--90 minutes for the full workshop, depending on AI response times and how deeply you explore each step. Steps 1--3 take roughly 15 minutes; the planning and implementation steps (4--7) take the bulk of the time.