CopyClub

Setting Up Your Mac for Vibe Coding

Cover Image for Setting Up Your Mac for Vibe Coding
Justin Kistner
Justin Kistner

A beginner-friendly guide to setting up your Mac for vibe coding.

Introduction for Vibe Coders

So, you're a vibe coder. You're harnessing the power of AI to bring your app ideas to life, maybe with tools like ChatGPT, Claude, or even agentic assistants like Cursor or Windsurf that help with your setup. You've likely followed tutorials, pasted commands into your terminal, or clicked 'accept' on a setup script, all in the quest to get your project running. But let's be real, sometimes it can feel like you're blindly following a vague map, sensing there's a lot happening 'under the hood' that isn't quite clear.

Perhaps some of these thoughts have crossed your mind:

  • 'Okay, that AI (or tutorial) just had me run a bunch of terminal commands... what exactly did I just install or change on my Mac?'
  • 'Why do I need Homebrew, then Node, then something called nvm? What do these tools even do for me?'
  • 'I hit an error, and the AI's fix involved more terminal magic. Did it really solve the root problem, or am I just patching holes in a leaky boat?'
  • 'I have this great app idea! Why is getting my computer ready to build it such a hurdle?'
  • 'Is my setup "right"? Am I creating future problems for myself by just clicking through these installs?'

If any of this resonates, you're in precisely the right place. I had all of those thoughts when I started vibe coding. I wrote this with you in mind.

We're going to demystify the Mac development setup process. We won't just tell you what commands to run; we'll explain why they're important, what concepts they relate to, and how they work together – all in plain, straightforward language. Our goal is to help you build a solid, understandable foundation, so you can code with more confidence and less guesswork.

This is the guide I wish someone had given me when I started coding. We'll build your Mac development environment step-by-step, explaining the "why" behind each part.

What We're Setting Up Your Mac To Do (And Why)

As a vibe coder, you're probably dreaming up all sorts of cool projects: sleek web apps, handy mobile apps, useful Chrome extensions, or maybe even automating tasks with Google Apps Script. That's awesome!

What I didn't realize when I first started down this path was how incredibly useful something as simple as a Python script could be. Imagine needing to pull data from a PDF, grab information from a website's API, or automate a repetitive task. Python, run right from your Terminal, can do that – no fancy user interface needed. And the real game-changer? You can get AI to write that script and even tell your Terminal how to run it for you!

So, the goal of this guide is to get your Mac ready for most of the common coding adventures you'll embark on. We'll cover the essentials that will let you build those web apps, dabble in scripting, and explore other creative coding projects. Once you've mastered this core setup, you'll likely have the confidence and know-how to add other technologies as your ambitions grow.

Essential Tools of the Trade

To get you started on the right foot, here are some tools we'll be incorporating or that you should have in your arsenal:

  • An AI-Powered IDE (Integrated Development Environment): I can't recommend tools like Windsurf or Cursor enough. Think of an IDE as your coding command center. It bundles several crucial tools into one application, making your life much easier. You can:
    • Easily browse your project's folders and files.
    • Open and edit code with helpful features.
    • Chat with an AI assistant right in the sidebar – an AI that can read your code, suggest changes, and even create new files for you.
    • Use a built-in Terminal. This is super handy because the AI can often suggest the exact terminal commands you need, so you don't have to memorize complex syntax.
  • Developer Accounts with LLMs: You'll likely want developer access (often via API keys) to large language models like those from OpenAI (ChatGPT), Google (Gemini), and Anthropic (Claude). These are the engines that power many AI coding assistants.
  • A GitHub Account: GitHub is essential for version control (think: saving your work at different stages) and collaboration. It's also where many projects are hosted and how you'll often deploy your web applications.

Recommended Stack for Apps

If you're aiming to build applications that other people will use (like web or mobile apps), here's a popular and powerful stack that this guide will help you set up for:

  • Frontend (What the User Sees): React (often with Next.js) is a fantastic choice. It's widely used, has a massive community, and AI tools are very well-trained on it.
  • Backend (The Behind-the-Scenes Engine): Supabase is an amazing open-source alternative to Firebase. It gives you a database, authentication, storage, and serverless functions with minimal setup.
  • Local Development with Docker: To build and test your app effectively on your own machine, especially when using Supabase, Docker is invaluable. It allows you to run a local version of Supabase (and other services) in a consistent, isolated environment.

With these goals and tools in mind, let's dive into how we actually get your Mac ready.

TL;DR: What You’ll Actually Be Able to Do When Done

