Open Technology

A practical guide to setting up Terminal, VS Code, GitHub, Claude Code, Vercel, and Supabase — from a simple blog with CMS to a full table management app. This guide walks you through each tool with real AI prompts you can drop in immediately.

Tool	Role	Free Tier
⌨️ Terminal	Local dev environment — shell, Node.js, Git, package manager	✓ Always free
VS Code	Editor + AI integration — extensions, workspace config, inline completions	✓ Always free
GitHub	Source control + CI/CD — branches, PRs, Actions workflows	✓ Unlimited public repos
Claude Code	AI pair programmer — reads your codebase, writes files, runs commands	✓ Free tier available
Supabase	DB + Auth + Storage — Postgres, Row Level Security, Realtime	✓ 2 projects, 500MB DB
Vercel	Hosting + CDN — auto-deploy on push, edge functions, preview URLs	✓ 100GB bandwidth/mo
Cloudflare	Edge hosting + CDN — Pages for static/SSR, Workers for serverless logic	✓ Unlimited requests
✦Penpot	UI design tool — open-source Figma alternative, design-to-code	✓ Always free
✦CodeSandbox	Cloud dev environment — open any GitHub repo instantly, no local setup	✓ Free personal use

✦ Penpot: Design Before You Build

Before writing a single line of code, sketch your UI in Penpot — the open-source, browser-based Figma alternative that's completely free. Getting your layouts and component structure figured out first saves hours of refactoring later.

🔗 Need a Head Start?

Explore the Next.js template gallery at vercel.com/templates — filter by use case (blog, ecommerce, SaaS, portfolio) to find production-ready starting points. Many include Supabase, Auth.js, or Tailwind already wired up.

01 — GitHub: Version Control & CI/CD

GitHub is where your code lives, where teammates collaborate, and where deployments are triggered. Getting your repository configured properly from day one saves headaches later.

▶ show code

# Authenticate, create repo, and push
gh auth login
git init && git add . && git commit -m "init"
gh repo create my-blog --public --source=. --push

# Force a redeploy on Vercel without a code change
git commit --allow-empty -m "redeploy"
git push

📌 Note

Link your GitHub repo to Vercel and it will auto-deploy every push to main, plus create preview deployments for every pull request. The git commit --allow-empty trick is handy for triggering a fresh deploy when env vars change but your code hasn't.

🦊 GitLab as an Alternative

GitLab works everywhere GitHub does — Vercel and Cloudflare Pages both connect to GitLab repositories. Install the GitLab CLI and swap gh for glab:

▶ show code

brew install glab          # macOS
sudo apt install glab -y   # Ubuntu / WSL2

glab auth login
glab repo create my-blog --public
git remote set-url origin https://gitlab.com/yourname/my-blog.git
git push -u origin main

GitLab's built-in CI/CD (.gitlab-ci.yml) is a strong alternative to GitHub Actions for teams already in the GitLab ecosystem.

02 — Terminal & Claude Code

Everything starts with a good terminal setup. Getting your shell, Node.js, and Git in place takes about 10 minutes — and sets you up for everything that follows.

▶ show code

# macOS — Install Homebrew, then essentials
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node git gh
npm install -g pnpm

# Windows — Install WSL2 (run in PowerShell as Administrator)
wsl --install
# After restart, open Ubuntu and run:
sudo apt update && sudo apt install nodejs npm git -y
npm install -g pnpm gh

# Verify installs
node --version && git --version && gh --version

# Clone an existing repo to a new machine
git clone https://github.com/yourname/my-blog.git
cd my-blog && pnpm install

Claude Code is a terminal-native AI agent that reads your entire codebase, writes files, runs commands, and iterates until the feature works. It's the multiplier that makes one developer feel like a team.

▶ show code

npm install -g @anthropic-ai/claude-code
cd my-blog && claude

🤖AI Prompt — Add Authentication

auth▾

Add Supabase Auth to protect the /admin routes:

/app/(admin)/layout.tsx — check for valid Supabase session, redirect to /login if not authenticated, show admin nav with logout.

/app/login/page.tsx — email + password form, magic link option, redirect to /admin on success.

Supabase Row Level Security policies: posts: anyone can SELECT where published=true posts: only authenticated users can INSERT/UPDATE/DELETE messages: only authenticated users can SELECT

Output the SQL for all RLS policies and Next.js middleware.ts for route protection.

🤖AI Prompt — README and Future Features

docs▾

Read the entire codebase and generate a thorough README.md.

Include:

