Claude Code: Building Faster with AI, from Prototype to Prod

Prototype a simple web app rapidly with a basic database backend using vibe coding, then productionize by adding source control, Docker packaging, and production-grade tooling with Claude code.

Build the front end of an online radio station that streams lossless HLS audio, displays metadata and album art, and supports a PostgreSQL-backed rating API in a production docker setup.

Set up a local development environment using Express.js and SQLite to prototype a web server and back-end, run locally, test with curl or wget, and track costs.

Explore the nondeterminism of AI and why same prompts can yield different results in cloud code. Learn to apply judgment and adjust steps to debug and reproduce outcomes across sessions.

Prototype a radio web player that streams a lossless HLS feed with HLS JS, using SQLite and Express.js, guided by a downloaded layout, logo, and style guide.

Redesign the Radio Chalco player into a self-contained widget with a single playback control, now playing details, stream quality, ratings, and a concise history of previous tracks.

Add a now playing widget and a recently played widget that fetches metadata from metadata v2 JSON file every 10 seconds, displaying the song, artist, album, year, and audio quality.

Debug the recently played widget with Claude, fix data format issues, fetch current metadata, integrate album art into the now playing widget, and ensure functionality for production.

Add a thumbs up/down ratings feature with a Flask API on SQLite backend, including a ratings table, UI, and logic to submit, display totals, and prevent duplicate ratings by user.

Apply the Radio Calico style guide to the site UI/UX with Claude, adjusting CSS, colors, fonts, and the logo to match the target layout, and test locally on localhost:3000.

Translate a wireframe image into a live user interface and user experience by iterating the header, main content, and audio player, balancing static design with real-time metadata updates and debugging.

Refine the site ui by removing the year overlay on album art and moving the player to the right of the art under the ratings widget, matching the style guide.

Learn to integrate Claude code with Visual Studio Code, enabling easier diffs and edits, and generate a Claude memory file to retain project context.

Refactor the monolithic express.js app by extracting CSS into styles.css and JavaScript into script.js, update index.html, verify locally, and update claude.md with the new front-end architecture and style guide.

Explore Claude Code integration with GitHub via cloud code, enabling AI-powered code reviews, issue fixing, and PR automation through GitHub Actions.

Learn to connect Claude Code to GitHub by configuring git, creating a private repository, generating a personal access token, and generating a readme with an initial commit and push.

Integrate Claude Code with GitHub actions to automate code reviews and auto-fix issues in pull requests, using cloud code AI to analyze security, quality, performance, and bugs.

Shows resolving a hard-coded audio quality bug via a GitHub issue, Claude, and GitHub actions to implement, review, and merge a dynamic fix with automated testing.

Use Claude Code to automatically generate a Jest-based unit testing framework for a frontend and backend ratings system, with isolated tests, DOM testing without browser dependencies, and npm test.

Containerize your project with Docker to production ready, build dev and prod images, and replace SQLite and Node.js with nginx and PostgreSQL.

Dockerize Claude's app, fix the health check by including curl in the production image, review and merge the PR, and correct docker compose references in documentation for production release.

Learn to upgrade a docker-based prototype to production-grade infrastructure using nginx and PostgreSQL, with automated and unit testing, dockerized dev and prod environments, and documentation updates.

Add security scanning using npm audit and a make target to run security tests, integrate unit tests, and bake these checks into a GitHub Actions CI/CD pipeline for production-grade deployments.

Integrate unit tests, security scans, and lint into the GitHub actions workflow to automatically run on code submissions and validate the existing tests with CI.

Debug Claude's CI implementation by iteratively fixing unit tests, security scans, and docker security checks, while updating defaults and validating the CI/CD pipeline for production readiness.

Analyze and optimize page speed with Claude Code by implementing asset minification, caching, and efficient loading strategies, including moving scripts, image optimization, and production build integration.

Use Claude to generate architecture diagrams in mermaid or markdown, showing production and development environments, database schema, request flow, security, performance, and tech stack.

Define and deploy subagents in Claude Code to automate task-specific reviews, security checks, and debugging, using dedicated text files and guided setup for reusable, cross-project workflows.

Explore model context protocol (MCP) with cloud code to plug external systems like notion, via http, ssh, or local servers, and manage authentication, scope, and commands.