Forget the jargon for a second. By the end of this guide, you'll be able to:

  • Use Your Terminal with Confidence: It’ll understand your commands more reliably because its main settings file (.zshrc) will be set up correctly. No more mysterious "command not found" errors as often!
  • Save and Share Your Code Like a Pro: You'll have "Git" (think of it as a super-smart "save" button and time machine for your code) and an easy way to use "GitHub" (where you store your code online and collaborate) directly from your Terminal.
  • Juggle Different Project Needs Smoothly: Use specific versions of "Node.js" (for most web development) and "Python" (awesome for scripting and AI tasks) for different projects without them clashing. Tools like nvm (for Node) and pyenv (for Python) will keep things separate and tidy.
  • Easily Install Most Coding Tools: With "Homebrew" (like an app store for developers), you'll be able to quickly install almost any command-line tool you'll encounter in tutorials or AI suggestions.
  • Run Complex Apps Locally (Like Supabase!): Using "Docker," you'll be able to run bits of your application (like your Supabase backend) on your Mac in their own little self-contained environments ("containers"). This makes testing way easier and more like how it'll run "for real."
  • Manage Your Local Supabase Backend Effortlessly: You’ll have a special Terminal tool (the "Supabase CLI") to make working with your local Supabase database and features a breeze.
  • Work Faster with Your Code Editor & Terminal: Your AI-powered editor (like Windsurf or Cursor) will be well-integrated, and you'll have some handy Terminal utilities to speed things up.
  • Get Better Help from Your AI Coding Assistants: With a clean setup, your AI tools can understand your environment better, leading to more accurate code generation and scripting help.

Essentially, you'll have a rock-solid, modern, and understandable development setup on your Mac, perfectly tuned for your vibe coding journey.

What's Actually Happening When You Set Up a Mac for Coding

When you set up a Mac for coding, you're essentially:

  1. Setting up communication lines - Telling your computer where to find the tools you install
  2. Installing a toolbox - Adding programs that help you build apps
  3. Organizing your workspace - Creating a consistent environment so things work reliably

Let's break down each part so you know what you're doing instead of blindly following commands.

1. Shell Configuration: Your Computer's Command Center

The "shell" is simply the program that runs when you open Terminal. It's where you type commands. The configuration file (.zshrc) is like a settings file that loads every time you open Terminal.

# This creates a configuration file if it doesn't exist already
touch ~/.zshrc

# This adds some text to that file
cat << 'EOF' >> ~/.zshrc

# PATH Configuration - This tells your computer where to look for programs
# For Apple Silicon (M1/M2/M3) Macs:
export PATH="/opt/homebrew/bin:/opt/homebrew/sbin:$PATH"
# For Intel Macs:
# export PATH="/usr/local/bin:/usr/local/sbin:$PATH"

# This ensures programs you install locally are found first
export PATH="$HOME/.local/bin:$PATH"

# These create shortcuts so you don't have to type "python3" every time
alias python=python3
alias pip=pip3

# These load other configuration files if they exist
[[ -f ~/.zsh_aliases ]] && source ~/.zsh_aliases
[[ -f ~/.zsh_functions ]] && source ~/.zsh_functions
EOF

# This applies the changes you just made
source ~/.zshrc

What this actually does:

  • Creates settings that tell your Mac where to look for programs you install
  • Sets up shortcuts (aliases) so you can type python instead of python3
  • Makes sure your computer can find the tools you install

Why it matters: Without proper PATH configuration, your Mac won't know where to find the tools you install, leading to frustrating "command not found" errors.

2. Setting Up Git: Your Code's Time Machine

Git is like a time machine for your code. It tracks changes so you can revert to previous versions if needed. It's also essential for sharing code with others or deploying to websites.

# This checks if Git is already installed
git --version

# These commands tell Git who you are
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
# This sets the default branch name to "main" (the standard these days)
git config --global init.defaultBranch main

# This creates a list of files Git should ignore
cat << 'EOF' > ~/.gitignore_global
.DS_Store
.vscode/
.idea/
*.log
node_modules/
__pycache__/
*.py[cod]
*$py.class
.env
.env.local
EOF

# This tells Git to use that ignore list for all your projects
git config --global core.excludesfile ~/.gitignore_global

What this actually does:

  • Sets up your identity for Git
  • Creates a global list of files that Git should ignore (things like temporary files, logs, and sensitive information)

Why it matters: Git is how developers track changes, collaborate, and back up their code. Almost every coding tutorial assumes you have Git installed.

