Idea to prototype in 10 days: How I made Jamstack Attack!

A journal of the process by which I made a multiplayer game where web developers practice frontend together

4 min readDec 11, 2020

Play Jamstack Attack!

App idea: Learn Jamstack by playing with and against other people
Name? Jamstack Attack!
Preliminary Mini-games: Pair programming, Debugging Duel, Clear the stack, What’s missing?
Comparisons: ‘Fall Guys’, ‘Gogogo!’, ’You Don’t Know Jack’ for Web Developers

10+ funny phrases as possible ‘You Don’t Know Jack’-style category names
First action for player: Pick a category!
Short mini-game intros: Find the error faster, Help them write this, Clear the stack faster, Find what’s missing faster, Fill the blanks faster
Fighting game UI: Health, indicators for rounds won
Duels or group play? 1-on-1 or last man standing?
Principles: Competitive and collaborative, Practice Frontend Together, test speed and accuracy

Mini-game ideas: Spin a wheel to see who gets which Pair Programming role
From Ring Fit Adventure: to start match, each player must simultaneously press and hold button for 3 seconds
Limit play per 24 hours? 1 round per language per day…3 rounds total
When answering, freeform type with autosuggestions based on language reserved words
Persistent keys for < [ { ( “ that toggle open/close
‘While you wait’ for the other player to go in Pair Programming: Trivia? Typing exercise? Quiz?
Debugging Duel: UI to help player target the exact spot: Which line? Buttons for 1–7
Clear the stack: Stack overflow logo as progress indicator, show call site with passed arguments, function definition and text entry starting with <- | like in browser console

Captured screenshots of App Store pages that I intend to use in mocking up my app
Captured screenshots from other apps to gather interaction design ideas: Duolingo, Codecademy Go, Mimo, SoloLearn
First app icon idea: toast with jam on it and bite in it
Second app icon idea: JA!
First two app pages

Find and Replace: easy design pattern for player to quickly highlight code error and fix it
Sketch mock-up of find-fix interaction design pattern
Axure prototype of single Debugging Duel challenge
Created first flow: download app, open, splash page, attack!!!, first challenge with countdown

Pair programming: explore a few code snippets to understand the expectations of the instructor — how open-ended should it be? What could be flagged as attempting to merely write the answer in the instructions (look for code-y characters like +=(){}[])
Draw wireframes of both players’ screens: Help them code this, Your turn: code this
Crazy fact: no ‘pair program’ apps on App store
Re-design starting page to feature a wheel spin with iconography
Added a ‘choose a category’ page with a deck-building aspect: one collectable card per language
Prototyped first iteration of pair programming mini-game, Coding Telefone
User-tested app experience with junior web developer — a lot of conceptual model misunderstandings that I will attempt to fix tomorrow
Brainstormed new copy for each mini-game’s instructions

Made an iteration of nearly all existing pages
Incorporated more instructional text on each mini-game screen
Added screenshots of app to splash page
Turned second phase of Coding Telefone screen into an automated demo of watching teammate type code
Neat idea: show player leveling up and earning a new card after finishing either game
Added screens after each mini-game to show leveling up and game over with corrected code
Added small avatars and round 1–3 indicators to Debug Duel
Tested start-to-end flow to ensure it plays as expected
Recorded videos of today’s and yesterday’s end-state ‘play through’
Idea: Refactor instructions for both games to be more like a short video

Final updates to latest iteration of prototype: larger wheel, Debug Duel video instructions
Created Typeform survey to elicit feedback from anyone who completes the demo
Published a blog post on dev.to as a way to promote the game
Had good friend usability test: noticed it looks super-zoomed-in on a phone
Started re-creating existing screens for widescreen devices
Re-designed a few screens as a result of the process

Finish re-creating desktop version of remaining screens
Add two examples to Debug Duel mini-game
Test entire flow for odd behavior or inconsistencies
Record demo video of newest iteration
Added flags to Coding Telefone to check for input of unacceptable code that’s too identical to the code their teammate is expected to match

Write the promotional message for use in various slack channels to find beta-testers
Update both mini-games to incorporate searching for and finding Player 2
Channels to publish: SCcodes, FrontEndMentor, Coding Coach, Meetup
Created Meetup event for three nights from now: Day 13