Ga naar hoofdinhoud

Tutorial 6: Setup — Codeflow Recorder

Reading time: ~10 minutes | Hands-on setup: ~10 minutes

Mandatory

You must complete this tutorial before hackathon day. Without Codeflow Recorder, we can't collect research data from your session.

What is Codeflow Recorder?​

Codeflow Recorder is a small desktop app that runs in the background during the hackathon coding sprint. It records:

  • Screen video — a low-framerate capture of your screen (not high-def, just enough to see what you're doing)
  • Keystroke frequency — how often and how fast you type (not the actual keys)
  • Paste events — when you paste code (helps us see when AI-generated code is used)
  • Window switches — when you switch between apps (VS Code, browser, ChatGPT, etc.)

It does NOT record your webcam, audio, personal files, or anything outside the coding sprint.

Step 1: Download the App​

Download the latest version for your operating system:

Step 2: Install on Windows​

  1. Extract the ZIP — Right-click the downloaded file → "Extract All"
  2. Open the folder — Find codeflow_recorder.exe
  3. Run the app — Double-click codeflow_recorder.exe
Windows SmartScreen Warning

Windows may show a blue "Windows protected your PC" warning. This is normal for new apps.

To continue:

  1. Click "More info"
  2. Click "Run anyway"

The app is safe — it's built specifically for this research project.

Step 3: Sign In​

  1. The app opens to a login screen
  2. Sign in with the same account you used to register on the Codeflow website
  3. If you registered with Google, click "Sign in with Google"
  4. If you registered with email, enter your email and password

Step 4: Join the Hackathon​

  1. After signing in, you'll see the Join Hackathon screen
  2. Enter the 6-letter hackathon code your teacher gave you (e.g., ABC123)
  3. Click "Look up" — the hackathon name should appear
  4. Check that any required surveys show as completed (green checkmarks)
  5. Click "Join Hackathon"

Step 5: Run a Test Recording (5 minutes)​

This verifies everything works before hackathon day.

  1. You should now see the Recording Screen with a timer and a green "Start Recording" button
  2. Click "Start Recording"
  3. The app will minimize to a small indicator in the top-right corner of your screen
  4. Work normally for 5 minutes — open VS Code, browse the web, type some code, anything
  5. To stop: find the small recording indicator and click the red "STOP" button
  6. The app will restore to full size and show "Recording saved!"
Can't find the recording indicator?

The indicator is a small bar in the top-right corner of your screen. If you can't see it:

  • Press Win + D to show the desktop, then look for it
  • Or double-click the indicator to restore the full app window

Step 6: Verify Upload​

After stopping the recording:

  1. Check the Progress Checklist on the recording screen:
    • ✅ Recording completed
    • ✅ Video chunks uploaded
  2. The upload happens automatically — wait for the green checkmarks
  3. If the upload seems stuck, check your internet connection and wait a moment

Step 7: Complete the Pre-Hackathon Survey​

  1. If there's a pre-hackathon survey, it will appear in the app or on the website
  2. Complete all required surveys — the recording screen will show a warning if surveys are pending
  3. Surveys take about 5 minutes

You're Done!​

Your setup is complete when:

  • Codeflow Recorder is installed and opens without errors
  • You signed in successfully
  • You joined the hackathon with the code
  • You completed a 5-minute test recording
  • The recording uploaded successfully (green checkmarks)
  • Pre-hackathon survey completed

Keep the app installed — you'll need it on hackathon day. Just open it, sign in, and click "Start Recording" when instructed.

Troubleshooting​

ProblemSolution
Windows SmartScreen blocks the appClick "More info" → "Run anyway"
Can't sign inMake sure you're using the same account as the website. Try "Forgot password" if needed.
Recording doesn't startMake sure no other screen recording software is running
Upload fails or is slowCheck your internet connection. The app retries automatically.
App crashesClose and reopen. If it keeps crashing, email the researcher.
Can't find the stop buttonThe recording indicator is in the top-right corner. Press Win+D if you can't see it.
"Complete surveys first" messageGo to the Codeflow website and complete all required surveys, then click "Recheck" in the app
Hackathon code not foundDouble-check the code with your teacher. Codes are 6 letters, case-insensitive.

Need Help?​

Contact d.radic@roc-nijmegen.nl — include a screenshot of any error message.

Next up: Tutorial 7: AI-Assisted Programming & MCP Setup →