@powerhousedao/academy 5.1.0-dev.1 → 5.1.0-dev.11

package/docs/academy/03-ExampleUsecases/Chatroom/05-ImplementChatroomEditor.md

@@ -1,40 +1,122 @@
-# Implement Chatroom Editor
+# Build the ChatRoom editor
 
-In this section you will implement the `Chatroom` document model editor. This means you will create a simple user interface for the `Chatroom` document model which will be used inside the Connect app to visualise our chatroom, send messages and emoji reactions.
+:::tip Tutorial Repository
+📦 **Reference Code**: [chatroom-demo](https://github.com/powerhouse-inc/chatroom-demo)
 
-## Generate the editor template
+This tutorial covers building the ChatRoom editor:
+1. **Editor Scaffolding**: Generating the editor template with `ph generate --editor`
+2. **Component Implementation**: Building a complete, interactive chat UI with components
+
+Explore the complete implementation in the `editors/chat-room-editor/` directory.
+:::
+
+<details>
+<summary>📖 How to use this tutorial</summary>
+
+This tutorial shows building from **generated scaffolding** to a **complete chat UI**.
 
-Run below command to generate the editor template for the `Chatroom` document model. This command reads the `Chatroom` document model definition from the `document-models` folder and generates the editor template in the `editors/chat-room/editor.tsx` folder.
+### Compare your generated editor
 
-Notice the `--editor` flag which defines the `chatroom` document model editor. And the `--document-types` flag which defines the document type `powerhouse/chatroom`.
+After running `pnpm generate --editor`:
 
 ```bash
-ph generate --editor ChatRoomEditor --document-types powerhouse/chat-room
+# Compare generated scaffolding with the reference
+git diff tutorial/main -- editors/chat-room-editor/
+
+# View the generated editor template
+git show tutorial/main:editors/chat-room-editor/editor.tsx
 ```
 
-Once complete, navigate to the `editors/chat-room/editor.tsx` file and open it in your editor.
+### Browse the complete implementation
 
-As you'll see you will need to add more complex logic to make the chatroom functional and interact with our document model.
+Explore the production-ready component structure:
 
-## Add the necessary components for your editor first
+```bash
+# List all components in the reference
+git ls-tree -r --name-only tutorial/main editors/chat-room-editor/components/
 
-Download the repository of the chatroom-demo as a zip file https://github.com/powerhouse-inc/chatroom-demo
-and navigate to .../chatroom-demo-main/editors/chat-room-editor to copy both the components folder & utils function. In this repository you will also find all of the other code snippets we've been using in this tutorial.
+# View a specific component
+git show tutorial/main:editors/chat-room-editor/components/ChatRoom.tsx
+```
 
-Drag the folder with react components & utils functions into your VSCode of your chat-room-editor.
+### Visual comparison with GitHub Desktop
 
-In this folder you'll find:
+After committing your editor code:
+1. **Branch** menu → **"Compare to Branch..."**
+2. Select `tutorial/main`
+3. See all your custom components vs. the reference implementation
+
+See step 1 for detailed GitHub Desktop instructions.
+
+</details>
+
+In this chapter we will continue with the interface or editor implementation of the **ChatRoom** document model. This means you will create a user interface for the **ChatRoom** document model which will be used inside the Connect app to visualize your chatroom, send messages, and react with emojis.
+
+## Generate the editor template
+
+Run the command below to generate the editor template for the **ChatRoom** document model.  
+This command reads the **ChatRoom** document model definition from the `document-models` folder and generates the editor template in the `editors/chat-room-editor` folder.
+
+```bash
+pnpm generate --editor chat-room-editor --document-types powerhouse/chat-room
+```
+
+Notice the `--editor` flag which specifies the editor name, and the `--document-types` flag defines the document type `powerhouse/chat-room`.
+
+Once complete, you'll have a new directory structure:
+
+```
+editors/chat-room-editor/
+├── components/
+│   └── EditName.tsx          # Auto-generated component for editing document name
+├── editor.tsx                # Main editor component (to be customized)
+└── module.ts                 # Editor module configuration
+```
+
+Navigate to the `editors/chat-room-editor/editor.tsx` file and open it in your editor. You'll see a basic template ready for customization.
+
+### Editor implementation options
+
+When building your editor component within the Powerhouse ecosystem, you have several options for styling:
+
+1. **Default HTML Styling:** Standard HTML tags will render with default styles offered through the boilerplate.
+2. **Tailwind CSS:** Connect Studio comes with Tailwind CSS integrated. You can directly use Tailwind utility classes.
+3. **Custom CSS Files:** You can import traditional CSS files to apply custom styles.
+
+Connect Studio provides a dynamic local environment. By running `ph connect`, you can visualize your components instantly as you build them.
+
+## Build the editor with components
+
+We'll build the editor using a component-based approach for better organization and reusability.
+
+### Component-based architecture
+
+The ChatRoom editor structure includes several components that you can either build yourself or copy from the reference repository:
 
-- An avatar to be set for each chat room participant
+- `editor.tsx` - Main editor wrapper (imports ChatRoom)
+- `ChatRoom.tsx` - Main container component that orchestrates all other components
+- `Message.tsx` - Individual message component with reactions
+- `EmojiReaction.tsx` - Emoji reaction UI component
+- `TextInput.tsx` - Input component for sending messages
+- `Avatar.tsx` - User avatar component
+
+### Option 1: Copy components from the reference
+
+Download the repository of the chatroom-demo as a zip file from https://github.com/powerhouse-inc/chatroom-demo and navigate to `editors/chat-room-editor` to copy both the `components` folder and `utils.ts` file.
+
+In this folder you'll find:
+- An avatar component for chat room participants
 - The chatroom environment itself
 - A header for the chatroom
-- The UI for rendering the message, username and reaction popup.
+- The UI for rendering messages, usernames, and reaction popups
 - The emoji reaction interface
-- A UI for a text input field
+- A text input field component
 
-The utils function will help you with mapping information from the document model to your chatroom components. Such as your emoji values to the relevant emoji to be displayed.
+The utils function will help you with mapping information from the document model to your chatroom components, such as mapping emoji values to the relevant emoji to be displayed.
 
-Now, let's copy & paste the code below into the `editor.tsx` file located at `editors/chat-room-editor`and save the file.
+### Option 2: Build the main editor file
+
+If you want to understand how everything connects, here's the main `editor.tsx` implementation:
 
 ```typescript
 import { generateId } from "document-model/core";
@@ -64,6 +146,7 @@ export default function Editor() {
     return <div>Loading...</div>;
   }
 
+  // Map document messages to component props
   const messages: ChatRoomProps["messages"] =
     document.state.global.messages.map((message) => ({
       id: message.id,
@@ -75,10 +158,9 @@ export default function Editor() {
       reactions: mapReactions(message.reactions),
     }));
 
+  // Handler for sending messages
   const onSendMessage: ChatRoomProps["onSendMessage"] = (message) => {
-    if (!message) {
-      return;
-    }
+    if (!message) return;
 
     dispatch(
       addMessage({
@@ -94,6 +176,7 @@ export default function Editor() {
     );
   };
 
+  // Handler for adding reactions
   const addReaction = (
     messageId: string,
     userId: string,
@@ -108,6 +191,7 @@ export default function Editor() {
     );
   };
 
+  // Handler for removing reactions
   const removeReaction = (
     messageId: string,
     userId: string,
@@ -122,14 +206,13 @@ export default function Editor() {
     );
   };
 
+  // Handler for clicking on reactions (toggle behavior)
   const onClickReaction: MessageProps["onClickReaction"] = (reaction) => {
     const message = messages.find(
       (message) => message.id === reaction.messageId,
     );
 
-    if (!message) {
-      return;
-    }
+    if (!message) return;
 
     const messageId = reaction.messageId;
     const reactionType = reactionKeyToReactionType(reaction.type);
@@ -150,6 +233,7 @@ export default function Editor() {
     }
   };
 
+  // Handlers for editing chat metadata
   const onSubmitTitle: ChatRoomProps["onSubmitTitle"] = (title) => {
     dispatch(editChatName({ name: title }));
   };
@@ -161,11 +245,7 @@ export default function Editor() {
   };
 
   return (
-    <div
-      style={{
-        height: "calc(100vh - 140px)",
-      }}
-    >
+    <div style={{ height: "calc(100vh - 140px)" }}>
       <ChatRoom
         description={
           document.state.global.description || "This is a chat room demo"
@@ -183,18 +263,91 @@ export default function Editor() {
 }
 ```
 
-Now you can run the Connect app and see the `Chatroom` editor in action.
+**What's happening here:**
+
+- We use `useSelectedChatRoomDocument` hook to get the document state and dispatch function
+- We use `useUser` to get the current user information (for authentication)
+- We map the document's messages to props that our ChatRoom component expects
+- We create handlers for sending messages, adding/removing reactions, and editing metadata
+- We dispatch operations (`addMessage`, `addEmojiReaction`, etc.) from our generated creators
+
+:::info Key Concept: useSelectedChatRoomDocument hook
+The `useSelectedChatRoomDocument` hook is generated by the Powerhouse CLI. It provides:
+1. The current document state (`document`)
+2. A dispatch function to send actions to the reducer
+
+This hook connects your React components to the document model's state and operations.
+:::
+
+## Test your editor
+
+Now you can run the Connect app and see the **ChatRoom** editor in action:
 
 ```bash
 ph connect
 ```
 
-In connect, in the bottom right corner you'll find a new Document Model that you can create: `ChatRoom`. Click on it to create a new Chat Room document. A warning will prompt you to login before you are able to send messages.
+In Connect, in the bottom right corner you'll find a new Document Model that you can create: **ChatRoom**. Click on it to create a new ChatRoom document.
 
-Login with an ethereum address via Renown to start sending messages.
-
-Below GIF shows the `Chatroom` editor in action.
+:::warning Authentication Required
+A warning will prompt you to login before you can send messages. Login with an Ethereum address via Renown to start sending messages.
+:::
 
 ![Chatroom Editor](./images/ChatRoomTest.gif)
 
-If you managed to follow this tutorial until this point, you have successfully implemented the `ChatRoom` document model with its reducer operations and editor.
+**Try it out:**
+1. Create a new ChatRoom document
+2. Login with your Ethereum wallet
+3. Send messages using the input field
+4. React to messages with emoji reactions
+5. Click the chat name or description to edit them
+
+Congratulations! 🎉  
+If you managed to follow this tutorial until this point, you have successfully implemented the **ChatRoom** document model with its reducer operations and editor.
+
+## Compare with the reference implementation
+
+The tutorial repository includes the complete ChatRoom editor with all components:
+
+```
+editors/chat-room-editor/
+├── components/
+│   ├── Avatar.tsx            # User avatar display
+│   ├── ChatRoom.tsx          # Main chat container
+│   ├── Header.tsx            # Chat header with title/description
+│   ├── Message.tsx           # Individual message display
+│   ├── EmojiReaction.tsx     # Reaction UI
+│   ├── TextInput.tsx         # Message input field
+│   └── index.ts              # Component exports
+├── editor.tsx                # Main editor component
+├── utils.ts                  # Utility functions for data mapping
+└── module.ts                 # Editor module configuration
+```
+
+**View individual components from the reference:**
+
+```bash
+# See the ChatRoom component implementation
+git show tutorial/main:editors/chat-room-editor/components/ChatRoom.tsx
+
+# Explore the Message component
+git show tutorial/main:editors/chat-room-editor/components/Message.tsx
+
+# Compare your implementation with the reference
+git diff tutorial/main -- editors/chat-room-editor/
+```
+
+## Key concepts learned
+
+In this tutorial you've learned:
+
+✅ **Component-based architecture** - Breaking down complex UIs into reusable components  
+✅ **Document model hooks** - Using `useSelectedChatRoomDocument` to connect React to your document state  
+✅ **User authentication** - Using `useUser` hook for wallet-based authentication  
+✅ **Action dispatching** - How to dispatch operations from your UI  
+✅ **Type-safe development** - Leveraging TypeScript with generated types from your SDL  
+✅ **Real-time collaboration** - Building features that work across multiple users
+
+## Up next: Local Reactor
+
+In the next section, you'll learn how to run a local Reactor to test real-time synchronization between multiple users.

package/docs/academy/03-ExampleUsecases/Chatroom/06-LaunchALocalReactor.md

@@ -1,15 +1,103 @@
 # Launch a local Reactor
 
-Now we'll create a local Reactor instance to simulate the behaviour of the chatroom synchronising messages between two nodes or users in the network.
+:::tip Tutorial Repository
+📦 **Reference Code**: [chatroom-demo](https://github.com/powerhouse-inc/chatroom-demo)
 
-Wind down connect and run the following command in your terminal.
+This final step demonstrates real-time collaboration by running a local Reactor instance.
+:::
 
-`ph reactor`
+In this final section, we'll create a local Reactor instance to test the real-time synchronization capabilities of your ChatRoom. This simulates how messages would sync between multiple users in a production environment.
 
-This spins up a reactor, which represents a node that is usally hosted as a remote server, but in our case we run it locally on our machine. The reactor you've created will become available as a public drive in your left hand side bar.
+## What is a Reactor?
 
-If you would now open up two different browser windows you will be able to login into two version of connect, with two different ethereum addresses to start validating the functionality of your chatroom.
+A Reactor is a node in the Powerhouse network that:
+- Hosts and synchronizes documents across multiple clients
+- Manages document state and operations
+- Enables real-time collaboration between users
 
-Please go ahead now and send a message to yourself, give yourself a thumbs up or try to make your ENS name appear as your profile when logging in. Also remind yourself that you are able to see the revision history of your document and all it's operation history in the top right corner.
+In production, Reactors are typically hosted as remote servers. For development and testing, we can run a local Reactor.
 
-Congratulations! You've now explored one of the many ways to use document models within the powerhouse ecosystem.
+## Start the local Reactor
+
+First, stop the Connect application if it's running. Then start the Reactor:
+
+```bash
+ph reactor
+```
+
+This spins up a Reactor that:
+- Runs locally on your machine
+- Creates a public drive accessible from your Connect sidebar
+- Enables synchronization between multiple browser sessions
+
+## Test real-time collaboration
+
+To validate the real-time functionality of your ChatRoom:
+
+1. **Open two browser windows** with the Connect application
+2. **Navigate to the Reactor drive** in the left sidebar (it will appear as a public drive)
+3. **Login with different Ethereum addresses** in each window
+4. **Create a ChatRoom document** in one window
+5. **Open the same document** in the other window
+
+Now you can:
+- Send messages from one window and see them appear in the other
+- React to messages with emojis and watch the reactions sync
+- Edit the chat name or description and see updates propagate
+
+:::info Real-time Sync
+The Reactor ensures that all operations are synchronized across connected clients. Each message and reaction is recorded as an operation, maintaining a complete history that can be replayed to reconstruct the document state.
+:::
+
+## Additional features to explore
+
+While testing your ChatRoom, try these features:
+
+1. **Operation History**: Click on the revision history in the top right corner to see all operations performed on the document
+
+2. **ENS Integration**: If you login with an Ethereum address that has an ENS name, your name and avatar will appear in your messages
+
+3. **Reaction Toggling**: Click on an existing reaction to toggle it on/off for your user
+
+## Running Connect alongside Reactor
+
+You can also run Connect and Reactor together. In separate terminal windows:
+
+```bash
+# Terminal 1: Start the Reactor
+ph reactor
+
+# Terminal 2: Start Connect (in a separate terminal)
+ph connect
+```
+
+This allows you to:
+- Use Connect's local drive for development
+- Access the Reactor's public drive for collaboration testing
+- Switch between local and synchronized documents
+
+## What you've accomplished
+
+Congratulations! 🎉 You've now completed the ChatRoom tutorial and learned how to:
+
+✅ **Create a Powerhouse project** - Initialize and configure a new project  
+✅ **Define a document model** - Design schemas using GraphQL SDL  
+✅ **Implement reducers** - Write the business logic for state transitions  
+✅ **Build an editor** - Create a React-based UI for your document  
+✅ **Test with a Reactor** - Validate real-time collaboration features
+
+## Next steps
+
+Now that you've completed this tutorial, you can:
+
+1. **Explore the Mastery Track** - Dive deeper into [Document Model Creation](/academy/MasteryTrack/DocumentModelCreation/WhatIsADocumentModel) for advanced concepts
+
+2. **Try Vetra Studio** - Use AI-assisted development with [Vetra Studio](/academy/GetStarted/VetraStudio) for faster iteration
+
+3. **Build your own project** - Apply what you've learned to create your own document models and editors
+
+4. **Join the community** - Connect with other Powerhouse builders and share your creations
+
+---
+
+*This tutorial demonstrated one of the many ways to use document models within the Powerhouse ecosystem. The patterns you've learned here apply to any collaborative application you want to build.*

package/docs/academy/03-ExampleUsecases/Chatroom/_category_.json

@@ -3,6 +3,6 @@
   "position": 2,
   "link": {
     "type": "generated-index",
-    "description": "Get started with the Chatroom tutoria: Jump into creating a new Powerhouse project if you have NodeJs, VSCode, and Git installed. Whe are going to create a new document model that represents a chat.  So you as a user can post messages into that chat room, react to the messages. This chatroom will be synchronized between different connect instances. Let's explore the potential of the tools available in the powerhouse toolkit"
+    "description": "Build a real-time ChatRoom application with Powerhouse. This tutorial guides you through creating a document model for a chat application where users can post messages and react with emojis. You'll learn to define schemas, implement reducers, build a React editor, and test real-time synchronization using a local Reactor."
   }
 }

package/docs/academy/03-ExampleUsecases/TodoList/00-GetTheStarterCode.md

@@ -0,0 +1,24 @@
+# Step 0 - get the starter code
+
+Normally you would initialize a new powerhouse project by running `ph init` with your project name. But since this is a tutorial, we want to provide branches with the final code for each step.
+
+Just for the tutorial, please instead make a fork of [this repository](https://github.com/powerhouse-inc/todo-tutorial). 
+
+*NOTE:* please _uncheck_ the checkbox that says "copy the main branch only" when making your fork — we want to keep the other branches for each step.
+
+Once you have your fork, clone it to your machine with `git clone`, the GitHub desktop app or the GitHub cli.
+
+The starter branch of this tutorial is: `step-1-generate-todo-list-document-model`.
+
+Checkout that branch, and then create your own branch from it with whatever name you want, something like `do-the-tutorial` will work nicely.
+
+The code at the step 1 branch of this repository is exactly the same as what you would get if you ran `ph init todo-tutorial`.
+
+Each step in this tutorial has two branches associated with it. One is the starting point and the other is the final code after the step is complete. They each have names like `step-1-` for the starting point and `step-1-complete-` for the complete code. You can use the starting point branches if you want to start at a later step or skip a step, and you can use the complete code to compare with your branch if you get stuck.
+
+To compare your branch, either do `git diff my-branch step-complete-branch` or use the "compare with branch" option in the GitHub desktop app.
+
+Finally, run `pnpm install` to install the project dependencies. 
+
+Now we're ready to get started.
+

package/docs/academy/03-ExampleUsecases/TodoList/01-GenerateTodoListDocumentModel.md

@@ -0,0 +1,211 @@
+# Step 1 - Generate the `TodoList` document model
+
+## Overview
+
+This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.  
+A Powerhouse project primarily consists of a document model and its editor. 
+As your projects use-case expands you can add data-integrations or a specific drive-app as seen in the demo package. 
+
+For todays purpose, you'll be using Connect, our user-centric collaboration tool and Vetra Studio, the builder tooling through which developers can access and manage specifications of your project. 
+
+## Develop a single document model in Connect
+
+Once in the project directory, run the `pnpm connect` command to start a local instance of the Connect application. This allows you to start your document model specification document.
+Run the following command to start the Connect application:
+
+    ```bash
+    pnpm connect
+    ```
+
+The Connect application will start and you will see the following output:
+
+    ```bash
+      ➜  Local:   http://localhost:3000/
+      ➜  Network: http://192.168.5.110:3000/
+      ➜  press h + enter to show help
+    ```
+
+A new browser window will open and you will see the Connect application. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser. You will see your local drive and a button to create a new drive.
+
+:::tip 
+If you local drive is not present navigate into Settings in the bottom left corner. Settings > Danger Zone > Clear Storage.
+Clear the storage of your localhost application as it might has an old session cached.
+:::
+
+4. Move into your local drive.  
+   Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page. Name your document `Todo List`.
+
+If you've followed the steps correctly, you'll have an empty `TodoList` document where you can define the **'Document Specifications'**.
+
+## TodoList document specification
+
+To start, fill in the following details for your new document model:
+
+Name: `Todo List`
+Document type: `powerhouse/todo-list`
+Author name: Powerhouse
+Website URL: https://powerhouse.inc
+
+It's important that you use these exact details so that your generated code matches the generated code in the tutorial repository.
+
+We'll continue with this project to teach you how to create a document model specification and later an editor for your document model. We use the **GraphQL Schema Definition Language** (SDL) to define the schema for the document model.  
+Below, you can see the SDL for the `TodoList` document model.
+
+:::info
+This schema defines the **data structure** of the document model and the types involved in its operations, which are detailed further as input types.
+Documents in Powerhouse leverage **event sourcing principles**, where every state transition is represented by an operation. GraphQL input types describe operations, ensuring that user intents are captured effectively. These operations detail the parameters needed for state transitions. The use of GraphQL aligns these transitions with explicit, validated, and reproducible commands.
+:::
+
+## The document model state schema
+
+First, let's add a graphql type that represents an individual item in a todo list document. A todo item has an ID, text, and can be either checked or unchecked.
+
+Add this underneath the boilerplate `TodoListState` type you see in the Global State Schema text editor.
+
+```graphql
+# Defines a GraphQL type for a single to-do item
+type TodoItem {
+  id: OID! # Unique identifier for each to-do item
+  text: String! # The text description of the to-do item
+  checked: Boolean! # Status of the to-do item (checked/unchecked)
+}
+```
+
+Now update the `TodoListState` type to use our new type by replacing the boilerplate with this:
+
+```graphql
+type TodoListState {
+  items: [TodoItem!]!
+}
+```
+
+The final result in your editor should look like this:
+
+```graphql
+type TodoListState {
+  items: [TodoItem!]!
+}
+
+# Defines a GraphQL type for a single to-do item
+type TodoItem {
+  id: OID! # Unique identifier for each to-do item
+  text: String! # The text description of the to-do item
+  checked: Boolean! # Status of the to-do item (checked/unchecked)
+}
+```
+
+With our state schema defined, go ahead and click the "Sync with schema" button underneath "Global State Initial Value". This will set the initial state for the documents you create with this model based on the schema you defined.
+
+Your initial value field should now look like this:
+
+```json
+{
+  "items": []
+}
+```
+
+## Operation inputs and their schemas
+
+We've defined the shape for the state of our `TodoList` documents, but we also need to be able to update them.
+
+Documents are updated by dispatching actions, which are applied to documents as operations.
+
+We define modules to group sets of operations together. In this simple case, we will only need one module.
+
+Add a new module for our `todos` operations by typing `todos` in the "Add new module" input and pressing enter.
+
+We need to add three different operations to this module:
+
+1. add todo item
+2. update todo item
+3. delete todo item
+
+Let's start with adding todos.
+
+When we add a new todo, the only input we need to provide is the text. Creating the ID will be handled later in our reducer code, and todos always start as unchecked by default.
+
+type `add todo item` in the "Add new operation" input and press enter.
+
+You will see your new operation with the name `ADD_TODO_ITEM` (we automatically handle changing the casing to the required CONSTANT_CASE).
+
+You will also see a boilerplate placeholder graphql input.
+
+Update the graphql input like so:
+
+```graphql
+input AddTodoItemInput {
+  text: String!
+}
+```
+
+Next let's handle updating todo items.
+
+Type `update todo item` in the "Add new operation" input and press enter.
+
+For updating items, we will need to provide an `id` so we know which one to update. We can use the same operation to update the text or the checked state, so both of these fields are optional (no ! on the field).
+
+Update the `UpdateTodoItemInput` to be like so:
+
+```graphql
+input UpdateTodoItemInput {
+  id: OID!
+  text: String
+  checked: Boolean
+}
+```
+
+Finally, we can handle the delete item operation.
+
+type `delete todo item` in the "Add new operation" input.
+
+For deleting items, all we need is an `id`.
+
+Update your `DeleteTodoItemInput` to be like this:
+
+```graphql
+input DeleteTodoItemInput {
+  id: OID!
+}
+```
+
+Once you have added all the input operations, click the `Export` button at the top right of the editor to save the document model specification document to your local machine. Ideally, you should save your file in the root of your repository with the name `todo-list.phd`
+
+## Generating your document model code
+
+With our newly created document model, we can run the codegen to generate the rest of the code for it.
+
+To run the codegen, you use the `generate` command with a path to the file you just exported. 
+
+```bash
+pnpm generate ./todo-list.phd
+```
+
+**NOTE:** this generated code contains values that will always be different for each generated document model, like module ids for example. For the purposes of this tutorial, we recommend that you instead use the reference example that we have already included in the repo for you — this will make your generated code look exactly the same as the generated code in the branches in the repo, and your diffs will match exactly.
+
+To use our reference example, run:
+
+```bash
+pnpm generate ./todo-list.phdm.phd
+```
+
+This will overwrite your generated code with code that is identical to the branches in this repository.
+
+## Check your work
+
+To make sure all works as expected, we should:
+
+- check types
+run: `pnpm tsc`
+
+- check linting
+run: `pnpm lint`
+
+- check tests
+run: `pnpm test`
+
+- make sure your code matches the code in the completed step branch
+run: `git diff your-branch-name step-1-complete-generated-todo-list-document-model`
+
+### Up next: reducers and operations
+
+Up next, you'll learn how to implement the runtime logic and components that will use the `TodoList` document model specification you've just created and exported.