02 Web Stack & First AI Products

What to do Read the Everyday Types, Narrowing, and More on Functions sections of the TypeScript Handbook. Then open src/lib/types.ts and src/lib/content.ts and understand every type declaration.

What counts as complete Able to explain interface, type, ? (optional), as (assertion), generic type parameters, and union/intersection types using examples from src/lib/.

What to do Complete the Next.js Learn course end-to-end. It covers App Router, file-system routing, Server Components, Server Actions, and data fetching — all patterns this portfolio uses.

What counts as complete The course example app is built and deployed, and you can point to equivalent patterns (async RSCs, generateStaticParams, layouts) in this repository's src/app/.

What to do Read the React documentation on Server Components, async components, and the use hook. Understand the server/client boundary — when 'use client' is required.

What counts as complete Can articulate why src/app/page.tsx is a server component without an explicit directive, and why the components in src/components/ are all server components by default.

What to do Read the Tailwind v4 docs, focusing on the CSS-first config model (@theme, @plugin). This is a significant departure from v3's JavaScript config. The portfolio uses both directives.

What counts as complete Can explain the portfolio's theme tokens, use arbitrary-value utilities (bg-[...]), and apply typography plugin directives correctly.

What to do Read the API docs for the four core modules used in the session CLI: node:fs, node:path, node:readline, node:child_process. Then review scripts/study-start.mjs and scripts/study-end.mjs and explain each function call.

What counts as complete Able to reproduce the session-start behaviour (create-or-append a markdown file, open it in an editor) from scratch without referring to the existing code.

What to do Read the Vitest getting-started and mocking guides. Review every *.test.ts and *.test.mjs file in this repository. Understand describe/it/expect, beforeEach/afterEach, and vi.stubGlobal as used in src/lib/github.test.ts.

What counts as complete Able to write a failing test, a passing implementation, and a passing test against fixture data in a tmp directory — the patterns content.test.ts demonstrates.

What to do Work through the unifiedjs Learn materials covering syntax trees (MDAST, HAST) and the unified pipeline. Understand the distinction between parsing, transforming, and stringifying.

What counts as complete Can explain why rehype-raw is in the pipeline (it parses inline HTML like the <details> blocks you are reading right now).

What to do Read the GraphQL schema explorer and the docs on personal access tokens. Inspect the contributionsCollection query in src/lib/github.ts and understand each nested field.

What counts as complete Can modify the query to retrieve different user data (starred repositories, PR counts) and render it somewhere on the portfolio as a minor enhancement.

What to do Read the Vercel docs covering build output, environment variables, deployment environments (production, preview, development), and the GitHub integration. Understand how the portfolio's GITHUB_TOKEN is scoped across environments.

What counts as complete Can deploy a new Vercel project from scratch, configure its environment variables, and explain the difference between preview and production deployments.

What to do Write a substantial technical document walking through every file in src/ and scripts/ — what it does, why it exists, how it connects to the rest. Publish to the portfolio.

What counts as complete A reader can understand the entire portfolio codebase from the writeup alone, without reading the source. This is the forcing function for confidence that the scaffolding is genuinely understood.

What to do Complete all SQLBolt lessons and the Mode Analytics SQL tutorial. Create a free Neon Postgres database and build a small project exercising joins, aggregations, window functions, and indexes. Publish schema and example queries.

What counts as complete Neon project deployed with non-trivial data, README documenting the schema and the five to ten most interesting queries, linked from this portfolio.

What to do Build a Next.js application that is not the portfolio and not a course tutorial. Choose a problem you actually want to solve. Ship to a public repository, deploy on Vercel.

What counts as complete A deployed, reachable Next.js application with its own URL, linked from the portfolio Projects page.

What to do Build a full-stack app with create/read/update/delete operations backed by a real Postgres database. Use Drizzle as the ORM, Next.js App Router for routing and Server Actions, and a free auth provider (Auth.js with a GitHub OAuth provider is lowest-friction).

What counts as complete Live deployment with sign-up/sign-in, at least one resource users can CRUD, persistent storage in Neon, schema migrations managed via Drizzle Kit.

What to do Build a web app that integrates an AI model for a specific user-facing feature. Use the Vercel AI SDK. Free-tier provider (Google Gemini Flash is a good default — generous free quota, no card). Add rate limiting via Upstash Redis (free tier).

What counts as complete Live deployment with a genuine AI feature, README explaining prompt strategy and eval approach, abuse prevention visible.

What to do One of AIP-01 or AIP-02 is the single domain-flavoured project permitted. Choose the domain — education, sports analytics, DJ/audio — and build around a genuine problem within it. The other application stays generic.

What counts as complete The capstone has a domain-specific problem statement in its README and delivers a domain-specific result.

What to do Build a small AI automation using a no-code or low-code tool (Make.com, n8n self-hosted, Zapier). Document the flow in a blog post including a diagram of the nodes and the model prompts used.

What counts as complete A running automation (or detailed teardown if the trigger is private), a public writeup on the portfolio.

What to do Write a Dockerfile and docker-compose.yml for either AIP-01 (the CRUD app) or AIP-02 (the AI-powered app). Include the application itself plus its Postgres dependency. Build and run the container locally; confirm parity with the Vercel deployment. Publish a short writeup on the portfolio covering image layers, the multi-stage build pattern, and the differences between a Docker-run instance and the Vercel Functions runtime.

What not to worry about

• Shipping a Docker-based production deployment. Vercel remains the production host. Docker is for demonstrating containerisation fluency.
• Kubernetes. Not required at junior level.

What counts as complete A working Dockerfile and docker-compose.yml in the chosen project's repository. A short technical writeup on the portfolio covering image layers, build caching, and the runtime differences between the container and Vercel.

Why this exists Docker appears in roughly 70% of UK junior software and AI postings (MARKET_CRITERIA.md §A). Vercel alone does not signal containerisation fluency — this task closes that gap cheaply.

What to do Write an honest self-review at the mid-point of the programme. Compare what has shipped against the job-market criteria research in the planning documents. Identify gaps, calibrate the rest of the programme, publish to the portfolio.

What to do Add approximately fifteen engineers at UK companies whose stack matches the Phase 2 projects — TypeScript, Next.js, Vercel AI SDK, Postgres, Python. Each connection request references a specific shipped portfolio project (AIP-01 or AIP-02). Use template 3 in content/linkedin-templates.md ("junior engineer at a target-stack company").

What not to worry about

• Seniority. Mid-level engineers are ideal targets — they read connection requests and are not yet inundated.
• Acceptance rate. 30-50% is normal for "strangers with a reason".

What counts as complete Fifteen personalised connection requests sent, each referencing a specific shipped portfolio project. Outcomes tracked privately. This is the first batch of strangers-with-a-reason outreach — the reason is that something has been shipped.

Why this phase Before Phase 2, there is no shipped work to reference. Attempting target-company outreach earlier produces lower acceptance and weaker signal. After shipping AIP-01 and AIP-02, each request anchors to a concrete artefact.

What to do Short professional LinkedIn post when Phase 2 closes. Template in content/linkedin-templates.md. Include links to specific shipped projects.

What to do One LinkedIn post per shipped project, published when the project goes live. Lead with the problem and the result, not the tech stack.

What to do Public calibration note at the programme's mid-point — what is on track, what is lagging, what has changed. Demonstrates reflective practice.