Library — DistroSource

Everything digital. One source.

894 resources

Learning path · Beginner · 6h
Interface design that people can use
From a job to be done to a tested interface: structure, hierarchy, states, copy and a usability test.
- Design interfaces that guide people to their goal, with clear hierarchy, complete states and words that help.
- Skills: Defining the job and the primary action, Visual hierarchy and layout, Designing every state, Interface copy, Running a usability test
Time 6h
Cheat sheet · Beginner · 5 min
SaaS building blocks cheat sheet
The tables, flows and services every SaaS needs. 4 sections, 17 entries.
- Data
- Billing
- Admin
Entries 17
Lab · Advanced · 1h
Lab: Webhook chaos
Send your billing webhook handler out-of-order, duplicated and malformed events and confirm the subscription state stays correct.
- Your handler works on the happy path. Providers do not deliver the happy path.
Tasks 4
Project · Advanced · 16h
Project: A paid SaaS with two plans
Build and deploy a SaaS with accounts, two plans with limits, subscription billing via webhooks, an admin customer view and the operational basics.
- Ship a small SaaS: users and accounts, two plans with one enforced limit, checkout and webhook-driven activation with idempotency, a cancel-at-period-end flow, an admin customer screen with two audited actions, and the five operational services. Deploy it and take one real test payment.
- Milestone 1: Model and access
- Milestone 2: Billing
Learning path · Advanced · 12h
Build a SaaS end to end
The parts every SaaS needs — accounts, plans, billing, admin, operations — built in order on a small real product.
- Build a multi-user SaaS with plans, subscription billing, an admin area and the operational basics, and deploy it.
- Skills: Data modelling for accounts and plans, Subscription billing via webhooks, Entitlements and access control, Admin tooling, Operations: logs, backups, monitoring
Time 12h
Cheat sheet · Beginner · 5 min
Web fundamentals cheat sheet
HTML, CSS and performance rules on one screen. 4 sections, 16 entries.
- HTML
- Accessibility
- Layout
Entries 16
Lab · Beginner · 30 min
Lab: Keyboard-only session
Use a site with the mouse unplugged and log every control that cannot be reached or operated.
- Before a redesign, you need a list of the accessibility failures on the current site.
Tasks 3
Project · Beginner · 6h
Project: An accessible, responsive landing page
Build a landing page with semantic structure, keyboard-accessible interaction, a fluid layout and measured performance.
- Build a landing page for a product with a header, hero, feature grid, pricing cards, FAQ disclosures and a signup form. It must pass an accessibility audit, work by keyboard, adapt from 320px to 1600px with at most two media queries, and load with good paint metrics.
- Milestone 1: Structure
- Milestone 2: Layout
Learning path · Beginner · 6h
Web fundamentals for people who ship
HTML that means something, CSS that holds up, and the browser behaviour every front-end depends on.
- Build accessible, responsive pages with semantic HTML and modern CSS, and understand how the browser loads and renders them.
- Skills: Semantic, accessible HTML, Modern layout with flexbox and grid, Responsive design without breakpoints everywhere, Forms and validation, Performance basics
Time 6h
Cheat sheet · Beginner · 5 min
TypeScript patterns cheat sheet
The patterns that catch bugs, and the anti-patterns that hide them. 4 sections, 15 entries.
- Modelling
- Narrowing
- Generics
Entries 15
Lab · Intermediate · 30 min
Lab: Find the bug the types missed
Given a module with a runtime bug that loose types allowed, tighten the types until the compiler finds it.
- A pricing function occasionally returns NaN in production. The types say everything is a number.
Tasks 3
Project · Intermediate · 6h
Project: Type a legacy module properly
Take an untyped or loosely typed module and give it precise types: unions, boundaries, strict mode, no any.
- Choose a real module with any, string-typed enums or unchecked JSON. Model its data with discriminated unions and literal types, add schema parsing at its boundaries, enable strict for it, and remove every any and cast. Keep behaviour identical, proven by tests or snapshots.
- Milestone 1: Safety net
- Milestone 2: Model
Learning path · Intermediate · 6h
TypeScript that catches real bugs
Types as a tool for correctness: modelling data, narrowing, generics and strictness that pays for itself.
- Write TypeScript that models data precisely, narrows safely and stays strict without fighting the compiler.
- Skills: Modelling data with unions and literal types, Narrowing with guards, Generics that stay readable, Strict configuration, Typing at boundaries
Time 6h
Cheat sheet · Beginner · 5 min
React decisions cheat sheet
The questions to ask and the usual answers. 4 sections, 16 entries.
- Components
- State
- Effects
Entries 16
Lab · Beginner · 40 min
Lab: Delete the effects
Take a component full of unnecessary effects and remove every one that can be replaced by a computation or a handler.
- A colleague's component has five effects: two sync state from props, one responds to a click, one fetches, one subscribes to resize.
Tasks 3
Project · Intermediate · 8h
Project: A resource library interface
Build the browsing interface for a content library: list, search, filters, detail view, bookmarks — with data from a query library and tests for the key flows.
- Build a React interface that lists resources, filters them by type and difficulty, searches by title, opens a detail view, and lets a user bookmark. Data comes from a mock API through a query library. Write tests for filtering, searching and bookmarking.
- Milestone 1: Structure
- Milestone 2: Data
Learning path · Beginner · 8h
React that stays maintainable
Components, state, effects and data — learned by building a real interface and refactoring it as it grows.
- Build interactive React interfaces with sensible state, few effects and components that stay small.
- Skills: Composing components with props and children, Choosing where state lives, Using effects only for synchronisation, Fetching and caching data, Testing components
Time 8h
Cheat sheet · Beginner · 5 min
App Router essentials cheat sheet
Files, boundaries and rules in one place. Check the framework's current docs for API details. 4 sections, 16 entries.
- Files
- Components
- Data and actions
Entries 16
Lab · Intermediate · 30 min
Lab: Find the client bundle bloat
Measure a page's JavaScript, move logic to the server, and measure again.
- A product page ships far more JavaScript than it should because the whole page is a client component.
Tasks 3
Project · Intermediate · 10h
Project: A subscription library app
Build a small app where signed-in members browse resources, save bookmarks and see only what their plan covers.
- Build an app with a public resource list (server-rendered), sign-in, an account area protected on the server, a server action to bookmark, and a plan check that hides full content from members without access. Deploy it with previews.
- Milestone 1: Routes and data
- Milestone 2: Auth and actions
Learning path · Intermediate · 8h
Next.js App Router in practice
Build a real, data-backed app with the App Router: routing, server components, data, actions, auth and deployment.
- Build and deploy a Next.js application with server components, server actions, a database and protected routes.
- Skills: App Router layouts and routes, Server versus client components, Data fetching and caching, Server actions and forms, Deployment with environment variables
Time 8h
Cheat sheet · Beginner · 5 min
Automation building blocks cheat sheet
The concepts and rules for any platform. 4 sections, 17 entries.
- Blocks
- Building
- Reliability
Entries 17ZapierMake
Lab · Beginner · 30 min
Lab: Duplicate hunt
Trigger an automation twice with the same input and prove it does not create duplicates.
- Your form-to-CRM automation is live. A form gets submitted twice by an impatient user.
Tasks 3ZapierMake
Project · Beginner · 6h
Project: Automate one process end to end
Take one manual process from map to live automation with error handling, a manual fallback and a measured saving.
- Choose a recurring process. Map it from three real examples, build the automation one block at a time, add error routing and idempotency, test three samples and one deliberate failure, and run it live for two weeks with a log of runs, failures and time saved.
- Milestone 1: Map and build
- Milestone 2: Harden
ZapierMake

Search