JavaScript + Tools

import { createServer } from "node:http"
import { readFile } from "node:fs/promises"

const tasks = [{ id: 1, text: "learn node", done: false }]

const server = createServer(async (req, res) => {
  const url = new URL(req.url, `http://${req.headers.host}`)
  const json = (status, body) => {
    res.writeHead(status, { "Content-Type": "application/json" })
    res.end(JSON.stringify(body))
  }

  if (req.method === "GET" && url.pathname === "/api/tasks") return json(200, tasks)

  if (req.method === "POST" && url.pathname === "/api/tasks") {
    let body = ""
    for await (const chunk of req) body += chunk            // the body is a stream
    const { text } = JSON.parse(body)
    const task = { id: tasks.length + 1, text, done: false }
    tasks.push(task)
    return json(201, task)
  }

  if (req.method === "GET" && url.pathname === "/") {
    res.writeHead(200, { "Content-Type": "text/html" })
    return res.end(await readFile("index.html"))
  }

  json(404, { error: "not found" })
})

server.listen(3000, () => console.log("http://localhost:3000"))

// node --watch server.js   restarts on change
// curl -X POST localhost:3000/api/tasks -H "content-type: application/json" -d '{"text":"ship"}'

// package.json
{
  "name": "tasks-api",
  "type": "module",
  "scripts": {
    "dev": "node --watch --env-file=.env src/server.js",
    "start": "node src/server.js",
    "test": "vitest run",
    "test:watch": "vitest",
    "lint": "eslint . && prettier --check .",
    "format": "prettier --write .",
    "prepare": "husky"
  },
  "devDependencies": { "eslint": "^9", "prettier": "^3", "vitest": "^3", "husky": "^9", "lint-staged": "^15" },
  "lint-staged": { "*.{js,ts}": ["eslint --fix", "prettier --write"] }
}

// eslint.config.js
import js from "@eslint/js"
export default [
  js.configs.recommended,
  {
    languageOptions: { ecmaVersion: "latest", sourceType: "module", globals: { console: "readonly", process: "readonly" } },
    rules: { "no-unused-vars": "warn", eqeqeq: "error", "no-var": "error", "prefer-const": "error" },
  },
]

// .prettierrc
{ "semi": false, "singleQuote": true, "printWidth": 100 }

// .gitignore
node_modules/
dist/
.env
*.log

import express from "express"

const app = express()
app.use(express.json())                                    // parse JSON bodies
app.use((req, res, next) => { console.log(req.method, req.url); next() })   // middleware: logging

const tasks = new Map([[1, { id: 1, text: "learn express", done: false }]])
let nextId = 2

class HttpError extends Error { constructor(status, message) { super(message); this.status = status } }

app.get("/api/tasks", (req, res) => {
  const { done } = req.query                                // ?done=true
  const list = [...tasks.values()].filter(t => done === undefined || String(t.done) === done)
  res.json(list)
})

app.get("/api/tasks/:id", (req, res) => {
  const task = tasks.get(Number(req.params.id))
  if (!task) throw new HttpError(404, "task not found")
  res.json(task)
})

app.post("/api/tasks", async (req, res) => {
  const { text } = req.body ?? {}
  if (typeof text !== "string" || !text.trim()) throw new HttpError(400, "text is required")
  const task = { id: nextId++, text: text.trim(), done: false }
  tasks.set(task.id, task)
  res.status(201).json(task)
})

app.patch("/api/tasks/:id", (req, res) => {
  const task = tasks.get(Number(req.params.id))
  if (!task) throw new HttpError(404, "task not found")
  Object.assign(task, { done: Boolean(req.body.done) })
  res.json(task)
})

// Error handler: four arguments, registered LAST
app.use((err, req, res, next) => {
  const status = err.status ?? 500
  if (status === 500) console.error(err)
  res.status(status).json({ error: status === 500 ? "internal error" : err.message })
})

app.listen(3000, () => console.log("http://localhost:3000"))

import { useState, useEffect } from "react"

function TaskList() {
  const [tasks, setTasks] = useState([])          // state: React re-renders when it changes
  const [text, setText] = useState("")
  const [loading, setLoading] = useState(true)

  useEffect(() => {                                // side effect: load once after the first render
    fetch("/api/tasks").then(r => r.json()).then(data => { setTasks(data); setLoading(false) })
  }, [])

  async function add(e) {
    e.preventDefault()
    const res = await fetch("/api/tasks", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) })
    const task = await res.json()
    setTasks(prev => [...prev, task])              // immutable update: a NEW array
    setText("")
  }

  function toggle(id) {
    setTasks(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t))
  }

  if (loading) return <p>Loading…</p>

  return (
    <section>
      <form onSubmit={add}>
        <input value={text} onChange={e => setText(e.target.value)} placeholder="What needs doing?" />
        <button disabled={!text.trim()}>Add</button>
      </form>
      <ul>
        {tasks.map(t => (
          <li key={t.id} className={t.done ? "done" : ""}>      {/* key: how React matches items across renders */}
            <input type="checkbox" checked={t.done} onChange={() => toggle(t.id)} />
            {t.text}
          </li>
        ))}
      </ul>
      <p>{tasks.filter(t => !t.done).length} left</p>
    </section>
  )
}

export default TaskList

// npm create vite@latest my-app -- --template react   → a running project in a minute

// types.ts
export interface Task {
  id: number
  text: string
  done: boolean
  tags?: string[]                    // optional
}
export type Status = "all" | "active" | "done"         // a union: only these three strings

