Directories & Paths

Understanding directories (folders) and paths is essential for working with code. When you tell an AI assistant to “edit that file,” you need to know which file and where it lives.

What’s a Directory?

A directory is just a fancy word for a folder. Developers use “directory” and “folder” interchangeably.

Your computer organizes files in a hierarchy — folders inside folders inside folders. This tree-like structure keeps things organized.

my-project/
├── src/
│   ├── components/
│   │   └── Button.js
│   └── pages/
│       └── Home.js
├── public/
│   └── images/
│       └── logo.png
├── package.json
└── README.md

What’s a Path?

A path is the address of a file or folder. It tells your computer exactly where to find something.

There are two types:

Absolute Paths

An absolute path is the full address from the root of your system.

On Mac/Linux:

/Users/yourname/projects/my-app/src/index.js

On Windows:

C:\Users\yourname\projects\my-app\src\index.js

It’s like a full street address: “123 Main Street, Springfield, IL, USA”

Relative Paths

A relative path is the address from where you currently are.

If you’re in /Users/yourname/projects/my-app/, then:

• src/index.js — goes into src, then finds index.js
• ./src/index.js — same thing (. means “current directory”)
• ../other-app — goes up one level, then into other-app

It’s like directions: “Go two blocks north, then turn left”

Common Path Symbols

Symbol	Meaning	Example
/	Separates folders (Mac/Linux)	src/pages/Home.js
\	Separates folders (Windows)	src\pages\Home.js
.	Current directory	./config.js
..	Parent directory (go up one level)	../styles.css
~	Home directory (Mac/Linux)	~/projects

Why Paths Matter for AI Coding

When working with AI coding tools:

1. Opening projects — You need to open the right folder, not a random one
2. Creating files — The AI needs to know where to create a file
3. Importing code — JavaScript imports use relative paths: import Button from './components/Button'
4. Running commands — Many commands only work when you’re in the right directory

Navigating with Terminal Commands

# See your current path
pwd

# Go into a folder
cd my-project

# Go up one level
cd ..

# Go to a specific path
cd /Users/yourname/projects/my-app

# Go to home directory
cd ~

Project Root

When developers say “project root,” they mean the top-level folder of your project. It’s where files like package.json, .gitignore, and README.md usually live.

Most terminal commands for your project should be run from the project root:

# Navigate to project root first
cd ~/projects/my-app

# Now run commands
npm install
npm run dev

Practical Tips

1. Always know where you are — Run pwd if you’re lost
2. Use Tab completion — Type the first few letters and press Tab to autocomplete paths
3. Drag & drop — On Mac, you can drag a folder into Terminal to paste its path
4. Open folder in editor — In VS Code, use code . to open the current directory
5. Watch for typos — my-project and my_project are different folders

A Quick Example

Say you have this structure:

my-website/
├── src/
│   └── pages/
│       └── about.js
└── package.json

If you’re in my-website/ and want to edit about.js:

• Absolute path: /Users/you/projects/my-website/src/pages/about.js
• Relative path: src/pages/about.js or ./src/pages/about.js

If you’re in my-website/src/ and want to reference package.json:

• Relative path: ../package.json (go up one level, then find the file)

Understanding paths means you’ll always know exactly what file you’re working with — and you can confidently tell your AI assistant which files to create, edit, or delete.