Try the game now

Play Jamstack Attack!

Day 1 — Nov. 27

• 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

Day 2 — Nov. 28

• 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

Day 3 — Nov. 29

• 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

Day 4 — Nov. 30

• 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

Day 5 — Dec. 1

• 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

Day 6 — Dec. 2

• 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

Day 7 — Dec. 3

• 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

Day 8 — Dec. 4

• 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

Day 9 — Dec. 5

• 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

Day 10 — Dec. 6

• 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