// A generic function: works for any T, returns the same T
function firstOr<T>(items: T[], fallback: T): T {
  return items[0] ?? fallback
}

function visible(tasks: Task[], status: Status): Task[] {
  if (status === "all") return tasks
  return tasks.filter(t => t.done === (status === "done"))
}

const tasks: Task[] = [{ id: 1, text: "learn ts", done: false }]
const first = firstOr(tasks, { id: 0, text: "", done: false })   // first: Task
visible(tasks, "active")
visible(tasks, "pending")
// error TS2345: Argument of type '"pending"' is not assignable to parameter of type 'Status'.

function find(id: number): Task | undefined {
  return tasks.find(t => t.id === id)
}
console.log(find(1).text)
// error TS18048: 'find(1)' is possibly 'undefined'.
//   → the bug from Module 11 #1, caught before it runs. Fix: find(1)?.text

// Adopting it: npx tsc --init, rename .js → .ts one file at a time, start with "strict": false, tighten later.
// Or keep .js and add // @ts-check at the top with JSDoc types — checking without a build step.

import pg from "pg"                                      // npm install pg
const pool = new pg.Pool({ connectionString: process.env.DATABASE_URL, max: 10 })

export async function listTasks(done) {
  const { rows } = await pool.query(
    "SELECT id, text, done FROM tasks WHERE ($1::boolean IS NULL OR done = $1) ORDER BY id",
    [done ?? null],
  )
  return rows
}

export async function createTask(text) {
  const { rows: [task] } = await pool.query(
    "INSERT INTO tasks (text) VALUES ($1) RETURNING id, text, done",
    [text],
  )
  return task
}

// Several statements that must succeed or fail together: one client, one transaction
export async function moveTask(id, fromList, toList) {
  const client = await pool.connect()
  try {
    await client.query("BEGIN")
    await client.query("DELETE FROM list_items WHERE list_id = $1 AND task_id = $2", [fromList, id])
    await client.query("INSERT INTO list_items (list_id, task_id) VALUES ($1, $2)", [toList, id])
    await client.query("COMMIT")
  } catch (err) {
    await client.query("ROLLBACK")
    throw err
  } finally {
    client.release()
  }
}

// NEVER: pool.query(`SELECT * FROM tasks WHERE text = '${text}'`)   ← SQL injection

# Dockerfile
FROM node:22-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev

FROM node:22-alpine
WORKDIR /app
ENV NODE_ENV=production
COPY --from=deps /app/node_modules ./node_modules
COPY src ./src
USER node
EXPOSE 3000
CMD ["node", "src/server.js"]

# compose.yaml
services:
  api:
    build: .
    ports: ["3000:3000"]
    environment:
      DATABASE_URL: postgres://app:secret@db:5432/tasks
    depends_on: [db]
  db:
    image: postgres:16
    environment: { POSTGRES_USER: app, POSTGRES_PASSWORD: secret, POSTGRES_DB: tasks }
    volumes: ["pgdata:/var/lib/postgresql/data"]
volumes:
  pgdata:

# docker compose up --build
# docker compose exec db psql -U app tasks

import { describe, test, expect, vi, beforeEach } from "vitest"     // or from "@jest/globals"
import request from "supertest"
import { reducer } from "../src/state.js"
import { app } from "../src/app.js"

describe("reducer", () => {
  test("adds a task and advances the id", () => {
    const next = reducer({ tasks: [], nextId: 1 }, { type: "add", text: "ship" })
    expect(next.tasks).toEqual([{ id: 1, text: "ship", done: false }])
    expect(next.nextId).toBe(2)
  })
  test("does not mutate the previous state", () => {
    const prev = { tasks: [], nextId: 1 }
    reducer(prev, { type: "add", text: "x" })
    expect(prev.tasks).toHaveLength(0)
  })
})

describe("POST /api/tasks", () => {
  test("creates a task", async () => {
    const res = await request(app).post("/api/tasks").send({ text: "test it" })
    expect(res.status).toBe(201)
    expect(res.body).toMatchObject({ text: "test it", done: false })
  })
  test("rejects empty text", async () => {
    const res = await request(app).post("/api/tasks").send({})
    expect(res.status).toBe(400)
    expect(res.body.error).toMatch(/required/)
  })
})

describe("loadTasks", () => {
  beforeEach(() => { vi.restoreAllMocks() })
  test("throws on a non-OK response", async () => {
    vi.spyOn(globalThis, "fetch").mockResolvedValue({ ok: false, status: 500, json: async () => ({}) })
    const { loadTasks } = await import("../src/client.js")
    await expect(loadTasks()).rejects.toThrow("500")
  })
})

// npx vitest run --coverage

# .gitignore — the JavaScript essentials
node_modules/
dist/
.next/
coverage/
.env
.env.*
!.env.example
*.log
.DS_Store

# The daily loop
git switch -c feat/task-filters          # a branch per change
npm ci                                    # exact versions from the lockfile
# …edit, run tests…
git add -p                                # stage hunks, review your own diff
git commit -m "feat(api): filter tasks by done status"
git push -u origin feat/task-filters      # open a PR; CI runs lint + tests
git switch main && git pull --rebase       # after merge, update main

# .github/workflows/ci.yml — what CI runs on every PR
name: ci
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run lint
      - run: npm test

# Two habits: never commit .env (rotate the secret if you did — it is in the history forever),
# and commit package-lock.json so everyone installs the same tree.