3. Node.js Setup: The Engine for Web Development

Node.js is what lets you run JavaScript outside of a browser. It's essential for React, Next.js, and most modern web development.

# This installs NVM, which lets you install different versions of Node.js
# (NVM = Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# This adds NVM settings to your configuration file
cat << 'EOF' >> ~/.zshrc

# NVM Configuration
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
EOF

# Apply the changes
source ~/.zshrc

# Install the latest stable version of Node.js
nvm install --lts
nvm use --lts
nvm alias default 'lts/*'

# Install pnpm (a faster alternative to npm)
npm install -g pnpm

What this actually does:

  • Installs NVM, which is a tool that lets you switch between different versions of Node.js
  • Uses NVM to install the latest stable (LTS) version of Node.js
  • Installs npm (comes with Node) and pnpm (a faster alternative)

Why it matters: Different projects might need different versions of Node.js. Using NVM lets you switch between them easily without breaking other projects.

4. Homebrew: Your Mac's App Store for Developers

Homebrew is like an app store specifically for developer tools. It makes installing and updating programming tools much easier.

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

# This tells your Mac where to find Homebrew programs
# Choose based on whether you have an Intel or M1/M2/M3 Mac:

# For Apple Silicon Macs (M1/M2/M3):
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
eval "$(/opt/homebrew/bin/brew shellenv)"

# For Intel Macs:
# echo 'eval "$(/usr/local/bin/brew shellenv)"' >> ~/.zshrc
# eval "$(/usr/local/bin/brew shellenv)"

# This checks if Homebrew is working correctly
brew doctor

What this actually does:

  • Installs Homebrew, which is a package manager (tool installer) for Mac
  • Adds Homebrew to your PATH so your computer can find the programs you install with it
  • Checks if Homebrew is working correctly

Why it matters: Homebrew makes it much easier to install, update, and manage developer tools on your Mac. Without it, you'd have to manually download and install everything.

5. Python Setup: For AI and Automation

You might be focused on JavaScript for your web apps, but Python is super useful for many other developer tasks, especially scripting and AI-related things. Many AI tools you might use to help you code are written in Python, or you might want to write small Python scripts to automate tasks (like parsing PDFs or fetching data from an API).

Mac's Built-in Python vs. pyenv (The Python Version Manager): Your Mac comes with a version of Python pre-installed. However, it's often an older one, and it's generally best not to mess with it directly, as your Mac's operating system itself might use it for its own internal tasks. Messing with the system Python can lead to unexpected problems.

This is where pyenv comes in. Just like nvm helps you manage different versions of Node.js, pyenv lets you install and manage multiple versions of Python safely and separately, without interfering with the system Python or with each other. It's a dedicated tool for your Python development needs.

# Install pyenv, which lets you manage different Python versions
brew install pyenv

# Add pyenv settings to your configuration file
cat << 'EOF' >> ~/.zshrc

# Pyenv Configuration
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
export PATH="$PYENV_ROOT/shims:$PATH"
eval "$(pyenv init --path)"
eval "$(pyenv init -)"
EOF

# Apply the changes
source ~/.zshrc

# Install Python 3.11 and make it your default Python
pyenv install 3.11
pyenv global 3.11

# Install essential Python packages for AI and automation
pip install --upgrade pip setuptools wheel
pip install requests openai python-dotenv

Breaking Down the Commands:

  • brew install pyenv: We use Homebrew (our friendly tool installer) to get pyenv onto your Mac.
  • cat << 'EOF' >> ~/.zshrc ... EOF: This block adds crucial configuration lines to your .zshrc file (the settings file for your Zsh terminal). Let's unpack them:
    • export PYENV_ROOT="$HOME/.pyenv": This tells your system where pyenv itself is installed (usually in a hidden .pyenv folder in your home directory).
    • export PATH="$PYENV_ROOT/bin:$PATH": This adds the pyenv command to your system's PATH, so you can actually run pyenv commands from anywhere in your terminal.
    • export PATH="$PYENV_ROOT/shims:$PATH": This is a key part! pyenv works by using "shims." Shims are like tiny redirector files. When you type python or pip, your system first looks in the shims directory. These shims then figure out which actual version of Python (the one managed by pyenv) you intend to use based on your pyenv settings (like your global or local Python version).
    • eval "$(pyenv init --path)" and eval "$(pyenv init -)": These lines ensure that pyenv is properly initialized every time you open a new terminal window, making the shims work correctly and enabling pyenv to manage your Python versions effectively.
  • source ~/.zshrc: This command immediately applies the changes you just made to .zshrc in your current terminal session, so you don't have to close and reopen it.
  • pyenv install 3.11 (or your chosen version like 3.12): This tells pyenv to download and install Python version 3.11 (a stable and widely used version). You can replace 3.11 with other versions if needed.
  • pyenv global 3.11: This command sets Python 3.11 as the default python command whenever you open a new terminal. If a specific project needs a different version, pyenv can also set per-project (local) versions.
  • pip install --upgrade pip setuptools wheel:
    • What is pip? pip is Python's package manager, very similar to npm or pnpm for Node.js. You use pip to install Python libraries and tools (e.g., pip install requests to get a library for making web requests, or pip install openai to use OpenAI's Python library).
    • The Python you install with pyenv comes with its own pip. This command ensures that pip itself, along with some fundamental packaging tools (setuptools and wheel), are up to date.
  • pip install requests openai python-dotenv: This installs a few useful Python packages: requests (for making HTTP requests to APIs), openai (for interacting with the OpenAI API), and python-dotenv (for managing secret keys in a .env file).

