Skip to content

Conversation

@jsundai
Copy link
Contributor

@jsundai jsundai commented Nov 13, 2025

What does this PR do?

https://temporal-documentation-git-tutorial-layout-money-transfe-0fc0c4.preview.thundergun.io/build-your-first-basic-workflow/build-your-first-workflow

Notes to reviewers

files changed include new components for interaction and sdk boxed logos
wip (TODO: make light mode friendly)
aiming for: concise + engaging, dev-to-dev tone, consistent interactions, progressive disclosure.
next iteration: can include sdk box logos

@jsundai jsundai requested a review from a team as a code owner November 13, 2025 20:00
@vercel
Copy link

vercel bot commented Nov 13, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
temporal-documentation Ready Ready Preview, Comment Jan 7, 2026 3:39pm

@jsundai jsundai changed the title tutorial layout money transfer experimentation build your first basic workflow experimentation Nov 13, 2025
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious why these logos are being added. It looks like all of them are already here.

@flippedcoder
Copy link
Contributor

A couple of general questions.

  • Are we adding all of the UI components because they'll be used on future content like this or is it more specific for this guide? It all looks really great, but I think it looks different from the rest of the site and it threw me off at first.
  • It seemed like this example is already on the learn site. Is this supposed to be migrating the content over or is it supposed to something new?

Most applications require multiple coordinated steps - processing payments, sending emails, updating databases.
This tutorial uses money transfers to demonstrate how Temporal ensures these multi-step processes complete reliably, resuming exactly where they left off even after any failure.
<div style={{textAlign: 'center', margin: '2rem 0'}}>
<img src="/img/moneytransfer/money-withdrawal.png" alt="Money Transfer Application Flow" style={{maxWidth: '100%', height: 'auto'}} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is pretty hard to read in light mode.
Screenshot 2025-12-01 at 09 55 02


<RetryPolicyComparison />

:::important This is a Simplified Example
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor nit: should this be a warning just to highlight this? Totally fine if not!

<CallToAction
href="http://localhost:8233"
buttonText="Open the Temporal UI "
description="View the state of the Workflow with the Temporal Web UI"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we have something that says this is running locally?

- The `withdraw()` Activity completes successfully
- The `deposit()` Activity fails and retries automatically

<AnimatedTerminal
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this! The only thing is that it makes the page jump when there are new lines in the terminal.

Screen.Recording.2025-12-01.at.11.59.57.mov

Copy link
Contributor

@lennessyy lennessyy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is gorgeous! Great work. My comments are aimed at user-friendliness but may make it less pretty


Before starting this tutorial:

- **Set up a local development environment** for developing Temporal applications
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like the prerequisites are a little unclear to those who are new to our site. I know that if users go through the quick starts if they are set, but if I'm a new user, it's not clear if I am supposed to do the setup AND the quickstarts.

If we don't want to create a separate environment setup page, then we should just remove the two bullets and just tell them to do the quickstarts as a prerequisite.

id: build-your-first-workflow
title: Build Your First Workflow
sidebar_label: "Part 1: Build Your First Workflow"
hide_table_of_contents: true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i know that the layout is well designed and we could use the vertical space, but i still think this is a long enough tutorial that it'd be beneficial to have the TOC. It's easier for users to make sense of whey are doing in the context of the whole project. Right now, they can't see more than the H2 heading they are in.

Copy link
Contributor

@brianmacdonald-temporal brianmacdonald-temporal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like we could use some text explanation for each of the code blocks. Maybe Point out specifically what the workflow is calling, and how that relates to the activities, and point out the Retry Policy details.

<SetupSteps>

<SetupStep code={
<SdkTabs>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're missing languageOrder={TUTORIAL_LANGUAGE_ORDER} here, which threw me off.


with workflow.unsafe.imports_passed_through():
from activities import BankingActivities
from shared import PaymentDetails
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PaymentDetails isn't defined in shared.py that I can see.

jsundai and others added 2 commits January 5, 2026 11:11
….mdx

Co-authored-by: Milecia McG <47196133+flippedcoder@users.noreply.github.com>
….mdx

Co-authored-by: Milecia McG <47196133+flippedcoder@users.noreply.github.com>
…ated and added light and dark mode reimburse diagram, max width 60
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants