The CodeKits notebook
Ideas into working code.
Practical tutorials, project walkthroughs and development notes. Explore the code, understand the structure, and build something of your own.
116 articles · Newest first
Tutorials
Automate Transactional Emails with Node.js
Learn automate transactional emails with node.js: follow the implementation sequence, understand the boundaries and verify each important result.
· 9 min read
Tutorials
Build an Email Admin Workspace
Learn build an email admin workspace: follow the implementation sequence, understand the boundaries and verify each important result.
· 10 min read
Tutorials
Design a Remote Desktop App with Rust
Learn design a remote desktop app with rust: follow the implementation sequence, understand the boundaries and verify each important result.
· 9 min read
Tutorials
Mac and Unix Terminal Basics
Learn mac and unix terminal basics: follow the implementation sequence, understand the boundaries and verify each important result.
· 9 min read
Tutorials
Secure Ubuntu Server Without Losing Access
Learn secure ubuntu server without losing access: follow the implementation sequence, understand the boundaries and verify each important result.
· 9 min read
Tutorials
Set Up a New Ubuntu Server VPS
Learn set up a new ubuntu server vps: follow the implementation sequence, understand the boundaries and verify each important result.
· 10 min read
Tutorials
SSH Keys and SCP for Your First VPS
Learn ssh keys and scp for your first vps: follow the implementation sequence, understand the boundaries and verify each important result.
· 9 min read
Tutorials
Ubuntu Desktop Setup for Beginners
Learn ubuntu desktop setup for beginners: follow the implementation sequence, understand the boundaries and verify each important result.
· 11 min read
JavaScript
React Expense Tracker with Node.js and MySQL
Build an expense tracker with a shared Node.js and MySQL API, precise money handling, secure accounts and predictable web and iPhone updates.
· 11 min read
Swift
SwiftUI Expense Tracker with Node.js and MySQL
Build an expense tracker with a shared Node.js and MySQL API, precise money handling, secure accounts and predictable web and iPhone updates.
· 11 min read
Web development
Deploy to Ubuntu with GitHub Actions
A practical walkthrough of deploy to ubuntu with github actions, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Next.js Bookings Without Double Booking
A practical walkthrough of next.js bookings without double booking, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Stripe Checkout and Verified Webhooks
A practical walkthrough of stripe checkout and verified webhooks, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Password Reset and Email Verification
A practical walkthrough of password reset and email verification, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Build a React CRM with MySQL
A practical walkthrough of build a react crm with mysql, with code excerpts, failure checks and integration guidance.
· 4 min read
Web development
React CRUD with Node.js and MySQL
A practical walkthrough of react crud with node.js and mysql, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
React Login with Node.js and MySQL
A practical walkthrough of react login with node.js and mysql, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
React Real-Time Notifications with SSE
A practical walkthrough of react real-time notifications with sse, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Image Uploads with React and Node.js
A practical walkthrough of image uploads with react and node.js, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Admin Roles and Record Permissions
A practical walkthrough of admin roles and record permissions, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
SwiftUI Login with a Node.js API
A practical walkthrough of swiftui login with a node.js api, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Offline Reading in a SwiftUI App
A practical walkthrough of offline reading in a swiftui app, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Tauri Desktop with Rust and React
A practical walkthrough of tauri desktop with rust and react, with code excerpts, failure checks and integration guidance.
· 5 min read
Web development
Back Up and Restore an Ubuntu MySQL App
A practical walkthrough of back up and restore an ubuntu mysql app, with code excerpts, failure checks and integration guidance.
· 5 min read
JavaScript
Dockerise React, Node.js and MySQL
Package React, Node.js and MySQL with Docker Compose, then check networking, persistent storage, health checks and recovery.
· 9 min read
Web development
Choose a Stack: Next.js, React, Swift, Rust and Node.js
Compare Next.js, React, SwiftUI, React Native, Rust and Tauri, and learn how web, mobile and desktop clients share an API and MySQL database.
· 9 min read
React
Build a React Dashboard with Node.js, MySQL and ChatGPT
Build a React task dashboard with a Node.js API and MySQL. Includes Ubuntu deployment, optional Phoenix integration, video, source and code sheets.
· 10 min read
Next.js
Build Next.js with Magic UI, MySQL and an Ubuntu VPS
Build a Next.js catalogue with Magic UI and MySQL, then deploy on Ubuntu with Nginx and HTTPS. Includes video, starter source and PDF code sheets.
· 8 min read
iOS
Build an iOS App with SwiftUI, Node.js and MySQL
Build a SwiftUI iPhone catalogue with a Node.js API, MySQL, Nginx and HTTPS on Ubuntu. Includes video, starter source and PDF code sheets.
· 10 min read
Ubuntu
Deploy React, Node.js and MySQL on One Ubuntu VPS
Deploy React, a Node.js API and MySQL on Ubuntu with Nginx and HTTPS. Includes a captioned video, starter source and PDF command sheets.
· 20 min read
Web development
Test HTTP APIs with a practical curl command sheet
Practise HTTP status, headers, JSON requests and authentication with a local curl lab before diagnosing a production API.
· 4 min read
Ubuntu
Debug a service that works only in your shell
Find why a Node app works in your terminal but fails under systemd by checking paths, identity, environment, permissions and service lifecycle.
· 5 min read
Ubuntu
Point a domain at your VPS and debug DNS
Connect a domain to an Ubuntu VPS, compare DNS answers and separate IPv6, certificate and reverse-proxy failures with practical commands.
· 5 min read
Security
Hashing, encoding and signatures for app developers
Distinguish Base64, file hashes, encryption and signatures with small Node tests, then choose the right tool for application security.
· 5 min read
Security
Your first-hour server incident command sheet
Record a suspected Ubuntu server incident, preserve bounded diagnostic evidence and plan containment without destroying useful context.
· 5 min read
Ubuntu
Linux permissions for deployed applications
Diagnose Linux app permissions with ownership, directory traversal and service-account checks, then separate readable code from writable application data.
· 5 min read
Ubuntu
A Linux terminal command sheet for web developers
Learn the Linux commands behind an app deployment: paths, quoting, files, pipes, exit codes and safe inspection, with a small disposable exercise.
· 5 min read
MySQL
Move a MySQL app, uploads and keys to a new VPS
Move a MySQL-backed app safely with a stopped-writer backup, private uploads, preserved encryption keys, empty-target restore and cutover checks.
· 6 min read
Ubuntu
Manage a Node backend with PM2 on Ubuntu
Run a named Node backend with PM2, verify its account and health, persist the correct startup list, and rehearse targeted restart and rollback.
· 5 min read
Web development
Build liveness and readiness checks for Node
Build a local Node health-check demo with bounded readiness probes, failure tests and graceful draining, without leaking database details.
· 5 min read
Security
Keep production configuration out of public code
Separate browser, build and runtime configuration, protect environment files, and diagnose missing settings without printing private values.
· 6 min read
Ubuntu
Read Linux network state without guessing
Use ip, ss and local HTTP checks to understand interfaces, routes, listeners and IPv4 versus IPv6 before changing your Ubuntu server.
· 5 min read
Security
Review your Ubuntu server's exposed services
Compare Ubuntu listeners, host firewall rules and provider controls with the services you intended to publish, without broad scanning.
· 5 min read
Ubuntu
Copy and verify a release with rsync
Copy a reviewed app revision into an inactive VPS release with rsync dry runs, explicit exclusions, checksum comparison and a separate promotion step.
· 5 min read
Ubuntu
Patch Ubuntu with a tested restart plan
Plan Ubuntu updates around backups, package review, controlled restarts and post-reboot checks so maintenance has a clear acceptance and recovery path.
· 5 min read
Ubuntu
From renting a VPS to a production app
Follow a practical Ubuntu VPS learning path: choose a server, deploy a frontend and API, protect MySQL, verify releases and practise recovery.
· 6 min read
Web development
Add email attachments and inline CID images
Compose private email attachments and inline CID images with bounded files, server-owned storage paths and local MIME tests before delivery.
· 4 min read
Swift
Add photo and file attachments to SwiftUI
Separate photo and document selection from upload, stage private files safely, and show loading, cancellation and unsupported-format failures.
· 4 min read
Next.js
Add resumable uploads with progress and cancellation
Build resumable upload progress around server-confirmed chunks, distinguish pause from cancel, and recover safely after an uncertain response.
· 4 min read
React
Create an animated offer badge in brand colours
Create a restrained branded offer badge with shared animation timing, stable layout and a static reduced-motion experience.
· 4 min read
Next.js
Add canonical URLs, social cards, RSS and sitemaps
Give a Next.js blog consistent canonical URLs, share images, RSS and sitemap entries using one published-post collection and real dates.
· 3 min read
Next.js
Add drafts and scheduled blog publication
Use one publication rule for blog pages, listings, RSS and sitemaps, then account for timezone boundaries and cached pages when scheduling posts.
· 4 min read
Next.js
Resize blog images and remove camera metadata
Prepare blog images with bounded uploads, orientation correction, WebP resizing and metadata removal while keeping useful alt text and captions.
· 4 min read
Web development
Build an honest sent-email history
Model queued, accepted, rejected and unconfirmed email attempts without confusing SMTP acceptance with delivery to the recipient's inbox.
· 4 min read
Swift
Build an iOS terminal toolbar with SwiftTerm
Add Esc, Tab, Ctrl and arrow controls to a SwiftTerm terminal without confusing user input with output or hard-coding every cursor mode.
· 4 min read
Security
Build browser-encrypted one-time text links
Encrypt text in the browser, put the random key in a URL fragment, and combine ciphertext storage with explicit one-time retrieval and trust limits.
· 4 min read
React
Build a code preview with a project file tree
Build a small file explorer that shows safe code text, selected filenames and reliable copy feedback without pretending to be an IDE.
· 4 min read
Next.js
Build expiring download links with Next.js and MySQL
Design expiring private download links with random bearer tokens, hashed lookup values, database expiry and authorization at the download boundary.
· 4 min read
Next.js
Build Next.js on a memory-limited VPS
Measure Next.js build memory, distinguish heap failures from OOM kills, and reduce avoidable work without silently skipping validation.
· 4 min read
Next.js
Clean up expired uploads without deleting active files
Use explicit upload states and expiring claims to clean abandoned data, retry storage failures and reconcile orphans without racing active transfers.
· 4 min read
React
Build a client-enquiry dashboard with filters
Turn client enquiries into a useful React work queue with status filters, clear empty states and server-authorized updates.
· 3 min read
Swift
Connect a SwiftUI screen to a Node.js API
Load a small JSON API in SwiftUI with explicit loading, empty and failure states, response validation, cancellation and a retry action.
· 4 min read
Security
Create useful audit logs without recording secrets
Create structured audit events with allowlisted actions and internal identifiers, while excluding tokens, credentials, request bodies and private messages.
· 4 min read
Web development
Deliver protected downloads after verified payment
Separate payment verification from file access with durable entitlements, scoped download tokens, expiry checks and private storage.
· 4 min read
Ubuntu
Deploy a frontend, backend and database together
Connect a frontend, API and MySQL through an explicit deployment contract, private credentials, readiness checks and compatible migrations.
· 4 min read
Next.js
Deploy Next.js on Ubuntu with Nginx and systemd
Deploy a Next.js release behind Nginx on Ubuntu, run it as an unprivileged systemd service, add HTTPS and verify each layer.
· 4 min read
Ubuntu
Diagnose Nginx 502 errors after deployment
Trace a 502 from Nginx to the listening port, systemd process and application logs, then distinguish refusal, timeout and upstream errors.
· 4 min read
Web development
Email multiple recipients without exposing addresses
Choose between individual delivery and Bcc, validate a deliberately small recipient format, and make address visibility obvious before sending.
· 4 min read
Security
Encrypt sensitive MySQL fields in Node.js
Use authenticated field encryption with record-bound context, versioned envelopes and managed keys while keeping database and application threats distinct.
· 4 min read
React
Fix iPhone form auto-zoom with readable inputs
Build readable iPhone forms by checking computed font size and viewport behaviour, while preserving pinch zoom and accessible text scaling.
· 4 min read
React
Fix a mobile menu that jumps to the top
Keep a mobile menu from jumping the page: save scroll position, restore body styles, and test focus, long menus and React cleanup.
· 4 min read
React
Fix React videos that pause or restart
Diagnose React video interruptions by separating remounts, source changes and playback effects, while respecting a viewer's pause choice.
· 4 min read
Web development
Handle Stripe webhook retries without duplicate orders
Verify Stripe webhooks and make order fulfilment idempotent with a database constraint, transactional outbox and deliberate replay tests.
· 4 min read
Web development
Keep checkout prices under server control
Accept product choices from the browser, resolve trusted Stripe prices on the server, and test tampered quantities and stale catalogue entries.
· 4 min read
Ubuntu
Find Linux ports, processes and systemd services
Trace a Linux listening port to its process and systemd unit, distinguish bindings and connections, and avoid killing the wrong service.
· 4 min read
Next.js
Make download limits safe under concurrent requests
Use atomic database claims for limited downloads, define whether attempts or sessions count, and handle retries and ranges without overselling delivery.
· 4 min read
Security
Make read-once links race-safe with MySQL
Serialize one-time secret consumption with an InnoDB row lock, commit before responding, and document why at-most-once retrieval cannot guarantee delivery.
· 4 min read
Next.js
Move a PHP blog to Next.js and keep its URLs
Move a PHP blog to Next.js with an explicit URL inventory, permanent redirects, preserved publication dates and a tested rollback plan.
· 4 min read
React
Build mobile navigation with reachable links
Make long mobile navigation labels usable with wrapping, visible focus and scrollable menus, then test narrow screens and enlarged text.
· 4 min read
Ubuntu
Monitor HTTPS certificate expiry and renewal
Check the certificate visitors actually receive, test Certbot renewal separately, and rehearse an expiry alert without breaking HTTPS.
· 4 min read
MySQL
Create a MySQL app user and test backup restores
Create a restricted MySQL application account, take a consistent table backup and verify it by restoring into a separate test database.
· 4 min read
MySQL
Add date filters and pagination to MySQL
Build predictable MySQL date filters with UTC boundaries, a stable cursor and indexes, then test duplicate timestamps and page boundaries.
· 4 min read
Web development
Newsletter signup with encryption and unsubscribe
Design newsletter signup with encrypted addresses, explicit confirmation, durable suppression and unsubscribe links that do not need an account.
· 4 min read
Next.js
Build a Markdown blog with Next.js metadata
Create a Markdown publishing pipeline with validated frontmatter, article metadata and readable dates in a Next.js App Router website.
· 4 min read
Rust
Build offline desktop notes with SQLite
Design a local SQLite notes store with parameterised queries, explicit migrations and conflict detection before adding a Rust desktop interface.
· 4 min read
PHP
Build a PHP and MySQL blog with prepared queries
Build a small PHP blog read path with MySQL prepared statements, escaped HTML output and a deliberate boundary between public pages and editing.
· 3 min read
React
Show portrait app demos without cropping
Fit a portrait app demo into a responsive dialog with contain sizing, safe-area spacing, native controls and a clear mobile test checklist.
· 4 min read
Security
Protect admin APIs and private downloads
Enforce authentication and object-level authorization at every server entry point, with negative tests for direct API calls and private-file access.
· 4 min read
Swift
Reconnect iOS SSH after backgrounding
Model SSH reconnection explicitly, reject stale connection results, and distinguish a surviving tmux session from an active iOS network connection.
· 4 min read
Next.js
Resume large uploads after iPhone browser suspension
Recover mobile uploads using server-confirmed chunks and explicit resume actions, without promising that iPhone browsers keep uploading in the background.
· 4 min read
Security
Revoke temporary links and understand the limits
Implement server-side link revocation with owner-scoped updates, explicit cache policy and a clear distinction between future grants and existing copies.
· 4 min read
Security
Rotate encryption keys without losing records
Introduce a new write key without breaking old ciphertext, migrate records with conflict checks, and prove historical backups remain recoverable.
· 4 min read
Ubuntu
Route several apps through one Nginx domain
Route a website, API and WebSocket through one Nginx hostname with explicit prefix handling, forwarding headers and predictable tests.
· 4 min read
Rust
Run Rust jobs with progress and cancellation
Build cooperative cancellation into a Rust worker and report bounded progress without blocking the desktop interface or promising instant stops.
· 3 min read
Rust
Build a Rust file renamer with a dry run
Build and test a Rust rename planner that previews every change, rejects collisions and leaves files untouched until a separate apply step.
· 3 min read
Rust
Read large log files with bounded Rust buffers
Read a bounded preview of a large log in Rust, avoid unbounded line allocations and keep truncation and text-decoding limits visible.
· 3 min read
Rust
Build a desktop app with Rust, Tauri and React
Create a Tauri 2 desktop starter with a React interface and a small Rust command, then understand packaging, permissions and platform limits.
· 3 min read
Web development
Save contact enquiries and queue email notifications
Save enquiries durably in MySQL before sending email, using a transactional outbox so notification failures do not silently lose customer messages.
· 4 min read
Ubuntu
Create server-health alerts with systemd timers
Build a bounded server-health check with deduplicated email alerts, recovery notices and a systemd timer, then test without harming services.
· 4 min read
Swift
Share contacts with QR codes in SwiftUI
Generate a bounded contact QR payload, validate scanned data, and require confirmation before adding a contact or contacting a server.
· 4 min read
Next.js
Stage a Next.js release and roll back safely
Build Next.js in a separate release directory, smoke-test before promotion and restore a known-good release without overwriting live files.
· 4 min read
Security
Stop link previews from consuming one-time secrets
Keep landing-page GET and HEAD requests non-consuming, require an explicit reveal POST, and avoid mistaking preview protection for recipient authentication.
· 4 min read
Swift
Store iOS credentials in Keychain with Swift
Save, read, replace and delete a credential with a small Swift Keychain wrapper, explicit accessibility and useful handling of OSStatus failures.
· 4 min read
Next.js
Stream large uploads in Next.js
Stream bounded upload chunks into private storage, reject oversized bodies, and handle partial writes without holding the complete file in memory.
· 4 min read
Next.js
Stream ZIP downloads without buffering whole folders
Design a streaming ZIP export with an authorized immutable manifest, bounded resources, backpressure and explicit handling of interrupted archives.
· 4 min read
React
Switch light and dark themes without a flash
Set a saved or system colour theme before first paint, keep browser controls in sync, and avoid hydration and reduced-motion pitfalls.
· 4 min read
Rust
Validate inputs to Tauri and Rust commands
Validate Tauri command inputs in Rust, keep native operations narrowly scoped and test failures before adding filesystem or shell access.
· 3 min read
TypeScript
Build a portfolio from typed project data
Keep portfolio dates, screenshots, technologies and project links in typed data so cards and detail pages stay consistent as the site grows.
· 3 min read
Ubuntu
Set up an Ubuntu VPS without locking yourself out
Prepare an Ubuntu VPS with a sudo user, tested SSH keys, updates and UFW rules while keeping a working recovery path throughout.
· 4 min read
Next.js
Upload folders and preserve their directory tree
Preserve a selected folder's relative paths while rejecting traversal, duplicate portable names and file-directory conflicts before storing any bytes.
· 4 min read
Swift
Upload large iOS files with progress and cancellation
Upload from a staged file, report transport progress honestly, handle cancellation, and understand the extra lifecycle work of background URLSession.
· 4 min read
Swift
Verify SSH host fingerprints in an iOS client
Separate first-use trust from known-host verification, compare the correct SSH key bytes, and stop on changed keys before authentication continues.
· 4 min read
Web development
Build a visitor map with approximate locations
Turn approximate IP-derived locations into an aggregated visitor map without presenting network estimates as someone's precise position.
· 4 min read
Ubuntu
Run a website, Node API and MySQL on one VPS
Plan a small single-VPS stack with clear service boundaries, memory and connection budgets, durable storage and a realistic recovery plan.
· 4 min read
Mac
Create an encrypted USB folder for app archives
Use Disk Utility to make a 256-bit AES sparse bundle on a USB stick and keep old app versions locked inside it.
· 4 min read
Web development
Building a Digital Product Store with Next.js and Stripe
A practical look at selling software products with Next.js, Stripe Checkout, MySQL, and automated email.
· 2 min read