This guide walks you through setting up your development environment for the jsPsych template.

You'll need the following tools installed on your system:

• Node.js (LTS version recommended)
• Yarn (package manager)
• Git (version control)
• A code editor (VS Code recommended)

It's recommended to install Node.js with a version manager. Options include:

• fnm (Fast Node Manager)
• nvm (Node Version Manager)
• n
• Volta
• homebrew (installs a single system-wide Node version)

Yarn is the package manager used in this template. To install it:

# Enable corepack (built into recent Node.js versions)
corepack enable

# If that fails, you might need to install it globally first
npm install -g corepack

1. Fork the template repository:

   • Go to the template repository
   • Click Use this template
   • Select Create a new repository

2. Clone your fork:

   git clone --branch main https://github.com/YOUR-USERNAME/YOUR-REPO.git your-project-name
   cd your-project-name

   (replacing YOUR-USERNAME and YOUR-REPO with your GitHub username and repository name)

From within your project directory:

# Set yarn version
yarn set version stable

# Install dependencies
yarn install

1. Open the workspace:

   • Open VS Code
   • File > Open Workspace from File...
   • Select VSCodeProject.code-workspace

2. Install the recommended extensions:

   • When you open the workspace file for the first time, VS Code will prompt you to install the recommended extensions:
     • ESLint (dbaeumer.vscode-eslint)
     • Prettier (esbenp.prettier-vscode)
     • Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss)
     • ZipFS (arcanis.vscode-zipfs) - for working with Yarn PnP
     • Pretty TypeScript Errors (yoavbls.pretty-ts-errors)
     • Code Spell Checker (streetsidesoftware.code-spell-checker)

   If the prompt doesn't appear, you can install these extensions manually from the Extensions sidebar.

1. Start the development server:

   yarn dev

2. Open your browser to the URL shown in the terminal (usually http://localhost:5173)

3. You should see the template experiment with a "Let's Go!" button

4. Click the button to run through the sample experiment

5. If you're in debugging mode (default), you'll see a "Debug Panel" button that shows the data being stored in the mock database

• Customize appConfig.ts with your information
• Continue to Development Workflow to start building your experiment
• Set up Firebase by following the Firebase Setup guide when you're ready to deploy