Why pyenv (and this setup) is a Game Changer:

  • Control: You get to choose exactly which Python version you want for your projects (e.g., Python 3.10, 3.11, 3.12). No more being stuck with whatever version your Mac decided on.
  • Safety: It keeps your development Python setups completely separate from your Mac's system Python. This prevents accidental breakages of system tools that might rely on the built-in Python.
  • Consistency: If a tutorial, an AI tool, or a project you're working on needs a specific Python version, pyenv makes it super easy to install and use that exact version. This avoids a lot of "it works on their machine, but not mine" headaches.
  • Cleanliness: Each Python version managed by pyenv can have its own set of installed packages, preventing conflicts between projects that might need different versions of the same library.

6. Supabase: Your Database and Backend

Supabase is a popular choice for adding backend features (like a database, user sign-ups, storage) to your apps – kind of like Firebase but open source. It's a great way to get a powerful backend up and running quickly.

What is the Supabase CLI? A "CLI" is a Command Line Interface. It's a tool you run in your Terminal to interact with a service or application. The Supabase CLI is a special command-line tool provided by Supabase that lets you do cool things right from your Terminal.

# Install the Supabase command-line tools
brew install supabase/tap/supabase

# Check that it installed correctly
supabase --version

Breaking Down the Commands:

  • brew install supabase/tap/supabase: This Homebrew command installs the Supabase CLI tool, making the supabase command available in your terminal.
  • supabase --version: This command checks that the Supabase CLI installed correctly and shows you its version number.

Why the Supabase CLI is Your Friend:

Having the Supabase CLI is super useful because it allows you to:

  • Manage Supabase projects from your Terminal: Instead of clicking around on a website for everything.
  • Run Supabase locally: This is a big one! You can set up a mini Supabase environment right on your Mac by typing supabase start in your project folder (after running supabase init). This is incredibly helpful for developing and testing your app with a Supabase backend without needing an internet connection or worrying about messing up a live project. It cleverly uses Docker (which we just talked about!) behind the scenes to make this happen.
  • Initialize your project for Supabase: When you start a new project and want to use Supabase locally, you'll typically run supabase init in your project's main folder. This command sets up the necessary configuration files that Supabase needs to work with your project on your local machine.

In short, the Supabase CLI streamlines how you work with Supabase, especially for local development, making it faster and more efficient to build those backend features.

7. Docker: Your Development Lab

Docker might sound a bit advanced, but it's becoming super common, and here's the basic idea:

What is Docker? Imagine you have an app that needs a specific version of a database, a specific version of Python, and a bunch of other settings to run correctly. Docker lets you package your app (or parts of it, like a database) along with all its specific needs into a neat little box called a "container."

Why do I care?

  • "It works on my machine... and yours too!": This container will run the exact same way on your Mac, on your friend's Mac, or on a server in the cloud. It solves the "but it worked on my machine!" problem.
  • Easy Local Setups for Complex Tools: Some tools, like the local Supabase development environment (supabase start), use Docker behind the scenes to run things like a database for you without you having to manually install and configure that database. Docker makes it easy for them to give you a consistent, working local setup.
  • Tutorials might require it: Some tutorials or projects you find (especially more complex ones or those involving multiple services) might use Docker to ensure everyone has the same setup.
# Install Docker Desktop
brew install --cask docker

# Start Docker Desktop (the actual application)
open -a Docker

# Check that Docker installed correctly
docker --version
docker-compose --version

