1. Hackathon Prep
Note: The video covers material not in the guide below — please watch in full.
Action Step
Complete this before moving on.
Watch the full video. You'll be paired with a teammate for the hackathon — start thinking about what nasty go-to-market use case would make a great front end app. Check out the example apps linked above to get your gears turning. You don't have to build anything before the offsite, but if you want a head start for the competition, pair up with your teammate and start ideating.
Training Guide
At the April architect offsite, you'll have two hours to build a front end app and twenty minutes to present it. Teams vote on the best one. This video walks you through the format, shows you example apps, and explains why you're only responsible for front end development.
Teams
You'll be broken into pairs of two:
- Brian & Tamanna
- Derek & Andrew
- Izzy & Kylie
- John & Amanda
Example Apps
Several apps are already in development to give you a sense of what these look like and how detailed they should be.
GTM Lifecycle App — has contact lifecycle, company, deal, and customer sections. Each lifecycle stage has editable descriptions, current state vs. best practice comparisons, entry and exit criteria, and SLAs. You can click into any stage and edit the details.
Growth Model App — built by Anthony and already live with customers. Covers sales capacity, STR capacity, marketing channels, CS headcount, go-to-market support, additional spend, and summary rollup. This app completely replaced the Google Sheet that used to be used for growth modeling.
Market Map App — includes account personas with a toggle for multi-segment mode. Has data provider fields, ICP criteria at the account level, fit scoring (with weight validation), valuation methodology, account hierarchy, and a persona matrix with similar functionality.
Sales Territory Design App — broken into segments, team roster, territory assignments, and policies (holdover, rules of engagement, geographic exceptions). Still in progress on the balancing and growth plan sections.
None of these are AI slop. Each one took two to three hours of focused work — prompting, iterating on the UI, and layering in subject matter expertise.
What You're Building
You won't be recreating the apps shown above — those are already being built. Instead, think about what nasty go-to-market use cases would benefit from having a dedicated front end app. Something where a spreadsheet or a meeting currently handles the workflow, and an app could replace it.
On the day of the hackathon, you can feed a playbook into Claude Code to get a V1 started. But even the V1 will be somewhat generic — the taste, the judgment around UI, customer experience, and psychology is where you come in. That's what separates a good app from AI slop.
Front End vs. Backend
Front end is what the user sees — the buttons, the layout, the forms. It's built with HTML, CSS, and JavaScript. Pre-AI, a designer would create the UI in Figma, then a front end developer would code it. With Claude Code, you can do both in one shot. That's why Figma's stock tanked.
Backend is what makes things persist — the server, the database, the APIs. When you save data and it's still there when you come back, that's the backend.
You are only responsible for front end development. Nothing you build needs to be hooked up to a backend. If you make a change in one of these apps and refresh the page, it's gone — because there's no backend saving it. That's fine. You're building a design, a mockup, a fully interactive front end that demonstrates the flow and the experience.
You can prompt Claude Code and say "I'm trying to create a mockup, use HTML and CSS." It handles the code. Your job is the product design — what goes where, how the customer navigates, what friction to add, and what to keep minimal.
The Hackathon Format
Two hours to build. Twenty minutes to present — probably less if your design speaks for itself. The winning app gets recognized, and there will be prizes.
You don't have to build anything before the offsite. But if you want a head start, pick your use case and start ideating with your teammate.
Additional Training
The offsite prep includes a few more videos to help you understand the building blocks:
- MCPs & APIs — recommended watch, covers how to connect Claude Code to external platforms
- Custom App Walkthrough — walks through building a front end app step by step
- Custom App Activity — hands-on exercise to build your own
- AI App-Palooza — example showcase of what's possible
The full AI course from the main Academy is also available if you want to go deeper on any topic.