Development Tools: Building Your Technical Foundation

Your development environment is where ideas become reality. These five tools form the complete lifecycle of modern web development—from writing code to deploying at scale. I've tested dozens of alternatives; this stack maximizes free tier value while maintaining professional capabilities.

VS Code: Your Command Center

What It Is

Visual Studio Code is Microsoft's free, open-source code editor that has become the industry standard for web development. It's not an IDE in the traditional sense—it's lighter, faster, and infinitely extensible through its marketplace of over 40,000 extensions.

Why This One

Free forever with professional features. Unlike JetBrains' premium IDEs, VS Code gives you 95% of the functionality at 0% of the cost. The extension ecosystem means you can customize it for any language or framework without switching editors.

GitHub Copilot is included for students and open-source contributors. If you have a student email (.edu) or contribute to open-source projects, you get GitHub Copilot free—normally $10/month for AI-powered code suggestions.

Live Share for remote collaboration. Built-in pair programming without screen sharing. Share your editor session with teammates who can edit, debug, and navigate your codebase in real-time.

Setup Instructions

# Debian/Ubuntu
sudo apt install code

# Fedora/RHEL
sudo dnf install code

# Arch
yay -S visual-studio-code-bin

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.autoSave": "onFocusChange",
  "git.autofetch": true,
  "terminal.integrated.fontSize": 14,
  "workbench.colorTheme": "One Dark Pro",
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": true,
  "editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace"
}

GitHub: Version Control and Collaboration

What It Is

GitHub is the world's largest code hosting platform, built on Git version control. It stores your code history, enables collaboration, manages issues and project boards, and serves as your professional portfolio through your public repositories.

Why This One

Industry standard for collaboration. Over 100 million developers use GitHub. Your contributions graph becomes your resume—many employers check GitHub profiles before interviews.

Unlimited private repositories for free. GitHub removed all restrictions on private repos in 2019. Students get GitHub Pro free through the Student Developer Pack, adding advanced features like GitHub Copilot and GitHub Actions minutes.

Integrated CI/CD and project management. GitHub Actions provides 2,000 free build minutes per month. GitHub Projects offers kanban boards, issue tracking, and milestone management—no need for separate tools like Jira.

Setup Instructions

# Generate SSH key pair
ssh-keygen -t ed25519 -C "your_email@example.com"

# Start SSH agent
eval "$(ssh-agent -s)"

# Add private key to agent
ssh-add ~/.ssh/id_ed25519

# Copy public key to clipboard
# macOS
pbcopy < ~/.ssh/id_ed25519.pub

# Windows (PowerShell)
Get-Content ~/.ssh/id_ed25519.pub | Set-Clipboard

# Linux
xclip -sel clip < ~/.ssh/id_ed25519.pub

ssh -T git@github.com

# Set your name (appears in commit history)
git config --global user.name "Your Name"

# Set your email (must match GitHub email)
git config --global user.email "your_email@example.com"

# Set default branch name to 'main'
git config --global init.defaultBranch main

# Enable colored output
git config --global color.ui auto

# Set VS Code as default editor
git config --global core.editor "code --wait"

git config --list

# Initialize new repository
git init

# Clone existing repository
git clone git@github.com:username/repo.git

# Check status of changes
git status

# Stage files for commit
git add .                    # Stage all changes
git add filename.txt         # Stage specific file

# Commit staged changes
git commit -m "Descriptive message"

# Push commits to GitHub
git push origin main

# Pull latest changes from GitHub
git pull origin main

# Create and switch to new branch
git checkout -b feature-name

# Switch between branches
git checkout main

# Merge branch into current branch
git merge feature-name

# View commit history
git log --oneline --graph --all

git clone git@github.com:username/my-first-project.git
cd my-first-project

GitHub Projects for Task Management

GitHub Projects provides free kanban boards integrated with your repositories:

Set up a project board:

1. Go to your repository → Projects → New project
2. Choose "Board" template
3. Customize columns (typically: Todo, In Progress, In Review, Done)
4. Link issues and pull requests by dragging cards
5. Add automation rules (auto-move cards on PR merge, etc.)

Best practices:

• Create issues for all features and bugs (use templates)
• Label issues by type (bug, feature, documentation) and priority
• Assign issues to yourself or collaborators
• Link pull requests to issues with "Closes #123" in PR description
• Use milestones to group related issues for releases

Vercel: Frontend Hosting and Deployment

What It Is

Vercel is a cloud platform for deploying frontend applications with zero configuration. It's built by the creators of Next.js and optimized for modern JavaScript frameworks. Push to GitHub, and your site deploys automatically to a global CDN in seconds.

Why This One

Zero-configuration deployments. Connect your GitHub repo, and Vercel handles everything—build pipeline, CDN distribution, SSL certificates, preview URLs for every pull request. No Docker, no servers, no DevOps knowledge required.

Generous free tier for hobbyists. Unlimited deployments, 100GB bandwidth per month, automatic HTTPS, and preview deployments for every git push. The free tier is legitimately sufficient for most solopreneur projects until you reach significant scale.

Best Next.js support (because they built it). If you're using Next.js, Vercel provides the fastest builds, automatic image optimization, and edge functions without additional configuration.

Setup Instructions

Vercel Alternatives

My recommendation: Start with Vercel for the developer experience. If bandwidth costs become an issue at scale (100k+ monthly visitors), consider migrating to Cloudflare Pages.

Supabase: Backend and Database

What It Is

Supabase is an open-source Firebase alternative providing PostgreSQL database, authentication, file storage, and real-time subscriptions—all accessible via REST and GraphQL APIs. It's a complete backend-as-a-service that eliminates the need to build and maintain your own server infrastructure.

Why This One