Breaking Down the Commands:

  • brew install --cask docker: This uses Homebrew to install Docker Desktop, which is an application that runs on your Mac and lets you work with Docker containers. It includes both the command-line tool docker and a graphical interface.
  • open -a Docker: This command just opens the Docker Desktop application you installed. You usually need Docker Desktop running in the background for Docker commands or tools that use Docker (like local Supabase) to work. You might need to complete a setup process within Docker Desktop the first time it opens.
  • docker --version & docker-compose --version: These commands check that Docker and Docker Compose (a tool for defining and running multi-container Docker applications) are installed correctly and print their versions. Seeing version numbers means you're good to go!

The Big Picture: Why Docker is Your Friend

Docker essentially gives you a superpower: the ability to create consistent, isolated 'labs' for your projects. This means less time debugging weird setup issues and more time building cool things. It's especially helpful when working with tools like Supabase locally or when collaborating with others, ensuring everyone's on the same page.

8. Additional Development Tools: Quality of Life Improvements

These are additional tools that make common development tasks easier.

# Install GitHub CLI for easier GitHub interaction
brew install gh

# Install jq for working with JSON data
brew install jq

# Install httpie (a more user-friendly curl alternative)
brew install httpie

# Install useful file and text utilities
brew install tree wget ripgrep

# Install VS Code (a popular code editor)
brew install --cask visual-studio-code

What these tools do:

  • gh: Lets you interact with GitHub directly from your terminal
  • jq: Helps you process and format JSON data
  • httpie: A more user-friendly way to make HTTP requests
  • tree: Shows directory structures in a visual tree format
  • wget: Downloads files from the internet
  • ripgrep: Fast text searching in files
  • VS Code: A popular code editor with great features for beginners and pros

9. Creating Your First AI Helper Script

Now let's create a simple tool that uses AI to help with coding questions - right from your terminal!

# Create a folder for your scripts
mkdir -p ~/scripts

# Set up a Python environment for the AI script
cd ~/scripts
python -m venv ai-env
source ai-env/bin/activate

# Install necessary packages
pip install openai python-dotenv

# Create a file to store your OpenAI API key
cat << 'EOF' > .env
OPENAI_API_KEY=your_openai_api_key_here
EOF

# Create the AI helper script
cat << 'EOF' > code_helper.py
#!/usr/bin/env python3
import os
import sys
import openai
from dotenv import load_dotenv

# Load API key from .env file
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")

def get_ai_help(query):
    """Get coding help from OpenAI API"""
    try:
        response = openai.chat.completions.create(
            model="gpt-4-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful coding assistant. Provide concise, practical answers with example code when appropriate."},
                {"role": "user", "content": query}
            ],
            max_tokens=500
        )
        return response.choices[0].message.content
    except Exception as e:
        return f"Error: {str(e)}"

if __name__ == "__main__":
    if len(sys.argv) < 2:
        print("Usage: python code_helper.py 'Your coding question here'")
        sys.exit(1)
    
    query = " ".join(sys.argv[1:])
    answer = get_ai_help(query)
    print("\n" + "-" * 40 + " AI CODING HELP " + "-" * 40)
    print(answer)
    print("-" * 90 + "\n")
EOF

# Make the script executable
chmod +x code_helper.py

# Create a shortcut for easier access
cat << 'EOF' >> ~/.zsh_aliases
# AI coding helper alias
alias code-help="cd ~/scripts && source ai-env/bin/activate && python code_helper.py"
EOF

# Apply changes
source ~/.zshrc

What this actually does:

  • Creates a folder for your scripts
  • Sets up a separate Python environment for your AI tool
  • Creates a script that can ask OpenAI for coding help
  • Makes a shortcut command so you can just type code-help "your question" in terminal

How to use it:

  1. Replace "your_openai_api_key_here" with your actual OpenAI API key
  2. In terminal, type: code-help "How do I create a React component?"

10. Checking If Everything Works

This script will check if all the tools are installed correctly:

# Create a verification script
cat << 'EOF' > verify_setup.sh
#!/bin/bash

echo "=== Development Environment Verification ==="
echo "Current PATH: $PATH"
echo ""

# Check Homebrew
echo "Checking Homebrew..."  
which brew > /dev/null && echo "✅ Homebrew found: $(which brew)" || echo "❌ Homebrew not found in PATH"