Project overview (1–2 sentences)
Tech stack table (framework, language, styling, db, auth, hosting)
Local development steps (clone, install, env vars, run dev, first-run setup)
Environment variable reference table (name, required, description)
Folder structure tree with one-line descriptions
Deployment guide (Vercel + Supabase, step by step)
How to add new blog posts
License section (MIT)

Use clean GitHub-flavoured Markdown. Keep steps numbered and concise. Output only the README.md content — no commentary.

Then suggest the highest-impact missing features.

For each suggestion include:

What it is and why users would want it
Rough implementation approach (library or pattern to use)
Estimated complexity: low / medium / high

Areas to consider:

Newsletter subscription or email capture
Reading time estimate on posts
Related posts by tag
RSS feed at /feed.xml
Social share buttons (copy link, Twitter, LinkedIn)
Full-text search across posts
Open Graph / social preview images per post
Comment system (Giscus or Supabase-backed)

Prioritise by: user impact first, then implementation effort.

🤖AI Prompt — Codebase Cleanup and Security Review

refactor▾

Audit this codebase for quality and consistency, then fix every issue found.

Check for:

Unused imports, variables, and dead code paths
Components that could be extracted or consolidated
Inconsistent naming (camelCase vs snake_case, file name casing)
TypeScript: replace all any types with proper interfaces
Magic strings or numbers that should be constants
Duplicate logic that should be a shared utility
Missing or incorrect key props in lists
Console.log statements left in production code
Environment variables referenced without null checks

For each issue: show the file, the problem, and the fix inline. Apply all fixes. Do not change behaviour — refactor only.

Then audit for security vulnerabilities.

Check for:

Supabase RLS policies — are all tables locked down correctly?
Exposed secrets — any API keys hardcoded or in client-side code?
CSRF protection — are mutating API routes protected?
Content Security Policy headers — are they present and correct?
Input validation — are all API route inputs validated with Zod?
SQL injection — any raw query construction?
Auth bypass — can a non-admin reach /admin routes?
Rate limiting — are auth endpoints protected against brute force?

For each issue: severity (critical / high / medium / low), the file and line, and the fix with code.

🤖AI Prompt — Accessibility Review

improve: a11y▾

Audit this Next.js codebase for accessibility issues and fix them all.

Check:

All images have descriptive alt text (not empty, not "image of")
All interactive elements are reachable by keyboard (Tab + Enter/Space)
All form inputs have associated <label> elements
Color contrast meets WCAG AA (4.5:1 for normal text, 3:1 for large)
A visible skip-to-content link appears on keyboard focus
Focus rings are visible — not removed via outline: none
ARIA roles and labels are used correctly (no misuse of role="button")
Error messages are announced to screen readers (role="alert")
Page has a single <h1> per route; heading hierarchy is correct

Show each issue, the file, and the fixed code. Apply all fixes in place — do not leave anything as "TODO".

✦ VS Code: Your Editor

VS Code is more than a text editor — with the right extensions and settings, it becomes an IDE that understands your entire codebase. The key is configuring it once, right.

▶ show code

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension anthropics.claude-code
code --install-extension rangav.vscode-thunder-client
code --install-extension eamodio.gitlens

Essential extensions:

Claude Code or GitHub Copilot — inline AI completions as you type, context-aware suggestions, and whole-function generation without leaving the editor.
Prettier + ESLint — keep code clean automatically. Prettier formats on save, ESLint catches bugs before they reach your teammates.
Thunder Client — test your API routes without leaving the editor. A lightweight Postman alternative built right in.
GitLens — understand every line's history at a glance. Hover any line to see who wrote it, when, and why.

03 — Vercel: Deploy in 30 Seconds

Vercel is the home of Next.js and the fastest way to get your app live. Connect your GitHub repo once, and every push to main automatically deploys.

▶ show code

npm install -g vercel && vercel
# Or connect GitHub at vercel.com/new — 3 clicks

After deploying, go back to Supabase → Authentication → URL Configuration and add your live Vercel URL to the Redirect URLs list.

🔑 Connect Your Supabase Keys

After deploying, go to your Vercel project → Settings → Environment Variables and add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY for all environments. Then trigger a redeploy: git commit --allow-empty -m "add env vars" && git push

💡 Free Tier Reality Check

Vercel Hobby: unlimited personal projects, 100GB bandwidth/month. Supabase free: 2 projects, 500MB database, 1GB storage. This entire stack is free for side projects.

✦ Cloudflare Pages: The Vercel Alternative

Cloudflare Pages is a compelling alternative to Vercel — especially if you want global edge delivery, zero cold starts, and no bandwidth caps. It connects to GitHub just like Vercel and auto-deploys on every push to main. The key difference: your app runs on Cloudflare's edge network in 300+ locations rather than a handful of serverless regions.

▶ show code

