Build It

Setup Guide

Particle Life

📄 8 Pages 🎯 Run Locally on Mac ⏱️ 10-15 minutes
Page 1 of 8

Install Homebrew

What this page does

Installs Homebrew, the Mac package manager.

Where this fits

Homebrew lets you install developer tools easily. You need it to install Node.js.

Code (this page)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Explanation

Open Terminal (Command + Space, type "Terminal", press Enter).

Paste the command above and press Enter.

Enter your Mac password when asked. Nothing will appear as you type — that's normal.

Wait for installation to complete. This takes 2-3 minutes.

Why this matters

Homebrew is required to install Node.js, which runs React projects.

✓ Checkpoint

⚠ If something breaks here

  • Password not accepted: Type carefully, it's your Mac login password
  • Already installed: You'll see "Homebrew is already installed" — that's fine, continue
  • Network error: Check your internet connection
Page 2 →
Page 2 of 8

Install Node.js

What this page does

Installs Node.js, which runs JavaScript and React projects.

Where this fits

Homebrew is installed. Now use it to install Node.js.

Code (this page)

brew install node

Explanation

In Terminal, type the command above and press Enter.

Wait for installation to complete.

Verify it worked:

node --version

You should see a version number like v20.x.x.

Why this matters

Node.js is required to run React applications. It includes npm (Node Package Manager).

✓ Checkpoint

⚠ If something breaks here

  • brew: command not found: Homebrew didn't install, redo Page 1
  • Already installed: You'll see a message — that's fine, continue
Page 3 →
Page 3 of 8

Create a React Project

What this page does

Creates a new React project folder with all required files.

Where this fits

Node.js is installed. Now create the project that will run Particle Life.

Code (this page)

mkdir ~/projects
cd ~/projects
npx create-react-app particle-life

Explanation

Run these commands one at a time in Terminal:

  • mkdir ~/projects — Creates a projects folder
  • cd ~/projects — Enters that folder
  • npx create-react-app particle-life — Creates the React project

The last command takes 2-3 minutes. Wait for it to finish.

Why this matters

React projects need a specific folder structure. This command sets it all up automatically.

✓ Checkpoint

⚠ If something breaks here

  • mkdir: File exists: The projects folder already exists — that's fine, continue with cd
  • Network errors: Check internet connection, try again
Page 4 →
Page 4 of 8

Start the Project

What this page does

Starts the React development server and opens it in your browser.

Where this fits

The project is created. Now run it to confirm everything works.

Code (this page)

cd particle-life
npm start

Explanation

Run these commands in Terminal:

  • cd particle-life — Enter the project folder
  • npm start — Start the development server

A browser window opens automatically showing a spinning React logo.

Keep this Terminal window open. It's running your app.

Why this matters

This confirms React is working. The browser will auto-refresh when you change code.

✓ Checkpoint

⚠ If something breaks here

  • Browser didn't open: Go to http://localhost:3000 manually
  • Port in use: Another app is using port 3000, close it and try again
Page 5 →
Page 5 of 8

Open in VS Code

What this page does

Opens the project folder in VS Code.

Where this fits

React is running. Now open VS Code to edit the code.

Code (this page)

Command + Space
Type: Visual Studio Code
Press Enter

Explanation

Open VS Code using Spotlight Search.

Then open the project folder:

  1. Press Command + O
  2. Navigate to: Users → [your username] → projects → particle-life
  3. Click Open

You should see the project files in the left sidebar.

Why this matters

VS Code is where you'll paste the Particle Life code.

✓ Checkpoint

⚠ If something breaks here

  • VS Code not installed: Download from code.visualstudio.com
  • Can't find the folder: It's at /Users/[your username]/projects/particle-life
Page 6 →
Page 6 of 8

Open App.js

What this page does

Opens the main application file that you'll replace.

Where this fits

VS Code has the project open. Now find the file to edit.

Explanation

In the VS Code sidebar (left side):

  1. Click the src folder to expand it
  2. Double-click App.js

The file opens in the editor. You'll see the default React code.

Why this matters

This is the file you'll replace with the Particle Life code.

✓ Checkpoint

⚠ If something breaks here

  • No sidebar: Press Command + B to show it
  • Can't find src: Make sure you opened the particle-life folder, not a parent folder
Page 7 →
Page 7 of 8

Replace the Code

What this page does

Replaces the default React code with Particle Life.

Where this fits

App.js is open. Now paste the Particle Life code.

Code (this page)

Command + A    (select all)
Delete         (remove it)
Command + V    (paste)
Command + S    (save)

Explanation

  1. In VS Code with App.js open, press Command + A to select all
  2. Press Delete to remove the code
  3. Go to the Particle Life Complete Code page
  4. Click Copy Code
  5. Back in VS Code, press Command + V to paste
  6. Press Command + S to save

Why this matters

This replaces the demo code with the full Particle Life simulation.

✓ Checkpoint

⚠ If something breaks here

  • Paste didn't work: Make sure you clicked "Copy Code" on the complete code page
  • File won't save: Check for a white dot on the tab, press Command + S again
Page 8 →
Page 8 of 8

View the Simulation

What this page does

Confirms Particle Life is running.

Where this fits

The code is saved. The browser should update automatically.

Explanation

Look at your browser (the one showing localhost:3000).

The page auto-refreshes when you save. You should see colorful particles interacting.

Use the controls on the right to:

  • Change presets (Random, Symmetric, Chains, etc.)
  • Adjust settings (particles, friction, force)
  • Enable trails
  • Save and load configurations

Why this matters

You did it. Particle Life is running locally on your Mac.

✓ Checkpoint

⚠ If something breaks here

  • Browser shows errors: Make sure you copied ALL the code and saved
  • Nothing changed: Check Terminal is still running npm start
  • Black screen: Wait a moment, or refresh the browser

🎉 Congratulations!

Particle Life is running on your Mac.

To run again later:

cd ~/projects/particle-life
npm start

To stop: Press Control + C in Terminal.

Contents