Terminal Basics

Navigation

pwdShow current folder

lsList files in folder

cd folderNameGo into a folder

cd ..Go up one level

cd ~Go to home directory

Files & Folders

mkdir nameCreate a new folder

touch file.txtCreate a new file

rm file.txtDelete a file

rm -rf folderDelete folder (careful!)

cp a.txt b.txtCopy file

mv a.txt b.txtMove / rename file

Useful

clearClear the terminal

Ctrl + CStop running process

↑ arrowLast command

code .Open VS Code here

Git

Everyday Flow

git statusSee what changed

git add .Stage all changes

git commit -m "msg"Save with a message

git pushSend to GitHub

git pullGet latest from GitHub

Branches

git branchList branches

git checkout -b nameCreate + switch branch

git checkout mainSwitch to main

git merge nameMerge branch into current

Undo

git restore fileUndo unsaved changes

git reset HEAD~1Undo last commit (keep files)

git log --onelineSee commit history

Tip: Always git pull before you start working to avoid conflicts.

npm / Node.js

Your Project

npm run devStart local dev server

npm run buildBuild for production

npm run previewPreview production build

Packages

npm installInstall all dependencies

npm install pkgAdd a new package

npm install -D pkgAdd dev-only package

npm uninstall pkgRemove a package

npm updateUpdate all packages

Info

node -vCheck Node version

npm -vCheck npm version

npm listList installed packages

Tip: If something breaks, try deleting node_modules then run npm install again.

Supabase CLI

Setup

npx supabase loginLog in to Supabase

npx supabase initSet up Supabase in project

npx supabase linkLink to your project

Database

supabase db pullPull remote schema locally

supabase db pushPush local schema to remote

supabase db resetReset local DB

Local Dev

supabase startStart local Supabase

supabase stopStop local Supabase

supabase statusCheck what's running

Your Project ID

tqczkvytkkrfomyosbjpSupabase project ID

Tip: Your Supabase keys live in .env — never commit that file to GitHub.

Tailwind CSS

Your Brand Colors

bg-navy-950Darkest bg (#00001a)

bg-navy-900Card bg (#0a0e12)

text-red-500Primary red (#e4002b)

text-blue-600Accent blue (#1153d8)

landing-text-goldGold class (CSS var)

Layout Essentials

flex items-centerHorizontal + centered

grid grid-cols-22-column grid

gap-4Space between items

p-4 / px-4 / py-4Padding all/x/y

mx-autoCenter horizontally

max-w-7xlMax width container

Typography

font-blackWeight 900

tracking-tightTight letter spacing

text-gray-300Body text color

uppercaseALL CAPS text

Responsive Prefixes

sm: md: lg: xl:Breakpoint modifiers

hover: focus:State modifiers

React Components

Find & Edit a Component

src/components/All components live here

src/pages/Page-level components

Ctrl+Shift+FSearch all files in VS Code

Ctrl+PFind file by name (VS Code)

Component Anatomy

import X from './X'Bring in a component

export default XMake component usable

const [x, setX] = useState()Local state

useEffect(() => {}, [])Run on load

Your Key Components

SupabaseVideoGalleryPulls videos from DB

WhyParentsTrustTestimonials section

MagneticButtonAnimated CTA button

TextRevealAnimationHeadline animation

Modify a Class Globally

index.cssCSS vars + components

tailwind.config.jsColors, fonts, spacing

Tip: Change a color in tailwind.config.js and it updates everywhere that class is used — no find/replace needed.

COACH STEVE — DEV CHEAT SHEET