PostgreSQL instead of NoSQL. Unlike Firebase's Firestore, Supabase uses PostgreSQL—a mature, SQL-based relational database. You get ACID transactions, foreign keys, joins, and a query language that transfers to any enterprise environment. This is real database knowledge, not vendor-specific NoSQL.

Row-Level Security (RLS) for free. Built-in authorization at the database level. Define policies like "users can only read their own data" directly in PostgreSQL. No middleware, no authorization logic in your application code—the database enforces access control.

Generous free tier that actually works. 500MB database storage, 1GB file storage, 2GB bandwidth per month, unlimited API requests. The free tier doesn't pause or throttle—it's legitimately usable for production projects with moderate traffic.

Setup Instructions

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

npm install @supabase/supabase-js

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

import { supabase } from './lib/supabase'

async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  })
  if (error) throw error
  return data
}

async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })
  if (error) throw error
  return data
}

async function uploadAvatar(file, userId) {
  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(`${userId}/avatar.png`, file)

  if (error) throw error

  // Get public URL
  const { data: { publicUrl } } = supabase.storage
    .from('avatars')
    .getPublicUrl(`${userId}/avatar.png`)

  return publicUrl
}

Supabase Alternatives

My recommendation: Supabase for full-stack projects where you control the data model. Firebase if building mobile-first apps in Google ecosystem. PlanetScale if you only need a database and will build auth/storage separately.

GitHub Actions: CI/CD Pipeline

What It Is

GitHub Actions is a built-in automation platform that runs workflows triggered by events in your repository—commits, pull requests, issues, releases, or scheduled times. It's your CI/CD pipeline, testing suite, and deployment automation all living in your repository as code.

Why This One

Integrated directly into GitHub. No third-party CI services like CircleCI or Travis CI needed. Workflows live in .github/workflows/ as YAML files versioned with your code. Changes to workflows go through pull requests like any other code.

2,000 free build minutes per month. Sufficient for most solopreneur projects. Public repositories get unlimited minutes. If you exceed limits, GitHub Actions is cheaper than alternatives ($0.008/minute vs Jenkins/CircleCI hosting costs).

Massive marketplace of pre-built actions. Over 10,000 community actions for common tasks—deploying to Vercel, sending Slack notifications, running security scans. Don't reinvent the wheel.

Setup Instructions

name: CI Pipeline

# Trigger on push to main and all pull requests
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      # Checkout code
      - uses: actions/checkout@v3

      # Set up Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      # Install dependencies
      - name: Install dependencies
        run: npm ci

      # Run linter
      - name: Run ESLint
        run: npm run lint

      # Run tests
      - name: Run tests
        run: npm test

      # Build project
      - name: Build
        run: npm run build

name: Deploy to Vercel

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

name: Test Coverage

on: [push, pull_request]

jobs:
  coverage:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - run: npm ci

      - name: Run tests with coverage
        run: npm test -- --coverage

      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v3
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          files: ./coverage/lcov.info
          fail_ci_if_error: true

name: Security Audit

on:
  schedule:
    # Run every day at 2 AM UTC
    - cron: '0 2 * * *'
  workflow_dispatch: # Allow manual triggers

jobs:
  audit:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Run npm audit
        run: npm audit --audit-level=high

      - name: Check for outdated dependencies
        run: npm outdated

Common GitHub Actions Use Cases

Automated deployment checklist:

✅ Run tests on every PR ✅ Deploy to staging on merge to develop branch ✅ Deploy to production on merge to main branch ✅ Run security audits daily ✅ Auto-assign reviewers to PRs ✅ Label PRs based on changed files ✅ Send Slack notification on deployment success/failure ✅ Generate release notes automatically

Example: Auto-label PRs by file changes:

name: Label PRs

on: pull_request

jobs:
  label:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/labeler@v4
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          configuration-path: .github/labeler.yml

Create .github/labeler.yml:

documentation:
  - '**/*.md'

frontend:
  - 'src/components/**'
  - 'src/pages/**'

backend:
  - 'src/api/**'
  - 'src/lib/**'

Free Tier Summary: What You Get

Here's everything this development stack provides at zero cost:

VS Code:

✅ Full-featured IDE forever free ✅ Unlimited extensions and customization ✅ GitHub Copilot (if student or OSS contributor) ✅ Live Share collaboration ✅ Built-in Git integration

GitHub:

✅ Unlimited public and private repositories ✅ 2,000 Actions minutes/month ✅ Unlimited collaborators ✅ Project boards and issue tracking ✅ GitHub Pages hosting for static sites

Vercel:

✅ 100GB bandwidth/month ✅ Unlimited deployments ✅ Automatic HTTPS and preview URLs ✅ Edge functions and image optimization ✅ Analytics (Web Vitals)

Supabase:

✅ 500MB database storage ✅ 1GB file storage ✅ 2GB bandwidth/month ✅ Unlimited API requests ✅ Real-time subscriptions ✅ Row-level security

GitHub Actions:

✅ 2,000 build minutes/month ✅ Unlimited workflows ✅ Access to 10,000+ community actions ✅ Matrix builds across OS/versions

Total monthly cost: $0

Optional costs to consider:

• Custom domain: $8-12/year (one-time annual, not monthly)
• GitHub Copilot (if not student/OSS): $10/month
• Additional Vercel bandwidth beyond 100GB: $20/100GB
• Supabase Pro (if exceeding free limits): $25/month

This stack is production-ready for projects serving thousands of users before hitting any paid tiers.

Next Steps

You've set up your complete development environment. In the next chapter, we'll build communication infrastructure with Slack, Discord, and Notion to manage your solopreneur workflow.

Related tutorials in this series:

• Content Production Pipeline (coming soon)
• AI Research Workflow (coming soon)
• Task Exposure Analysis (coming soon)