From UI Design to Deployment: Building a Meetup RSVP App with AI and Modern Tools

What we covered

The workshop builds one product, a meetup RSVP app, and never leaves it. Each module moves that same app one step further, from a prompt to a URL other people can open.

• The setup check: accounts, Node 20+, Git, VS Code, an AI assistant, and a reference repo with a branch per module so nobody stays stuck.
• Designing the UI with Google Stitch, and the three prompting patterns that get usable output: structural, emotional, iterative.
• Moving the design into Figma, then doing the unglamorous part: renaming layers semantically and applying Auto Layout, so the file is worth handing to code.
• Why everything in Figma has a code twin, and how to read a design file as a component tree.
• The three routes from Figma to code (plugins, the MCP server, prompt-first), and when each one is the right call.
• Frontend fundamentals covered properly rather than assumed: components, props, and state.
• The styling stack, Tailwind CSS with shadcn/ui, and where a generated component stops and yours begins.
• Structuring a Next.js app so the files match the design, plus a cleanup checklist for the HTML semantics and accessibility that AI tools quietly skip.
• Wiring up the data: Route Handlers, Server Components, and a Supabase schema for the RSVPs.
• Shipping it: CI/CD with GitHub Actions, then deploying to Vercel or Google Cloud Run.