# Check Node.js tools
echo -e "\nChecking Node.js tools..."  
which node > /dev/null && echo "✅ node found: $(which node) ($(node --version))" || echo "❌ node not found in PATH"
which npm > /dev/null && echo "✅ npm found: $(which npm) ($(npm --version))" || echo "❌ npm not found in PATH"
which pnpm > /dev/null && echo "✅ pnpm found: $(which pnpm) ($(pnpm --version))" || echo "❌ pnpm not found in PATH"

# Check Python
echo -e "\nChecking Python..."  
which python > /dev/null && echo "✅ python found: $(which python) ($(python --version 2>&1))" || echo "❌ python not found in PATH"
which pip > /dev/null && echo "✅ pip found: $(which pip) ($(pip --version))" || echo "❌ pip not found in PATH"

# Check other tools
echo -e "\nChecking other tools..."  
which git > /dev/null && echo "✅ git found: $(which git) ($(git --version))" || echo "❌ git not found in PATH"
which docker > /dev/null && echo "✅ docker found: $(which docker) ($(docker --version))" || echo "❌ docker not found in PATH"
which supabase > /dev/null && echo "✅ supabase found: $(which supabase) ($(supabase --version))" || echo "❌ supabase not found in PATH"
which gh > /dev/null && echo "✅ GitHub CLI found: $(which gh) ($(gh --version))" || echo "❌ GitHub CLI not found in PATH"

echo -e "\nVerification complete!"
EOF

# Make the script executable
chmod +x verify_setup.sh

# Run the verification
./verify_setup.sh

What this does:

  • Creates a script that checks if all the tools are installed correctly
  • Shows you what's working and what's not
  • Gives you the version numbers of installed tools

11. Creating Your First React/Next.js App with Supabase

Now let's put everything together and create a real project:

# Create a new Next.js app
npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

# Add Supabase client library
pnpm add @supabase/supabase-js

# Initialize Supabase for local development
supabase init

# Create a config file for Supabase connection information
cat << 'EOF' > .env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
EOF

# Start the development server
pnpm dev

What this does:

  • Creates a new Next.js application (a React framework)
  • Adds Supabase for backend functionality
  • Sets up configuration for connecting to Supabase
  • Starts the development server so you can see your app

After running pnpm dev, you can open your browser to http://localhost:3000 to see your app!

What to Do When Things Go Wrong

"Command not found" Errors

If you see "command not found" when trying to run a tool, it means your computer can't find it. Try these fixes:

# See what's in your PATH
echo $PATH

# Reload your shell configuration
source ~/.zshrc

# Or completely restart your shell
exec zsh

What this means: Your PATH tells your computer where to look for programs. If a tool isn't in one of those locations, you'll get a "command not found" error.

Python Problems

If Python isn't working or you're getting the wrong version:

# Check which Python you're using
which python
python --version

# Make sure pyenv is in your PATH
echo $PATH | grep pyenv

# If needed, run the pyenv init commands again
eval "$(pyenv init --path)"
eval "$(pyenv init -)"

What this means: There might be multiple Python versions on your system. These commands help ensure you're using the one you installed with pyenv.

Node.js or npm Issues

If Node.js commands aren't working:

# Reinitialize nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# Check Node.js version
node --version

What this means: NVM might not be properly initialized. This manually loads it so you can use Node.js.

Understanding What You've Built

Now that you've set up your dev environment, here's what you have:

  1. A properly configured terminal that knows where to find your tools
  2. Version control with Git so you can track changes and collaborate
  3. Node.js for JavaScript and web development
  4. Python for AI and automation scripts
  5. Docker for isolated development environments
  6. Supabase for backend services like user accounts and databases
  7. VS Code for editing code with helpful features
  8. An AI assistant right in your terminal

This setup isn't just a random collection of tools - it's a complete environment for modern app development that professionals use every day.

Why This Approach Beats Random Installation

When you follow random tutorials or let AI tools install things for you, you often end up with:

  • Tools that conflict with each other
  • Programs installed in unexpected locations
  • Different versions of the same tool
  • No understanding of what's on your system

This structured setup gives you a clean, consistent environment where:

  • All tools are properly installed and findable
  • Different versions are managed with version managers
  • You understand what each piece does and why it's there

Next Steps

Now that you have a proper development environment, you can:

  1. Create projects with npx create-next-app (React/Next.js) or other project generators
  2. Ask your terminal AI helper coding questions with code-help "your question here"
  3. Use version managers to switch Node.js or Python versions when needed
  4. Add new tools using Homebrew with brew install tool-name

Remember, every developer started where you are now. The difference is that now you understand what your tools are doing instead of blindly following commands!