# Install the adapter for Next.js on Cloudflare
npm install --save-dev @cloudflare/next-on-pages

# Add the build script to package.json
# "build:cf": "next build && npx vercel-build"

# Deploy via CLI
npx wrangler pages deploy .vercel/output/static
# Or connect GitHub at pages.cloudflare.com — same 3-click flow as Vercel

📌 Next.js on Cloudflare

Cloudflare Pages uses the Edge Runtime — not Node.js. This means fs, path, and some Node-specific APIs aren't available in route handlers. Most Next.js apps work without changes, but check any custom API routes for Node-only imports before switching.

🤖AI Prompt — Cloudflare Pages Config

deploy▾

Set up my Next.js app to deploy on Cloudflare Pages:

Install and configure @cloudflare/next-on-pages
Create wrangler.toml with:
- Project name and compatibility date
- KV namespace bindings for caching
- Environment variable placeholders
Update package.json scripts for:
- Local preview with wrangler pages dev
- Production build for Cloudflare
Create functions/api/contact.ts — a Pages Function that handles contact form POST requests and forwards to Discord webhook or Resend email
.github/workflows/deploy.yml that:
- Runs on push to main
- Builds with next-on-pages
- Deploys to Cloudflare Pages via wrangler

Output all config files ready to commit.

💡 Cloudflare vs Vercel — When to Choose Which

Vercel is the path of least resistance for Next.js — zero config, instant preview URLs, and native ISR support. Cloudflare Pages wins on pricing (no bandwidth charges, no function invocation limits) and is the better fit if you're already using Cloudflare for DNS, Workers, or R2 storage. Both have generous free tiers for side projects.

04 — Supabase: Your Backend in a Box

Supabase gives you Postgres, authentication, file storage, and real-time subscriptions — all with auto-generated TypeScript types and a generous free tier.

▶ show code

brew install supabase/tap/supabase
pnpm add @supabase/supabase-js @supabase/ssr
supabase gen types typescript --project-id YOUR_ID > types/database.ts

Auth Setup Checklist:

Email auth is enabled — confirm under Providers → Email.
Site URL is set — go to Authentication → URL Configuration and set your production domain.
Redirect URLs are configured — add both http://localhost:3000/** and your Vercel URL to the Redirect URLs list. Without this, magic links will be blocked.
API keys are in Vercel — copy NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from Project Settings → API, then add to Vercel Environment Variables.

⚠️ Common Gotcha

If magic links or OAuth logins redirect to an error page, it's almost always a missing redirect URL. Make sure both http://localhost:3000/** and your live Vercel domain are in the Redirect URLs list — the wildcard /** suffix is required.

✦ CodeSandbox: Code From Anywhere

CodeSandbox lets you open any GitHub repo in a full cloud development environment — no local setup required. Perfect for quick edits on the go, onboarding contributors, or testing a branch on a machine that doesn't have your dev environment.

Just prefix any GitHub URL with codesandbox.io/p/github/ and your repo opens in a VS Code-like editor with a running dev server, terminal access, and Vercel preview integration built in.

▶ show code

# Open any GitHub repo in CodeSandbox instantly:
# https://codesandbox.io/p/github/yourname/my-blog

# Or install the browser extension to add an
# "Open in CodeSandbox" button on every GitHub repo page

# Devboxes persist your environment — install deps once,
# resume your session later exactly where you left off

💡 Best Use Cases

Use CodeSandbox when you're away from your main machine, reviewing a PR on a tablet, or want to prototype a component without polluting your local branch. Your .env.local vars can be stored as encrypted secrets in CodeSandbox so your Supabase connection just works in the cloud too.

🤖AI Prompt — CodeSandbox Devbox Config

cloud dev▾

Create a .codesandbox/tasks.json configuration for my Next.js project so it starts correctly every time I open it in CodeSandbox:

Requirements:

Auto-run pnpm install on first open
Start the Next.js dev server on port 3000
Show the preview in the right panel automatically
Set Node.js version to 20 LTS

Also show me:

How to add Supabase env vars as CodeSandbox secrets
How to share a live preview URL with a teammate
The .devcontainer/devcontainer.json equivalent for opening the same environment in GitHub Codespaces

Output all config files ready to commit.

App Development - Launching at Lightspeed with AI

✦ Penpot: Design Before You Build

01 — GitHub: Version Control & CI/CD

02 — Terminal & Claude Code

✦ VS Code: Your Editor

03 — Vercel: Deploy in 30 Seconds

✦ Cloudflare Pages: The Vercel Alternative

04 — Supabase: Your Backend in a Box

✦ CodeSandbox: Code From Anywhere

Get in Touch