From 620c2f4fac8ff66efb833028ef34283da65b0c32 Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Thu, 13 Jun 2024 11:45:41 -0400
Subject: [PATCH 1/9] continue working on tutorials

---
 ...e-to-start.mdx => 100-getting-started.mdx} |  13 +-
 .../200-dealing-with-errors.mdx               | 173 ++++++++++++++++++
 .../tutorials/incremental-adoption/index.mdx  |   8 +-
 next.config.js                                |  13 ++
 .../[...slug]/components/Navigation.tsx}      |   4 +-
 .../[...slug]/components/Navigation/Menu.tsx} |   4 +-
 .../components/Navigation/MenuButton.tsx}     |   0
 .../components/Navigation/MenuGroup.tsx}      |   2 +-
 .../[...slug]/components/SolveButton.tsx}     |  15 +-
 .../[...slug]/components/Toolbar.tsx          |  38 ++++
 .../[...slug]/components/ToolbarItems.tsx     |  19 ++
 .../components/ToolbarItemsDynamic.tsx        |  10 +
 .../components/{tutorial.tsx => Tutorial.tsx} |  78 ++++----
 .../[...slug]/{page.disabled.tsx => page.tsx} |  12 +-
 src/app/tutorials/layout.tsx                  |   4 +-
 src/components/editor/CodeEditor.tsx          |   6 +-
 .../components/{common => }/file-editor.tsx   |   2 +-
 .../components/{common => }/file-explorer.tsx |   0
 .../file-explorer/directory-node.tsx          |   0
 .../{common => }/file-explorer/file-input.tsx |   0
 .../{common => }/file-explorer/file-node.tsx  |   0
 .../{common => }/file-explorer/file-tree.tsx  |   0
 .../components/{common => }/terminal.css      |   0
 .../components/{common => }/terminal.tsx      |   0
 .../editor/components/tutorial/toolbar.tsx    |  20 --
 src/components/editor/rx.ts                   |  10 +-
 .../incremental-adoption/100/repo.ts          |   7 +-
 .../incremental-adoption/200/main.initial.txt |  23 +++
 .../incremental-adoption/200/main.ts          |  31 ++++
 .../incremental-adoption/200/repo.ts          |  66 +++++++
 .../incremental-adoption/300/main.ts          |  42 +++++
 .../incremental-adoption/300/repo.ts          |  59 ++++++
 32 files changed, 553 insertions(+), 106 deletions(-)
 rename content/tutorials/incremental-adoption/{100-where-to-start.mdx => 100-getting-started.mdx} (79%)
 create mode 100644 content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
 rename src/{components/editor/components/tutorial/navigation.tsx => app/tutorials/[...slug]/components/Navigation.tsx} (94%)
 rename src/{components/editor/components/tutorial/navigation/menu.tsx => app/tutorials/[...slug]/components/Navigation/Menu.tsx} (95%)
 rename src/{components/editor/components/tutorial/navigation/menu-button.tsx => app/tutorials/[...slug]/components/Navigation/MenuButton.tsx} (100%)
 rename src/{components/editor/components/tutorial/navigation/menu-group.tsx => app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx} (100%)
 rename src/{components/editor/components/tutorial/solve-button.tsx => app/tutorials/[...slug]/components/SolveButton.tsx} (64%)
 create mode 100644 src/app/tutorials/[...slug]/components/Toolbar.tsx
 create mode 100644 src/app/tutorials/[...slug]/components/ToolbarItems.tsx
 create mode 100644 src/app/tutorials/[...slug]/components/ToolbarItemsDynamic.tsx
 rename src/app/tutorials/[...slug]/components/{tutorial.tsx => Tutorial.tsx} (51%)
 rename src/app/tutorials/[...slug]/{page.disabled.tsx => page.tsx} (91%)
 rename src/components/editor/components/{common => }/file-editor.tsx (96%)
 rename src/components/editor/components/{common => }/file-explorer.tsx (100%)
 rename src/components/editor/components/{common => }/file-explorer/directory-node.tsx (100%)
 rename src/components/editor/components/{common => }/file-explorer/file-input.tsx (100%)
 rename src/components/editor/components/{common => }/file-explorer/file-node.tsx (100%)
 rename src/components/editor/components/{common => }/file-explorer/file-tree.tsx (100%)
 rename src/components/editor/components/{common => }/terminal.css (100%)
 rename src/components/editor/components/{common => }/terminal.tsx (100%)
 delete mode 100644 src/components/editor/components/tutorial/toolbar.tsx
 create mode 100644 src/tutorials/incremental-adoption/200/main.initial.txt
 create mode 100644 src/tutorials/incremental-adoption/200/main.ts
 create mode 100644 src/tutorials/incremental-adoption/200/repo.ts
 create mode 100644 src/tutorials/incremental-adoption/300/main.ts
 create mode 100644 src/tutorials/incremental-adoption/300/repo.ts

diff --git a/content/tutorials/incremental-adoption/100-where-to-start.mdx b/content/tutorials/incremental-adoption/100-getting-started.mdx
similarity index 79%
rename from content/tutorials/incremental-adoption/100-where-to-start.mdx
rename to content/tutorials/incremental-adoption/100-getting-started.mdx
index d35476b10..60b1bbe1f 100644
--- a/content/tutorials/incremental-adoption/100-where-to-start.mdx
+++ b/content/tutorials/incremental-adoption/100-getting-started.mdx
@@ -1,11 +1,11 @@
 ---
-title: Where to Start
+title: Getting Started
 excerpt: Learn how to incrementally adopt Effect into your application
 section: Incremental Adoption
 workspace: express
 ---
 
-### Where to Start
+### Getting Started
 
 When adopting Effect into an existing codebase, it's often best to start with discrete, self-contained pieces of code. You can then use features of Effect to easily interop with your existing code and gradually continue to adopt Effect at your own pace.
 
@@ -42,6 +42,11 @@ async function main() {
 
 ### Exercise
 
-The team in charge of the `TodoRepository` has re-factored the `create` method from promises to Effect. The method now returns an `Effect<Todo>` instead of a `Promise<Todo>`.
+The team in charge of the `TodoRepository` has re-factored the `create` method. The method now returns an `Effect<Todo>` instead of a `Promise<Todo>`.
 
-Your job is to fix the `POST /todos` route of our Express API. In the editor to the right, modify the code to restore functionality to our server.
+Using what we have learned above, your tasks for this exercise include:
+
+  - Fix all type errors within the `POST /todos` route of our Express API
+  - Ensure that the Express API responds with the created `Todo` as JSON
+
+In the editor to the right, modify the code to restore functionality to our server.
diff --git a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
new file mode 100644
index 000000000..c22582a67
--- /dev/null
+++ b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
@@ -0,0 +1,173 @@
+---
+title: Dealing with Errors
+excerpt: Learn how to incrementally adopt Effect into your application
+section: Incremental Adoption
+workspace: express
+---
+
+### Dealing with Errors
+
+As you continue to adopt Effect into your codebase, you may encounter situations where you need to propagate error information from Effect code to non-Effect code.
+
+For example, perhaps your business requirements dictate that you must log all errors to a third-party log aggregator.
+
+In this section, we will explore several strategies for allowing your existing application to access both expected and unexpected errors coming from Effect code.
+
+<Idea>
+For more information about managing errors within your Effect programs, checkout the section on <a href="/docs/guides/error-management" target="_blank">Error Management</a> in the documentation.
+</Idea>
+
+### Example Business Case
+
+Let's imagine that we are working on refactoring a part of our application to use Effect. The part of our application we are refactoring involves communicating with one of our company's REST APIs to retrieve the price of a particular product we sell. If requests to our company's API are unsuccessful, the program will fail with an `HttpError`.
+
+Our business requirements dictate the following:
+- Our application's `ErrorReporter` must be used to report all errors occurring within our application to an external error tracking service
+- Our application's `LogAggregator` must be used to log the results of successful API calls to an external log aggregation service
+
+### Working with Expected Errors
+
+Effect provides a variety of tools to make working with expected errors in your program as simple as possible. These tools can also be used to provide the surrounding application with error information coming from your Effect code.
+
+In the first example below, we utilize `Effect.catchTag` to "catch" the `HttpError` in our Effect program. We then use `Effect.promise` to allow our application's `ErrorReporter` to report on the error.
+
+```ts twoslash
+import { Data, Effect } from "effect"
+
+// === Effect Code ===
+class HttpError extends Data.TaggedError("HttpError") {}
+
+const program = Effect.gen(function*() {
+  // Simulate the possibility of error
+  if (Math.random() > 0.5) {
+    return yield* new HttpError()
+  }
+  // Simulate a response from our API
+  return yield* Effect.succeed(42)
+})
+
+// === Application Code ===
+interface LogAggregator {
+  log(value: any): Promise<void>
+}
+interface ErrorReporter {
+  report(error: any): Promise<void>
+}
+declare const logger: LogAggregator
+declare const reporter: ErrorReporter
+
+async function main() {
+  await program.pipe(
+    Effect.andThen((result) => logger.log(result)),
+    Effect.catchTag("HttpError", (error) =>
+      Effect.promise(() => reporter.report(error))
+    ),
+    Effect.runPromise
+  )
+}
+```
+
+In the next example below, we wrap our _entire program_ in a call to `Effect.either`. This operator will convert an `Effect<A, E, R>` into an `Effect<Either<A, E>, never, R>`, thereby <a href="/docs/guides/error-management/error-channel-operations#exposing-errors-in-the-success-channel" target="_blank">exposing expected errors in the success channel of your program</a>.
+
+We can then use methods from the `Either` module to handle error and success cases separately.
+
+```ts twoslash
+import { Data, Effect, Either } from "effect"
+
+// === Effect Code ===
+class HttpError extends Data.TaggedError("HttpError") {}
+
+const program = Effect.gen(function*() {
+  // Simulate the possibility of error
+  if (Math.random() > 0.5) {
+    return yield* new HttpError()
+  }
+  return yield* Effect.succeed(42)
+})
+
+// === Application Code ===
+interface LogAggregator {
+  log(value: any): Promise<void>
+}
+interface ErrorReporter {
+  report(error: any): Promise<void>
+}
+declare const logger: LogAggregator
+declare const reporter: ErrorReporter
+
+async function main() {
+  await Effect.runPromise(Effect.either(program)).then(
+    Either.match({
+      // Handle the error case
+      onLeft: (error) => reporter.report(error),
+      // Handle the success case
+      onRight: (value) => logger.log(value)
+    })
+  )
+}
+```
+
+### Expected and Unexpected Errors
+
+The simplest method of gaining access to both expected _and_ unexpected errors returned from an Effect program is to simply run your program with `Effect.runPromise` and then catch any thrown errors.
+
+```ts twoslash
+import { Data, Effect } from "effect"
+
+// === Effect Code ===
+class HttpError extends Data.TaggedError("HttpError") {}
+
+const program = Effect.gen(function*() {
+  // Simulate the possibility of error
+  if (Math.random() > 0.5) {
+    return yield* new HttpError()
+  }
+  return yield* Effect.succeed(42)
+})
+
+// === Application Code ===
+interface LogAggregator {
+  log(value: any): Promise<void>
+}
+interface ErrorReporter {
+  report(error: any): Promise<void>
+}
+declare const logger: LogAggregator
+declare const reporter: ErrorReporter
+
+async function main() {
+  await Effect.runPromise(program)
+    .then((value) => logger.log(value))
+    .catch((error) => reporter.report(error))
+}
+```
+
+The benefit of this approach is that errors returned by `Effect.runPromise` will be automatically wrapped by Effect's special `FiberFailure` error. The `FiberFailure` error type will prettify the `Cause` of the failure for you (see the <a href="/docs/other/data-types/cause" target="_blank">Cause documentation</a>  for more information), making it easier to log the error and any associated stack trace.
+
+However, there are several downsides to this approach:
+
+- There is not an "easy" way to introspect the `Cause` of the failure for additional information
+- If there are multiple errors in the underlying `Cause`, only the first error will be rendered by the `FiberFailure`
+
+### Introspecting the Cause
+
+Introspecting the full `Cause` of failure of our Effect programs can be extremely useful when we need granular information about the failure(s) that occurred.
+
+For example, perhaps we need to respond to an `Interrupt` cause in a different manner than a `Fail` cause.
+
+If we want to perform some operations on the full `Cause` of failure of our program, we have a variety options available to us:
+
+- We could utilize <a href="/docs/guides/error-management/sandboxing" target="_blank">sandboxing</a> to expose the full `Cause` of failure in our program's error channel
+- We could <a href="/docs/guides/essentials/running-effects#runpromiseexit" target="_blank">run our program to an Exit</a> using `Effect.runPromiseExit` and then match on the success and error cases
+
+### Exercise
+
+The team in charge of the `TodoRepository` has continued to refactor the `create` method. The method now returns an `Effect<Todo, CreateTodoError>`.
+
+Using what we have learned above, your tasks for this exercise include:
+
+  - If creation of a `Todo` results in a `CreateTodoError`
+    - Set the response status code to `500`
+    - Return a JSON response that conforms to the following `{ "type": "CreateTodoError", "text": <TODO_TEXT> }`
+
+In the editor to the right, modify the code to restore functionality to our server. Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
diff --git a/content/tutorials/incremental-adoption/index.mdx b/content/tutorials/incremental-adoption/index.mdx
index 17375e954..76296b71a 100644
--- a/content/tutorials/incremental-adoption/index.mdx
+++ b/content/tutorials/incremental-adoption/index.mdx
@@ -7,11 +7,13 @@ workspace: express
 
 ### Incrementally Adopting Effect
 
-Effect was designed from the start with incremental adoption in mind. You can continue to use your existing code and incorporate Effect as much (or as little) as you prefer, where it makes the most sense within your application. In this way, you can immediately begin to benefit from Effect without needing to make drastic changes to your codebase.
+Effect was designed from the start with incremental adoption in mind. You can continue to use your existing code and incorporate Effect as much (or as little) as you prefer, and only where it makes the most sense within your application.
+
+In this way, you can immediately begin to benefit from Effect without needing to make drastic changes to your codebase.
 
 ### What We'll Be Doing
 
-In this tutorial we will walk through strategies for incrementally adopting Effect into an existing application. Our goal will be to taking a REST API built with [Express](https://expressjs.com) and gradually refactor portions of the application to utilize Effect.
+In this tutorial we will walk through strategies for incrementally adopting Effect into an existing application. Our goal will be to gradually refactor the code within an existing REST API built with [Express](https://expressjs.com) to use Effect.
 
 In the editor to the right, you will see the following files in the `src` directory:
 
@@ -24,4 +26,4 @@ To the right is an editor and a console window. As you make changes to the code
 
 Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 
-If you want to view the recommended solution to an exercise, click the "Solve" button.
+If you want to view the recommended solution to an exercise, click the "Show Solution" button in the upper-right corner of the page.
diff --git a/next.config.js b/next.config.js
index ec6db0ec5..89f31ae59 100644
--- a/next.config.js
+++ b/next.config.js
@@ -72,6 +72,19 @@ const nextConfig = {
             value: "same-origin"
           }
         ]
+      },
+      {
+        source: "/tutorials/(.*)",
+        headers: [
+          {
+            key: "Cross-Origin-Embedder-Policy",
+            value: "require-corp"
+          },
+          {
+            key: "Cross-Origin-Opener-Policy",
+            value: "same-origin"
+          }
+        ]
       }
     ]
   }
diff --git a/src/components/editor/components/tutorial/navigation.tsx b/src/app/tutorials/[...slug]/components/Navigation.tsx
similarity index 94%
rename from src/components/editor/components/tutorial/navigation.tsx
rename to src/app/tutorials/[...slug]/components/Navigation.tsx
index b5af1a024..f19bfcb90 100644
--- a/src/components/editor/components/tutorial/navigation.tsx
+++ b/src/app/tutorials/[...slug]/components/Navigation.tsx
@@ -4,8 +4,8 @@ import React from "react"
 import Link from "next/link"
 import { Icon } from "@/components/icons"
 import { Tutorial } from "contentlayer/generated"
-import { Menu } from "./navigation/menu"
-import { MenuButton } from "./navigation/menu-button"
+import { Menu } from "./Navigation/Menu"
+import { MenuButton } from "./Navigation/MenuButton"
 import { cn } from "@/lib/utils"
 import { groupedTutorials, tutorialSection } from "@/workspaces/domain/tutorial"
 
diff --git a/src/components/editor/components/tutorial/navigation/menu.tsx b/src/app/tutorials/[...slug]/components/Navigation/Menu.tsx
similarity index 95%
rename from src/components/editor/components/tutorial/navigation/menu.tsx
rename to src/app/tutorials/[...slug]/components/Navigation/Menu.tsx
index a54d7e98b..d09d0e0ac 100644
--- a/src/components/editor/components/tutorial/navigation/menu.tsx
+++ b/src/app/tutorials/[...slug]/components/Navigation/Menu.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import React from "react"
+import { Tutorial } from "contentlayer/generated"
 import { groupedTutorials } from "@/workspaces/domain/tutorial"
 import { Accordion } from "@/components/ui/accordion"
-import { Tutorial } from "contentlayer/generated"
-import { MenuGroup } from "./menu-group"
+import { MenuGroup } from "./MenuGroup"
 
 export declare namespace Menu {
   export interface Props {
diff --git a/src/components/editor/components/tutorial/navigation/menu-button.tsx b/src/app/tutorials/[...slug]/components/Navigation/MenuButton.tsx
similarity index 100%
rename from src/components/editor/components/tutorial/navigation/menu-button.tsx
rename to src/app/tutorials/[...slug]/components/Navigation/MenuButton.tsx
diff --git a/src/components/editor/components/tutorial/navigation/menu-group.tsx b/src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx
similarity index 100%
rename from src/components/editor/components/tutorial/navigation/menu-group.tsx
rename to src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx
index 8c95efc38..f4cd41cc7 100644
--- a/src/components/editor/components/tutorial/navigation/menu-group.tsx
+++ b/src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx
@@ -2,13 +2,13 @@
 
 import React from "react"
 import Link from "next/link"
+import { Tutorial } from "contentlayer/generated"
 import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger
 } from "@/components/ui/accordion"
 import { cn } from "@/lib/utils"
-import { Tutorial } from "contentlayer/generated"
 import { TutorialGroup } from "@/workspaces/domain/tutorial"
 
 export function MenuGroup({
diff --git a/src/components/editor/components/tutorial/solve-button.tsx b/src/app/tutorials/[...slug]/components/SolveButton.tsx
similarity index 64%
rename from src/components/editor/components/tutorial/solve-button.tsx
rename to src/app/tutorials/[...slug]/components/SolveButton.tsx
index e9617bc0d..5d9c1c048 100644
--- a/src/components/editor/components/tutorial/solve-button.tsx
+++ b/src/app/tutorials/[...slug]/components/SolveButton.tsx
@@ -1,14 +1,11 @@
 import React from "react"
 import { useRx } from "@effect-rx/rx-react"
-import { useWorkspaceHandle } from "@/workspaces/context"
 import { Button } from "@/components/ui/button"
+import { useWorkspaceHandle } from "@/workspaces/context"
 
-export declare namespace SolveButton {
-  export interface Props {}
-}
-
-export const SolveButton: React.FC<SolveButton.Props> = () => {
-  const [solved, setSolved] = useRx(useWorkspaceHandle().solved)
+export function SolveButton() {
+  const handle = useWorkspaceHandle()
+  const [solved, setSolved] = useRx(handle.solved)
 
   return (
     <Button
@@ -17,9 +14,7 @@ export const SolveButton: React.FC<SolveButton.Props> = () => {
       // TODO
       // className="bg-neutral-700 disabled:bg-neutral-500 dark:bg-neutral-200 text-white dark:text-neutral-800 dark:disabled:bg-neutral-400 font-display text-lg leading-none py-4"
     >
-      {solved ? "Reset" : "Solve"}
+      {solved ? "Reset" : "Show Solution"}
     </Button>
   )
 }
-
-SolveButton.displayName = "SolveButton"
diff --git a/src/app/tutorials/[...slug]/components/Toolbar.tsx b/src/app/tutorials/[...slug]/components/Toolbar.tsx
new file mode 100644
index 000000000..33e638537
--- /dev/null
+++ b/src/app/tutorials/[...slug]/components/Toolbar.tsx
@@ -0,0 +1,38 @@
+import Link from "next/link"
+import { Logo } from "@/components/atoms/logo"
+import { LogoDark } from "@/components/atoms/logo-dark"
+import { NavigationMenu } from "@/components/layout/navigation"
+
+export function Toolbar({ items }: { readonly items: React.ReactNode }) {
+  return (
+    <div className="border-b dark:border-neutral-700 px-4 flex items-center space-y-0 h-16">
+      <ToolbarHeader />
+
+      <div aria-hidden className="flex-1" />
+
+      <div>{items}</div>
+    </div>
+  )
+}
+
+function ToolbarHeader() {
+  return (
+    <header className="flex items-center">
+      <Link href="/" className="z-50 -mr-5">
+        <Logo className="hidden dark:block h-6" />
+        <LogoDark className="dark:hidden h-6" />
+      </Link>
+
+      <h2 className="relative text-lg font-semibold text-nowrap">
+        Tutorials
+        <span className="font-mono normal-case absolute ml-2 mt-[-3px] text-slate-400 dark:text-slate-500 text-[10px]">
+          Alpha
+        </span>
+      </h2>
+
+      <nav className="flex gap-6 pl-16">
+        <NavigationMenu />
+      </nav>
+    </header>
+  )
+}
diff --git a/src/app/tutorials/[...slug]/components/ToolbarItems.tsx b/src/app/tutorials/[...slug]/components/ToolbarItems.tsx
new file mode 100644
index 000000000..ca1305058
--- /dev/null
+++ b/src/app/tutorials/[...slug]/components/ToolbarItems.tsx
@@ -0,0 +1,19 @@
+import { ThemeSwitcher } from "@/components/atoms/theme-switcher"
+import { SolveButton } from "./SolveButton"
+import { Workspace } from "@/workspaces/domain/workspace"
+import { WorkspaceProvider } from "@/workspaces/WorkspaceProvider"
+
+export function ToolbarItems({
+  workspace
+}: {
+  readonly workspace: Workspace
+}) {
+  return (
+    <WorkspaceProvider workspace={workspace}>
+      <div className="flex items-center gap-4">
+        <ThemeSwitcher />
+        <SolveButton />
+      </div>
+    </WorkspaceProvider>
+  )
+}
diff --git a/src/app/tutorials/[...slug]/components/ToolbarItemsDynamic.tsx b/src/app/tutorials/[...slug]/components/ToolbarItemsDynamic.tsx
new file mode 100644
index 000000000..793ab0f5a
--- /dev/null
+++ b/src/app/tutorials/[...slug]/components/ToolbarItemsDynamic.tsx
@@ -0,0 +1,10 @@
+"use client"
+
+import dynamic from "next/dynamic"
+
+export const ToolbarItemsDynamic = dynamic(
+  async () => {
+    return (await import("./ToolbarItems")).ToolbarItems
+  },
+  { ssr: false }
+)
diff --git a/src/app/tutorials/[...slug]/components/tutorial.tsx b/src/app/tutorials/[...slug]/components/Tutorial.tsx
similarity index 51%
rename from src/app/tutorials/[...slug]/components/tutorial.tsx
rename to src/app/tutorials/[...slug]/components/Tutorial.tsx
index c926f30df..7f60f5279 100644
--- a/src/app/tutorials/[...slug]/components/tutorial.tsx
+++ b/src/app/tutorials/[...slug]/components/Tutorial.tsx
@@ -3,11 +3,13 @@
 import React, { useMemo } from "react"
 import dynamic from "next/dynamic"
 import Link from "next/link"
-import { File, makeDirectory, Workspace } from "@/workspaces/domain/workspace"
 import { Panel, PanelGroup } from "react-resizable-panels"
+import { Tutorial as ITutorial } from "contentlayer/generated"
 import { PanelResizeHandleVertical } from "@/components/ui/resizable"
 import { tutorialWorkspaces } from "@/tutorials/common"
-import { Tutorial as ITutorial } from "contentlayer/generated"
+import { File, makeDirectory, Workspace } from "@/workspaces/domain/workspace"
+import { Toolbar } from "./Toolbar"
+import { ToolbarItemsDynamic } from "./ToolbarItemsDynamic"
 
 export const Tutorial = ({
   name,
@@ -33,51 +35,51 @@ export const Tutorial = ({
       }
     | undefined
 }) => {
-  const Editor = useMemo(
+  const tutorial = useMemo(
     () =>
-      editor(
-        tutorialWorkspaces[workspace].withName(name).append(
-          makeDirectory(
-            "src",
-            files.map(
-              (file) =>
-                new File({
-                  name: file.name,
-                  initialContent: file.initial,
-                  solution: file.solution
-                })
-            )
+      tutorialWorkspaces[workspace].withName(name).append(
+        makeDirectory(
+          "src",
+          files.map(
+            (file) =>
+              new File({
+                name: file.name,
+                initialContent: file.initial,
+                solution: file.solution
+              })
           )
         )
       ),
     [files, name, workspace]
   )
 
+  const Editor = useMemo(() => editor(tutorial), [tutorial])
+
   return (
-    <PanelGroup
-      autoSaveId="tutorial"
-      direction="horizontal"
-      className="flex-1 flex flex-row overflow-hidden"
-    >
-      <Panel
-        className="pt-4 min-w-[450px] flex flex-col"
-        defaultSize={30}
+    <>
+      <Toolbar items={<ToolbarItemsDynamic workspace={tutorial} />} />
+      <PanelGroup
+        autoSaveId="tutorial"
+        direction="horizontal"
+        className="flex-1 flex flex-row overflow-hidden"
       >
-        {navigation}
-        <div className="px-8 py-2 prose dark:prose-invert flex-1 overflow-y-auto pb-14">
-          {children}
-          {next && (
-            <p>
-              <Link href={next.url}>Next: {next.title}</Link>
-            </p>
-          )}
-        </div>
-      </Panel>
-      <PanelResizeHandleVertical />
-      <Panel>
-        <Editor />
-      </Panel>
-    </PanelGroup>
+        <Panel className="pt-4 min-w-[450px] flex flex-col" defaultSize={30}>
+          {navigation}
+          <div className="px-8 py-2 prose dark:prose-invert flex-1 overflow-y-auto pb-14">
+            {children}
+            {next && (
+              <p>
+                <Link href={next.url}>Next: {next.title}</Link>
+              </p>
+            )}
+          </div>
+        </Panel>
+        <PanelResizeHandleVertical />
+        <Panel>
+          <Editor />
+        </Panel>
+      </PanelGroup>
+    </>
   )
 }
 
diff --git a/src/app/tutorials/[...slug]/page.disabled.tsx b/src/app/tutorials/[...slug]/page.tsx
similarity index 91%
rename from src/app/tutorials/[...slug]/page.disabled.tsx
rename to src/app/tutorials/[...slug]/page.tsx
index e5c2f64a6..7df1948f3 100644
--- a/src/app/tutorials/[...slug]/page.disabled.tsx
+++ b/src/app/tutorials/[...slug]/page.tsx
@@ -1,11 +1,11 @@
-import { MDX } from "@/components/atoms/mdx"
-import { Navigation } from "@/components/editor/components/tutorial/navigation"
-import { groupedTutorials, tutorialSection } from "@/workspaces/domain/tutorial"
 import { allTutorials } from "contentlayer/generated"
-import * as FS from "fs/promises"
 import { notFound } from "next/navigation"
-import * as Path from "path"
-import { Tutorial } from "./components/tutorial"
+import * as FS from "node:fs/promises"
+import * as Path from "node:path"
+import { MDX } from "@/components/atoms/mdx"
+import { groupedTutorials, tutorialSection } from "@/workspaces/domain/tutorial"
+import { Navigation } from "./components/Navigation"
+import { Tutorial } from "./components/Tutorial"
 
 export const generateStaticParams = () =>
   allTutorials.map((page) => ({
diff --git a/src/app/tutorials/layout.tsx b/src/app/tutorials/layout.tsx
index c088643b5..ad9aef5cc 100644
--- a/src/app/tutorials/layout.tsx
+++ b/src/app/tutorials/layout.tsx
@@ -1,12 +1,10 @@
-import { Navigation } from "@/components/layout/navigation"
-import { Toaster } from "@/components/ui/toaster"
 import { ReactNode } from "react"
+import { Toaster } from "@/components/ui/toaster"
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <>
       <div className="h-screen flex flex-col">
-        <Navigation inline />
         {children}
       </div>
       <Toaster />
diff --git a/src/components/editor/CodeEditor.tsx b/src/components/editor/CodeEditor.tsx
index 4e65fc88b..f8c67063e 100644
--- a/src/components/editor/CodeEditor.tsx
+++ b/src/components/editor/CodeEditor.tsx
@@ -6,9 +6,9 @@ import { LoadingSpinner } from "@/components/ui/loading-spinner"
 import { Workspace } from "@/workspaces/domain/workspace"
 import { useWorkspaceHandle, useWorkspaceShells } from "@/workspaces/context"
 import { WorkspaceProvider } from "@/workspaces/WorkspaceProvider"
-import { FileEditor } from "./components/common/file-editor"
-import { FileExplorer } from "./components/common/file-explorer"
-import { Terminal } from "./components/common/terminal"
+import { FileEditor } from "./components/file-editor"
+import { FileExplorer } from "./components/file-explorer"
+import { Terminal } from "./components/terminal"
 import { PanelResizeHandleVertical } from "../ui/resizable"
 import { TooltipProvider } from "../ui/tooltip"
 
diff --git a/src/components/editor/components/common/file-editor.tsx b/src/components/editor/components/file-editor.tsx
similarity index 96%
rename from src/components/editor/components/common/file-editor.tsx
rename to src/components/editor/components/file-editor.tsx
index b75bd123c..36f9e8747 100644
--- a/src/components/editor/components/common/file-editor.tsx
+++ b/src/components/editor/components/file-editor.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils"
 import { useRxSet, useRxValue } from "@effect-rx/rx-react"
 import * as Option from "effect/Option"
 import { useWorkspaceHandle } from "@/workspaces/context"
-import { editorRx } from "../../rx"
+import { editorRx } from "../rx"
 
 export function FileEditor() {
   const handle = useWorkspaceHandle()
diff --git a/src/components/editor/components/common/file-explorer.tsx b/src/components/editor/components/file-explorer.tsx
similarity index 100%
rename from src/components/editor/components/common/file-explorer.tsx
rename to src/components/editor/components/file-explorer.tsx
diff --git a/src/components/editor/components/common/file-explorer/directory-node.tsx b/src/components/editor/components/file-explorer/directory-node.tsx
similarity index 100%
rename from src/components/editor/components/common/file-explorer/directory-node.tsx
rename to src/components/editor/components/file-explorer/directory-node.tsx
diff --git a/src/components/editor/components/common/file-explorer/file-input.tsx b/src/components/editor/components/file-explorer/file-input.tsx
similarity index 100%
rename from src/components/editor/components/common/file-explorer/file-input.tsx
rename to src/components/editor/components/file-explorer/file-input.tsx
diff --git a/src/components/editor/components/common/file-explorer/file-node.tsx b/src/components/editor/components/file-explorer/file-node.tsx
similarity index 100%
rename from src/components/editor/components/common/file-explorer/file-node.tsx
rename to src/components/editor/components/file-explorer/file-node.tsx
diff --git a/src/components/editor/components/common/file-explorer/file-tree.tsx b/src/components/editor/components/file-explorer/file-tree.tsx
similarity index 100%
rename from src/components/editor/components/common/file-explorer/file-tree.tsx
rename to src/components/editor/components/file-explorer/file-tree.tsx
diff --git a/src/components/editor/components/common/terminal.css b/src/components/editor/components/terminal.css
similarity index 100%
rename from src/components/editor/components/common/terminal.css
rename to src/components/editor/components/terminal.css
diff --git a/src/components/editor/components/common/terminal.tsx b/src/components/editor/components/terminal.tsx
similarity index 100%
rename from src/components/editor/components/common/terminal.tsx
rename to src/components/editor/components/terminal.tsx
diff --git a/src/components/editor/components/tutorial/toolbar.tsx b/src/components/editor/components/tutorial/toolbar.tsx
deleted file mode 100644
index be0a113e3..000000000
--- a/src/components/editor/components/tutorial/toolbar.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react"
-import { SolveButton } from "./solve-button"
-
-export declare namespace Toolbar {
-  export interface Props {}
-}
-
-export const Toolbar: React.FC<Toolbar.Props> = () => {
-  return (
-    <div className="w-full px-4 flex flex-col items-start justify-between sm:flex-row sm:items-center sm:space-y-0 md:h-16">
-      <div className="w-full ml-auto flex space-x-2 sm:justify-start">
-        <div className="hidden space-x-2 md:flex">
-          <SolveButton />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-Toolbar.displayName = "Toolbar"
\ No newline at end of file
diff --git a/src/components/editor/rx.ts b/src/components/editor/rx.ts
index 77a5b9417..0343f132f 100644
--- a/src/components/editor/rx.ts
+++ b/src/components/editor/rx.ts
@@ -1,13 +1,5 @@
 import { Rx } from "@effect-rx/rx-react"
-import {
-  Console,
-  Effect,
-  Option,
-  Layer,
-  Schedule,
-  Stream,
-  pipe
-} from "effect"
+import { Effect, Option, Layer, Schedule, Stream, pipe } from "effect"
 import { themeRx } from "@/rx/theme"
 import { File, FullPath } from "@/workspaces/domain/workspace"
 import { RxWorkspaceHandle } from "@/workspaces/rx"
diff --git a/src/tutorials/incremental-adoption/100/repo.ts b/src/tutorials/incremental-adoption/100/repo.ts
index ad723a28a..9d706c810 100644
--- a/src/tutorials/incremental-adoption/100/repo.ts
+++ b/src/tutorials/incremental-adoption/100/repo.ts
@@ -25,14 +25,13 @@ export class TodoRepository {
   }
 
   create(text: string): Effect.Effect<Todo> {
-    const self = this
-    return Effect.gen(function*() {
-      const todos = yield* Effect.promise(() => self.getAll())
+    return Effect.gen(this, function*() {
+      const todos = yield* Effect.promise(() => this.getAll())
       const maxId = todos.reduce((max, todo) =>
         todo.id > max ? todo.id : max,
       0)
       const newTodo = { id: maxId + 1, text, completed: false }
-      self.todos.push(newTodo)
+      this.todos.push(newTodo)
       return newTodo
     })
   }
diff --git a/src/tutorials/incremental-adoption/200/main.initial.txt b/src/tutorials/incremental-adoption/200/main.initial.txt
new file mode 100644
index 000000000..6f6a101d0
--- /dev/null
+++ b/src/tutorials/incremental-adoption/200/main.initial.txt
@@ -0,0 +1,23 @@
+import Express from "express"
+import { Effect } from "effect"
+import { TodoRepository } from "./repo"
+
+const app = Express()
+
+app.use(Express.json() as Express.NextFunction)
+
+const repo = new TodoRepository()
+
+// Create Todo
+app.post("/todos", (req, res) => {
+  repo.create(req.body.text).pipe(
+    /* Your Code Here */
+    Effect.runPromise
+  )
+})
+
+/* snip */
+
+app.listen(3000, () => {
+  console.log("Server listing on port 3000...")
+})
diff --git a/src/tutorials/incremental-adoption/200/main.ts b/src/tutorials/incremental-adoption/200/main.ts
new file mode 100644
index 000000000..556a56196
--- /dev/null
+++ b/src/tutorials/incremental-adoption/200/main.ts
@@ -0,0 +1,31 @@
+import Express from "express"
+import { Effect } from "effect"
+import { TodoRepository } from "./repo"
+
+const app = Express()
+
+app.use(Express.json() as Express.NextFunction)
+
+const repo = new TodoRepository()
+
+// Create Todo
+app.post("/todos", (req, res) => {
+  repo.create(req.body.text).pipe(
+    Effect.andThen((todo) => res.json(todo)),
+    Effect.catchTag("CreateTodoError", (error) =>
+      Effect.sync(() => {
+        res.status(500).json({
+          type: error._tag,
+          text: error.text
+        })
+      })
+    ),
+    Effect.runPromise
+  )
+})
+
+/* snip */
+
+app.listen(3000, () => {
+  console.log("Server listing on port 3000...")
+})
diff --git a/src/tutorials/incremental-adoption/200/repo.ts b/src/tutorials/incremental-adoption/200/repo.ts
new file mode 100644
index 000000000..2b22ecfcc
--- /dev/null
+++ b/src/tutorials/incremental-adoption/200/repo.ts
@@ -0,0 +1,66 @@
+import { Data, Effect, Random } from "effect"
+
+export interface Todo {
+  readonly id: number
+  readonly text: string
+  readonly completed: boolean
+}
+
+export class CreateTodoError extends Data.TaggedError("CreateTodoError")<{
+  readonly text: string
+}> {}
+
+export class TodoRepository {
+  readonly todos: Array<Todo> = [
+    { id: 1, text: "Finish homework", completed: false },
+    { id: 2, text: "Buy groceries", completed: false },
+    { id: 3, text: "Write report", completed: false },
+    { id: 4, text: "Clean house", completed: false },
+    { id: 5, text: "Pay bills", completed: false }
+  ]
+
+  get(id: number): Promise<Todo | undefined> {
+    const todo = this.todos.find((todo) => todo.id === id)
+    return Promise.resolve(todo)
+  }
+
+  getAll(): Promise<ReadonlyArray<Todo>> {
+    return Promise.resolve(this.todos)
+  }
+
+  create(text: string): Effect.Effect<Todo, CreateTodoError> {
+    return Effect.gen(this, function*() {
+      if ((yield* Random.next) > 0.5) {
+        return yield* new CreateTodoError({ text })
+      }
+      const todos = yield* Effect.promise(() => this.getAll())
+      const maxId = todos.reduce((max, todo) =>
+        todo.id > max ? todo.id : max,
+      0)
+      const newTodo = { id: maxId + 1, text, completed: false }
+      this.todos.push(newTodo)
+      return newTodo
+    })
+  }
+
+  async update(
+    id: number,
+    props: Partial<Omit<Todo, "id">>
+  ): Promise<Todo | undefined> {
+    const todo = await this.get(id)
+    if (todo) {
+      Object.assign(todo, props)
+      return Promise.resolve(todo)
+    }
+    return Promise.resolve(undefined)
+  }
+
+  delete(id: number): Promise<boolean> {
+    const index = this.todos.findIndex((todo) => todo.id === id)
+    if (index !== -1) {
+      this.todos.splice(index, 1)
+      return Promise.resolve(true)
+    }
+    return Promise.resolve(false)
+  }
+}
diff --git a/src/tutorials/incremental-adoption/300/main.ts b/src/tutorials/incremental-adoption/300/main.ts
new file mode 100644
index 000000000..9d94fb1ef
--- /dev/null
+++ b/src/tutorials/incremental-adoption/300/main.ts
@@ -0,0 +1,42 @@
+import Express from "express"
+import { Effect } from "effect"
+import { TodoRepository } from "./repo"
+
+const app = Express()
+
+app.use(Express.json() as Express.NextFunction)
+
+const repo = new TodoRepository()
+
+
+// Create Todo
+app.post("/todos", (req, res) => {
+  repo.create(req.body.text).then((todo) => res.json(todo))
+})
+
+// Read Todo
+app.get("/todos/:id", (req, res) => {
+  const id = Number.parseInt(req.params.id)
+  repo.get(id).then((todo) => res.json(todo))
+})
+
+// Read Todos
+app.get("/todos", (_, res) => {
+  repo.getAll().then((todos) => res.json(todos))
+})
+
+// Update Todo
+app.patch("/todos/:id", (req, res) => {
+  const id = Number.parseInt(req.params.id)
+  repo.update(id, req.body).then((todo) => res.json(todo))
+})
+
+// Delete Todo
+app.delete("/todos/:id", (req, res) => {
+  const id = Number.parseInt(req.params.id)
+  repo.delete(id).then((deleted) => res.json(deleted))
+})
+
+app.listen(3000, () => {
+  console.log("Server listing on port 3000...")
+})
diff --git a/src/tutorials/incremental-adoption/300/repo.ts b/src/tutorials/incremental-adoption/300/repo.ts
new file mode 100644
index 000000000..9d706c810
--- /dev/null
+++ b/src/tutorials/incremental-adoption/300/repo.ts
@@ -0,0 +1,59 @@
+import { Effect } from "effect"
+
+export interface Todo {
+  readonly id: number
+  readonly text: string
+  readonly completed: boolean
+}
+
+export class TodoRepository {
+  readonly todos: Array<Todo> = [
+    { id: 1, text: "Finish homework", completed: false },
+    { id: 2, text: "Buy groceries", completed: false },
+    { id: 3, text: "Write report", completed: false },
+    { id: 4, text: "Clean house", completed: false },
+    { id: 5, text: "Pay bills", completed: false }
+  ]
+
+  get(id: number): Promise<Todo | undefined> {
+    const todo = this.todos.find((todo) => todo.id === id)
+    return Promise.resolve(todo)
+  }
+
+  getAll(): Promise<ReadonlyArray<Todo>> {
+    return Promise.resolve(this.todos)
+  }
+
+  create(text: string): Effect.Effect<Todo> {
+    return Effect.gen(this, function*() {
+      const todos = yield* Effect.promise(() => this.getAll())
+      const maxId = todos.reduce((max, todo) =>
+        todo.id > max ? todo.id : max,
+      0)
+      const newTodo = { id: maxId + 1, text, completed: false }
+      this.todos.push(newTodo)
+      return newTodo
+    })
+  }
+
+  async update(
+    id: number,
+    props: Partial<Omit<Todo, "id">>
+  ): Promise<Todo | undefined> {
+    const todo = await this.get(id)
+    if (todo) {
+      Object.assign(todo, props)
+      return Promise.resolve(todo)
+    }
+    return Promise.resolve(undefined)
+  }
+
+  delete(id: number): Promise<boolean> {
+    const index = this.todos.findIndex((todo) => todo.id === id)
+    if (index !== -1) {
+      this.todos.splice(index, 1)
+      return Promise.resolve(true)
+    }
+    return Promise.resolve(false)
+  }
+}

From 0e735333465792845f365817f3dbe3335c7bea7f Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Thu, 13 Jun 2024 15:12:49 -0400
Subject: [PATCH 2/9] add section on managing requirements to incremental
 adoption tutorial

---
 .../200-dealing-with-errors.mdx               |   2 +-
 .../300-handling-requirements.mdx             | 108 ++++++++++++++++
 src/tutorials/common.ts                       |   3 +-
 src/tutorials/incremental-adoption/0/main.ts  |   2 +-
 .../incremental-adoption/200/main.ts          |   4 +-
 .../incremental-adoption/300/main.initial.txt |  40 ++++++
 .../incremental-adoption/300/main.ts          |  54 ++++++--
 .../incremental-adoption/300/repo.ts          | 121 +++++++++++-------
 8 files changed, 276 insertions(+), 58 deletions(-)
 create mode 100644 content/tutorials/incremental-adoption/300-handling-requirements.mdx
 create mode 100644 src/tutorials/incremental-adoption/300/main.initial.txt

diff --git a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
index c22582a67..5a043561c 100644
--- a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
+++ b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
@@ -167,7 +167,7 @@ The team in charge of the `TodoRepository` has continued to refactor the `create
 Using what we have learned above, your tasks for this exercise include:
 
   - If creation of a `Todo` results in a `CreateTodoError`
-    - Set the response status code to `500`
+    - Set the response status code to `404`
     - Return a JSON response that conforms to the following `{ "type": "CreateTodoError", "text": <TODO_TEXT> }`
 
 In the editor to the right, modify the code to restore functionality to our server. Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
diff --git a/content/tutorials/incremental-adoption/300-handling-requirements.mdx b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
new file mode 100644
index 000000000..c472162b4
--- /dev/null
+++ b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
@@ -0,0 +1,108 @@
+---
+title: Handling Requirements
+excerpt: Learn how to incrementally adopt Effect into your application
+section: Incremental Adoption
+workspace: express
+---
+
+### Handling Requirements
+
+Utilizing `Effect.runPromise` to interop with your existing application is fine when you are just getting started with adopting Effect. However, it will quickly become apparent that this approach does not scale, especially once you start using Effect to manage the requirements of your application and `Layer`s to compose the dependency graph between services.
+
+<Idea>
+For a detailed walkthrough of how to manage requirements within your Effect applications, take a look at the <a href="/docs/guides/context-management" target="_blank">Requirements Management</a> section of the documentation.
+</Idea>
+
+### Understanding the Problem
+
+To understand the problem, let's take a look at a simple example where we create a `Layer` which logs `"Hello, World"` when constructed. The layer is then provided to two Effect programs which are executed at two separate execution boundaries.
+
+```ts twoslash
+import { Console, Effect, Layer } from "effect"
+
+const HelloWorldLive = Layer.effectDiscard(
+  Console.log("Hello, World!")
+)
+
+async function main() {
+  // Execution Boundary #1
+  await Effect.succeed(1).pipe(
+    Effect.provide(HelloWorldLive),
+    Effect.runPromise
+  )
+
+  // Execution Boundary #2
+  await Effect.succeed(2).pipe(
+    Effect.provide(HelloWorldLive),
+    Effect.runPromise
+  )
+}
+
+main()
+/**
+ * Output:
+ * Hello, World!
+ * Hello, World!
+ */
+```
+
+As you can see from the output, the message `"Hello, World!"` is logged twice. This is because each call to `Effect.provide` will fully construct the dependency graph specified by the `Layer` and then provide it to the Effect program. This can create problems when your layers are meant to encapsulate logic that is only meant to be executed **once** (for example, creating a database connection pool) or when layer construction is **expensive** (for example, fetching a large number of remote assets and caching them in memory).
+
+To solve this problem, we need some sort of top-level, re-usable Effect `Runtime` which contains our fully constructed dependency graph, and then use that `Runtime` to execute our Effect programs instead of the default `Runtime` used by the `Effect.run*` methods.
+
+### Managed Runtimes
+
+The `ManagedRuntime` data type in Effect allows us to create a top-level, re-usable Effect `Runtime` which encapsulates a fully constructed dependency graph. In addition, `ManagedRuntime` gives us explicit control over when resources acquired by the runtime should be disposed.
+
+```ts twoslash
+import { Console, Effect, Layer, ManagedRuntime } from "effect"
+
+const HelloWorldLive = Layer.effectDiscard(
+  Console.log("Hello, World!")
+)
+
+// Create a managed runtime from our layer
+const runtime = ManagedRuntime.make(HelloWorldLive)
+
+async function main() {
+  // Execution Boundary #1
+  await Effect.succeed(1).pipe(
+    runtime.runPromise
+  )
+
+  // Execution Boundary #2
+  await Effect.succeed(2).pipe(
+    runtime.runPromise
+  )
+
+  // Dispose of resources when no longer needed
+  await runtime.dispose()
+}
+
+main()
+/**
+ * Output:
+ * Hello, World!
+ */
+```
+
+Some things to note about the program above include:
+
+  - `"Hello, World!"` is only logged to the console once
+  - We no longer have to provide `HelloWorldLive` to each Effect program
+  - Resources acquired by the `ManagedRuntime` must be manually disposed of
+
+### Exercise
+
+The team in charge of the `TodoRepository` has been hard at work and has managed to convert the `TodoRepository` into a completely Effect-based service complete with a `Layer` for service construction.
+
+Using what we have learned above, your tasks for this exercise include:
+
+  - Create a `ManagedRuntime` which takes in the `TodoRepository` layer
+  - Use the `ManagedRuntime` to run the Effect programs within the Express route handlers
+  - For any Effect program which may result in a `TodoNotFoundError`:
+    - Set the response status code to `404`
+    - Return a JSON response that conforms to the following `{ "type": "TodoNotFound", "id": <TODO_ID> }`
+  - **BONUS**: properly dispose of the `ManagedRuntime` when the server shuts down
+
+In the editor to the right, modify the code to restore functionality to our server. Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
diff --git a/src/tutorials/common.ts b/src/tutorials/common.ts
index f2bd99a01..3543877b3 100644
--- a/src/tutorials/common.ts
+++ b/src/tutorials/common.ts
@@ -23,7 +23,8 @@ export const tutorialWorkspaces: ReadonlyRecord<
     name: "express",
     dependencies: {
       ...packageJson.dependencies,
-      express: "latest"
+      express: "latest",
+      "@types/express": "latest"
     },
     shells: [
       new WorkspaceShell({ label: "Server", command: "../run src/main.ts" }),
diff --git a/src/tutorials/incremental-adoption/0/main.ts b/src/tutorials/incremental-adoption/0/main.ts
index bb0c9cc93..f84534c2a 100644
--- a/src/tutorials/incremental-adoption/0/main.ts
+++ b/src/tutorials/incremental-adoption/0/main.ts
@@ -32,7 +32,7 @@ app.patch("/todos/:id", (req, res) => {
 // Delete Todo
 app.delete("/todos/:id", (req, res) => {
   const id = Number.parseInt(req.params.id)
-  repo.delete(id).then((deleted) => res.json(deleted))
+  repo.delete(id).then((deleted) => res.json({ deleted }))
 })
 
 app.listen(3000, () => {
diff --git a/src/tutorials/incremental-adoption/200/main.ts b/src/tutorials/incremental-adoption/200/main.ts
index 556a56196..65ff23480 100644
--- a/src/tutorials/incremental-adoption/200/main.ts
+++ b/src/tutorials/incremental-adoption/200/main.ts
@@ -14,9 +14,9 @@ app.post("/todos", (req, res) => {
     Effect.andThen((todo) => res.json(todo)),
     Effect.catchTag("CreateTodoError", (error) =>
       Effect.sync(() => {
-        res.status(500).json({
+        res.status(404).json({
           type: error._tag,
-          text: error.text
+          text: error.text ?? ""
         })
       })
     ),
diff --git a/src/tutorials/incremental-adoption/300/main.initial.txt b/src/tutorials/incremental-adoption/300/main.initial.txt
new file mode 100644
index 000000000..f84534c2a
--- /dev/null
+++ b/src/tutorials/incremental-adoption/300/main.initial.txt
@@ -0,0 +1,40 @@
+import Express from "express"
+import { TodoRepository } from "./repo"
+
+const app = Express()
+
+app.use(Express.json() as Express.NextFunction)
+
+const repo = new TodoRepository()
+
+// Create Todo
+app.post("/todos", (req, res) => {
+  repo.create(req.body.text).then((todo) => res.json(todo))
+})
+
+// Read Todo
+app.get("/todos/:id", (req, res) => {
+  const id = Number.parseInt(req.params.id)
+  repo.get(id).then((todo) => res.json(todo))
+})
+
+// Read Todos
+app.get("/todos", (_, res) => {
+  repo.getAll().then((todos) => res.json(todos))
+})
+
+// Update Todo
+app.patch("/todos/:id", (req, res) => {
+  const id = Number.parseInt(req.params.id)
+  repo.update(id, req.body).then((todo) => res.json(todo))
+})
+
+// Delete Todo
+app.delete("/todos/:id", (req, res) => {
+  const id = Number.parseInt(req.params.id)
+  repo.delete(id).then((deleted) => res.json({ deleted }))
+})
+
+app.listen(3000, () => {
+  console.log("Server listing on port 3000...")
+})
diff --git a/src/tutorials/incremental-adoption/300/main.ts b/src/tutorials/incremental-adoption/300/main.ts
index 9d94fb1ef..623411825 100644
--- a/src/tutorials/incremental-adoption/300/main.ts
+++ b/src/tutorials/incremental-adoption/300/main.ts
@@ -1,42 +1,78 @@
 import Express from "express"
-import { Effect } from "effect"
+import { Effect, ManagedRuntime } from "effect"
 import { TodoRepository } from "./repo"
 
 const app = Express()
 
 app.use(Express.json() as Express.NextFunction)
 
-const repo = new TodoRepository()
-
+const runtime = ManagedRuntime.make(TodoRepository.Live)
 
 // Create Todo
 app.post("/todos", (req, res) => {
-  repo.create(req.body.text).then((todo) => res.json(todo))
+  TodoRepository.create(req.body.text).pipe(
+    Effect.andThen((todo) => res.json(todo)),
+    runtime.runPromise
+  )
 })
 
 // Read Todo
 app.get("/todos/:id", (req, res) => {
   const id = Number.parseInt(req.params.id)
-  repo.get(id).then((todo) => res.json(todo))
+  TodoRepository.get(id).pipe(
+    Effect.andThen((todo) => res.json(todo)),
+    Effect.catchTag("TodoNotFoundError", () =>
+      Effect.sync(() => {
+        res.status(404).json({ type: "TodoNotFound", id })
+      })
+    ),
+    runtime.runPromise
+  )
 })
 
 // Read Todos
 app.get("/todos", (_, res) => {
-  repo.getAll().then((todos) => res.json(todos))
+  TodoRepository.getAll.pipe(
+    Effect.andThen((todos) => res.json(todos)),
+    runtime.runPromise
+  )
 })
 
 // Update Todo
 app.patch("/todos/:id", (req, res) => {
   const id = Number.parseInt(req.params.id)
-  repo.update(id, req.body).then((todo) => res.json(todo))
+  TodoRepository.update(id, req.body).pipe(
+    Effect.andThen((todo) => res.json(todo)),
+    Effect.catchTag("TodoNotFoundError", () =>
+      Effect.sync(() => {
+        res.status(404).json({ type: "TodoNotFound", id })
+      })
+    ),
+    runtime.runPromise
+  )
 })
 
 // Delete Todo
 app.delete("/todos/:id", (req, res) => {
   const id = Number.parseInt(req.params.id)
-  repo.delete(id).then((deleted) => res.json(deleted))
+  TodoRepository.delete(id).pipe(
+    Effect.andThen((deleted) => res.json({ deleted })),
+    runtime.runPromise
+  )
 })
 
-app.listen(3000, () => {
+const server = app.listen(3000, () => {
   console.log("Server listing on port 3000...")
 })
+
+// Graceful Shutdown
+process.on("SIGTERM", shutdown)
+process.on("SIGINT", shutdown)
+
+function shutdown() {
+  server.close(() => {
+    runtime.dispose().then(() => {
+      process.exit(0)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/tutorials/incremental-adoption/300/repo.ts b/src/tutorials/incremental-adoption/300/repo.ts
index 9d706c810..01d4ef4cb 100644
--- a/src/tutorials/incremental-adoption/300/repo.ts
+++ b/src/tutorials/incremental-adoption/300/repo.ts
@@ -1,59 +1,92 @@
-import { Effect } from "effect"
+import { Array, Data, Effect, Layer, Option, Ref } from "effect"
 
-export interface Todo {
+export class Todo extends Data.TaggedClass("Todo")<{
   readonly id: number
   readonly text: string
   readonly completed: boolean
-}
+}> {}
 
-export class TodoRepository {
-  readonly todos: Array<Todo> = [
-    { id: 1, text: "Finish homework", completed: false },
-    { id: 2, text: "Buy groceries", completed: false },
-    { id: 3, text: "Write report", completed: false },
-    { id: 4, text: "Clean house", completed: false },
-    { id: 5, text: "Pay bills", completed: false }
-  ]
-
-  get(id: number): Promise<Todo | undefined> {
-    const todo = this.todos.find((todo) => todo.id === id)
-    return Promise.resolve(todo)
-  }
+export class TodoNotFoundError extends Data.TaggedError("TodoNotFoundError")<{
+  readonly id: number
+}> {}
+
+const initialTodos: ReadonlyArray<Todo> = [
+  new Todo({ id: 1, text: "Finish homework", completed: false }),
+  new Todo({ id: 2, text: "Buy groceries", completed: false }),
+  new Todo({ id: 3, text: "Write report", completed: false }),
+  new Todo({ id: 4, text: "Clean house", completed: false }),
+  new Todo({ id: 5, text: "Pay bills", completed: false })
+]
+
+export const make = Effect.gen(function* () {
+  const todosRef = yield* Ref.make(initialTodos)
 
-  getAll(): Promise<ReadonlyArray<Todo>> {
-    return Promise.resolve(this.todos)
+  const getAllTodos = Ref.get(todosRef)
+
+  function getTodo(id: number) {
+    return Ref.get(todosRef).pipe(
+      Effect.andThen(Array.findFirst((todo) => todo.id === id)),
+      Effect.catchTag(
+        "NoSuchElementException",
+        () => new TodoNotFoundError({ id })
+      )
+    )
   }
 
-  create(text: string): Effect.Effect<Todo> {
-    return Effect.gen(this, function*() {
-      const todos = yield* Effect.promise(() => this.getAll())
-      const maxId = todos.reduce((max, todo) =>
-        todo.id > max ? todo.id : max,
-      0)
-      const newTodo = { id: maxId + 1, text, completed: false }
-      this.todos.push(newTodo)
-      return newTodo
+  function createTodo(text: string) {
+    return Ref.modify(todosRef, (todos) => {
+      const maxTodoId = Array.reduce(todos, 0, (max, todo) =>
+        todo.id > max ? todo.id : max
+      )
+      const newTodo = new Todo({ id: maxTodoId + 1, text, completed: false })
+      return [newTodo, Array.append(todos, newTodo)] as const
     })
   }
 
-  async update(
-    id: number,
-    props: Partial<Omit<Todo, "id">>
-  ): Promise<Todo | undefined> {
-    const todo = await this.get(id)
-    if (todo) {
-      Object.assign(todo, props)
-      return Promise.resolve(todo)
-    }
-    return Promise.resolve(undefined)
+  function updateTodo(id: number, props: Partial<Omit<Todo, "id">>) {
+    return Ref.modify(todosRef, (todos) => {
+      const updated: Array<Todo> = []
+      let newTodo: Todo | undefined = undefined
+      for (const todo of todos) {
+        if (todo.id === id) {
+          newTodo = new Todo({ ...todo, ...props })
+          updated.push(newTodo)
+        } else {
+          updated.push(todo)
+        }
+      }
+      return [Option.fromNullable(newTodo), updated] as const
+    }).pipe(
+      Effect.flatten,
+      Effect.catchTag(
+        "NoSuchElementException",
+        () => new TodoNotFoundError({ id })
+      )
+    )
   }
 
-  delete(id: number): Promise<boolean> {
-    const index = this.todos.findIndex((todo) => todo.id === id)
-    if (index !== -1) {
-      this.todos.splice(index, 1)
-      return Promise.resolve(true)
-    }
-    return Promise.resolve(false)
+  function deleteTodo(id: number) {
+    return Ref.modify(todosRef, (todos) => {
+      const index = Array.findFirstIndex(todos, (todo) => todo.id === id)
+      return Option.match(index, {
+        onNone: () => [false, todos] as const,
+        onSome: (index) => [true, Array.remove(todos, index)] as const
+      })
+    })
   }
+
+  return {
+    get: getTodo,
+    getAll: getAllTodos,
+    create: createTodo,
+    update: updateTodo,
+    delete: deleteTodo
+  } as const
+})
+
+export class TodoRepository extends Effect.Tag("app/TodoRepository")<
+  TodoRepository,
+  Effect.Effect.Success<typeof make>
+>() {
+  static Live = Layer.effect(this, make)
 }

From b9a896840ba81354de306c8fd26fe98ff5bc8f5c Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Fri, 14 Jun 2024 11:34:30 -0400
Subject: [PATCH 3/9] add landing page for effect tutorials

---
 .../basics/100-your-first-effect.mdx          |   2 -
 .../tutorials/basics/200-returning-values.mdx |   1 -
 .../basics/300-combining-effects.mdx          |   1 -
 .../tutorials/basics/400-using-generators.mdx |   1 -
 content/tutorials/basics/index.mdx            |   8 +-
 .../100-getting-started.mdx                   |   2 -
 .../200-dealing-with-errors.mdx               |   2 -
 .../300-handling-requirements.mdx             |   2 -
 .../tutorials/incremental-adoption/index.mdx  |   8 +-
 package.json                                  |   4 +
 pnpm-lock.yaml                                | 111 +++++++++++
 .../[...slug]/components/Navigation.tsx       |   1 +
 src/app/tutorials/[...slug]/page.tsx          |  33 ++--
 .../components/DifficultySelector.tsx         |  68 +++++++
 .../tutorials/components/TutorialsDisplay.tsx | 151 +++++++++++++++
 src/app/tutorials/layout.tsx                  |   6 +-
 src/app/tutorials/page.tsx                    |  24 +++
 src/components/icons/chevron-down.tsx         |   4 +-
 src/components/ui/card.tsx                    |  83 +++++++++
 src/components/ui/checkbox.tsx                |  29 +++
 src/components/ui/form.tsx                    | 176 ++++++++++++++++++
 src/components/ui/select.tsx                  | 164 ++++++++++++++++
 src/contentlayer/schema/tutorial.ts           |  13 +-
 23 files changed, 860 insertions(+), 34 deletions(-)
 create mode 100644 src/app/tutorials/components/DifficultySelector.tsx
 create mode 100644 src/app/tutorials/components/TutorialsDisplay.tsx
 create mode 100644 src/app/tutorials/page.tsx
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/checkbox.tsx
 create mode 100644 src/components/ui/form.tsx
 create mode 100644 src/components/ui/select.tsx

diff --git a/content/tutorials/basics/100-your-first-effect.mdx b/content/tutorials/basics/100-your-first-effect.mdx
index ed85e9573..36f919207 100644
--- a/content/tutorials/basics/100-your-first-effect.mdx
+++ b/content/tutorials/basics/100-your-first-effect.mdx
@@ -1,7 +1,5 @@
 ---
 title: Your first Effect
-excerpt: Learn the basics of Effect
-section: Learn the basics
 ---
 
 ### What is an Effect?
diff --git a/content/tutorials/basics/200-returning-values.mdx b/content/tutorials/basics/200-returning-values.mdx
index 902f106a5..cae054c4d 100644
--- a/content/tutorials/basics/200-returning-values.mdx
+++ b/content/tutorials/basics/200-returning-values.mdx
@@ -1,6 +1,5 @@
 ---
 title: Returning values
-excerpt: Learn the basics of Effect
 ---
 
 Congratulations on running your first Effect!
diff --git a/content/tutorials/basics/300-combining-effects.mdx b/content/tutorials/basics/300-combining-effects.mdx
index 201d8115c..c3983d72c 100644
--- a/content/tutorials/basics/300-combining-effects.mdx
+++ b/content/tutorials/basics/300-combining-effects.mdx
@@ -1,6 +1,5 @@
 ---
 title: Combining Effects
-excerpt: Learn the basics of Effect
 ---
 
 Now that you can create and run effects, let's take a look at how you can
diff --git a/content/tutorials/basics/400-using-generators.mdx b/content/tutorials/basics/400-using-generators.mdx
index 366a5ca57..ec2b5db17 100644
--- a/content/tutorials/basics/400-using-generators.mdx
+++ b/content/tutorials/basics/400-using-generators.mdx
@@ -1,6 +1,5 @@
 ---
 title: Using generators
-excerpt: Learn the basics of Effect
 ---
 
 To make using Effect more approachable, we can use generators to write our
diff --git a/content/tutorials/basics/index.mdx b/content/tutorials/basics/index.mdx
index ff83b1e1a..e72485d49 100644
--- a/content/tutorials/basics/index.mdx
+++ b/content/tutorials/basics/index.mdx
@@ -1,7 +1,11 @@
 ---
 title: Welcome
-excerpt: Learn the basics of Effect
-section: Learn the basics
+excerpt: Learn the basics of Effect by exploring fundamental concepts and core data types.
+section: The Basics of Effect
+difficulty: beginner
+prerequisites:
+  - Familiarity with asynchronous programming in JavaScript
+  - Basic understanding of TypeScript syntax and features
 ---
 
 Welcome to the Effect tutorials!
diff --git a/content/tutorials/incremental-adoption/100-getting-started.mdx b/content/tutorials/incremental-adoption/100-getting-started.mdx
index 60b1bbe1f..c7916365a 100644
--- a/content/tutorials/incremental-adoption/100-getting-started.mdx
+++ b/content/tutorials/incremental-adoption/100-getting-started.mdx
@@ -1,7 +1,5 @@
 ---
 title: Getting Started
-excerpt: Learn how to incrementally adopt Effect into your application
-section: Incremental Adoption
 workspace: express
 ---
 
diff --git a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
index 5a043561c..19c14da04 100644
--- a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
+++ b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
@@ -1,7 +1,5 @@
 ---
 title: Dealing with Errors
-excerpt: Learn how to incrementally adopt Effect into your application
-section: Incremental Adoption
 workspace: express
 ---
 
diff --git a/content/tutorials/incremental-adoption/300-handling-requirements.mdx b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
index c472162b4..95042f4cd 100644
--- a/content/tutorials/incremental-adoption/300-handling-requirements.mdx
+++ b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
@@ -1,7 +1,5 @@
 ---
 title: Handling Requirements
-excerpt: Learn how to incrementally adopt Effect into your application
-section: Incremental Adoption
 workspace: express
 ---
 
diff --git a/content/tutorials/incremental-adoption/index.mdx b/content/tutorials/incremental-adoption/index.mdx
index 76296b71a..1a09544d7 100644
--- a/content/tutorials/incremental-adoption/index.mdx
+++ b/content/tutorials/incremental-adoption/index.mdx
@@ -1,8 +1,14 @@
 ---
 title: Introduction
-excerpt: Learn how to incrementally adopt Effect into your application
+excerpt: Explore how Effect can be adopted incrementally into existing applications.
 section: Incremental Adoption
+difficulty: intermediate
 workspace: express
+prerequisites:
+  - Completion of The Basics of Effect
+  - Understanding of how effects are executed
+  - Ability to handle errors with Effect
+  - Comfort managing requirements with Effect
 ---
 
 ### Incrementally Adopting Effect
diff --git a/package.json b/package.json
index db9659946..92c02f5cc 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,16 @@
     "@effect/rpc-http": "^0.28.44",
     "@effect/schema": "^0.67.22",
     "@headlessui/react": "1.7.17",
+    "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
@@ -55,6 +58,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
     "react-instantsearch": "^7.4.1",
     "react-resizable-panels": "^2.0.19",
     "react-tweet": "^3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e91a4c1d7..ece502133 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,12 +32,18 @@ importers:
       '@headlessui/react':
         specifier: 1.7.17
         version: 1.7.17(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@hookform/resolvers':
+        specifier: ^3.6.0
+        version: 3.6.0(react-hook-form@7.51.5(react@18.0.0))
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.0.4
+        version: 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -53,6 +59,9 @@ importers:
       '@radix-ui/react-radio-group':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-select':
+        specifier: ^2.0.0
+        version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.3.2)(react@18.0.0)
@@ -134,6 +143,9 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.0.0(react@18.0.0)
+      react-hook-form:
+        specifier: ^7.51.5
+        version: 7.51.5(react@18.0.0)
       react-instantsearch:
         specifier: ^7.4.1
         version: 7.4.1(algoliasearch@4.23.3)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -841,6 +853,11 @@ packages:
       react: ^16 || ^17 || ^18
       react-dom: ^16 || ^17 || ^18
 
+  '@hookform/resolvers@3.6.0':
+    resolution: {integrity: sha512-UBcpyOX3+RR+dNnqBd0lchXpoL8p4xC21XP8H6Meb8uve5Br1GCnmg0PcBoKKqPKgGu9GHQ/oygcmPrQhetwqw==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -1273,6 +1290,9 @@ packages:
       typescript:
         optional: true
 
+  '@radix-ui/number@1.0.1':
+    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+
   '@radix-ui/primitive@1.0.1':
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
 
@@ -1315,6 +1335,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.0.4':
+    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collapsible@1.0.3':
     resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
     peerDependencies:
@@ -1555,6 +1588,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.0.0':
+    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -4504,6 +4550,12 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  react-hook-form@7.51.5:
+    resolution: {integrity: sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+
   react-instantsearch-core@7.4.1:
     resolution: {integrity: sha512-Nk47IJaCrIecoAfH1vdLStvdOflN+O+TiHqUoLU2NMlQ6cK4OoCQTHG5Vyc1DaiO4uctBkvjcCQhhzZOdk0tRg==}
     peerDependencies:
@@ -5996,6 +6048,10 @@ snapshots:
       react: 18.0.0
       react-dom: 18.0.0(react@18.0.0)
 
+  '@hookform/resolvers@3.6.0(react-hook-form@7.51.5(react@18.0.0))':
+    dependencies:
+      react-hook-form: 7.51.5(react@18.0.0)
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -6435,6 +6491,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@radix-ui/number@1.0.1':
+    dependencies:
+      '@babel/runtime': 7.24.6
+
   '@radix-ui/primitive@1.0.1':
     dependencies:
       '@babel/runtime': 7.24.6
@@ -6482,6 +6542,23 @@ snapshots:
       '@types/react': 18.3.2
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@babel/runtime': 7.24.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.3.2
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@babel/runtime': 7.24.6
@@ -6761,6 +6838,36 @@ snapshots:
       '@types/react': 18.3.2
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-select@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@babel/runtime': 7.24.6
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.3.2)(react@18.0.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      aria-hidden: 1.2.4
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.5.5(@types/react@18.3.2)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.3.2
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.3.2)(react@18.0.0)':
     dependencies:
       '@babel/runtime': 7.24.6
@@ -10371,6 +10478,10 @@ snapshots:
       react: 18.0.0
       scheduler: 0.21.0
 
+  react-hook-form@7.51.5(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+
   react-instantsearch-core@7.4.1(algoliasearch@4.23.3)(react@18.0.0):
     dependencies:
       '@babel/runtime': 7.24.6
diff --git a/src/app/tutorials/[...slug]/components/Navigation.tsx b/src/app/tutorials/[...slug]/components/Navigation.tsx
index f19bfcb90..fb099c49a 100644
--- a/src/app/tutorials/[...slug]/components/Navigation.tsx
+++ b/src/app/tutorials/[...slug]/components/Navigation.tsx
@@ -16,6 +16,7 @@ export declare namespace Navigation {
 }
 
 export const Navigation: React.FC<Navigation.Props> = async ({ tutorial }) => {
+  console.log(groupedTutorials)
   const group = groupedTutorials[tutorialSection(tutorial)]
   const index = group.children.indexOf(tutorial)
   const previous = group.children[index - 1]
diff --git a/src/app/tutorials/[...slug]/page.tsx b/src/app/tutorials/[...slug]/page.tsx
index 7df1948f3..086a14d6b 100644
--- a/src/app/tutorials/[...slug]/page.tsx
+++ b/src/app/tutorials/[...slug]/page.tsx
@@ -3,7 +3,10 @@ import { notFound } from "next/navigation"
 import * as FS from "node:fs/promises"
 import * as Path from "node:path"
 import { MDX } from "@/components/atoms/mdx"
-import { groupedTutorials, tutorialSection } from "@/workspaces/domain/tutorial"
+import {
+  groupedTutorials,
+  tutorialSection
+} from "@/workspaces/domain/tutorial"
 import { Navigation } from "./components/Navigation"
 import { Tutorial } from "./components/Tutorial"
 
@@ -70,19 +73,21 @@ export default async function Page({
   )
 
   return (
-    <Tutorial
-      name={name}
-      files={filesWithContent}
-      workspace={page.workspace}
-      navigation={<Navigation tutorial={page} />}
-      next={
-        next && {
-          title: next.title,
-          url: next.urlPath
+    <div className="h-screen flex flex-col">
+      <Tutorial
+        name={name}
+        files={filesWithContent}
+        workspace={page.workspace}
+        navigation={<Navigation tutorial={page} />}
+        next={
+          next && {
+            title: next.title,
+            url: next.urlPath
+          }
         }
-      }
-    >
-      <MDX content={page.body.code} />
-    </Tutorial>
+      >
+        <MDX content={page.body.code} />
+      </Tutorial>
+    </div>
   )
 }
diff --git a/src/app/tutorials/components/DifficultySelector.tsx b/src/app/tutorials/components/DifficultySelector.tsx
new file mode 100644
index 000000000..1872784ea
--- /dev/null
+++ b/src/app/tutorials/components/DifficultySelector.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import type { Tutorial } from "contentlayer/generated"
+import type { CheckedState } from "@radix-ui/react-checkbox"
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "@/components/ui/accordion"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+
+export type Difficulty = Tutorial["difficulty"]
+
+const levels: ReadonlyArray<{
+  readonly id: Difficulty
+  readonly label: string
+}> = [
+  { id: "beginner", label: "Beginner" },
+  { id: "intermediate", label: "Intermediate" },
+  { id: "advanced", label: "Advanced" }
+]
+
+export function DifficultySelector({
+  onSelect,
+  onUnselect
+}: {
+  readonly onSelect?: (choice: Difficulty) => void
+  readonly onUnselect?: (choice: Difficulty) => void
+}) {
+  const handleCheckedChange = useCallback(
+    (checked: CheckedState, difficulty: Difficulty) => {
+      if (checked) {
+        onSelect?.(difficulty)
+      } else {
+        onUnselect?.(difficulty)
+      }
+    },
+    [onSelect, onUnselect]
+  )
+
+  return (
+    <AccordionItem value="difficulty">
+      <AccordionTrigger className="text-base font-semibold">
+        Difficulty
+      </AccordionTrigger>
+      <AccordionContent>
+        <div className="grid gap-2 ml-4">
+          {levels.map((choice) => (
+            <Label
+              key={choice.id}
+              className="flex items-center gap-2 font-normal"
+            >
+              <Checkbox
+                id={choice.id}
+                onCheckedChange={(checked) =>
+                  handleCheckedChange(checked, choice.id)
+                }
+              />
+              {choice.label}
+            </Label>
+          ))}
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  )
+}
diff --git a/src/app/tutorials/components/TutorialsDisplay.tsx b/src/app/tutorials/components/TutorialsDisplay.tsx
new file mode 100644
index 000000000..787faf564
--- /dev/null
+++ b/src/app/tutorials/components/TutorialsDisplay.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useReducer } from "react"
+import { Data } from "effect"
+import type { Tutorial } from "contentlayer/generated"
+import { Accordion } from "@/components/ui/accordion"
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardTitle
+} from "@/components/ui/card"
+import { Icon } from "@/components/icons"
+import { groupedTutorials, TutorialGroup } from "@/workspaces/domain/tutorial"
+import { DifficultySelector } from "./DifficultySelector"
+
+export type Difficulty = Tutorial["difficulty"]
+
+interface State {
+  readonly difficulties: ReadonlyArray<Difficulty>
+}
+
+type Action = Data.TaggedEnum<{
+  readonly SelectDifficulty: { readonly difficulty: Difficulty }
+  readonly UnselectDifficulty: { readonly difficulty: Difficulty }
+}>
+const Action = Data.taggedEnum<Action>()
+
+const initialState: State = {
+  difficulties: []
+}
+
+function reducer(state: State, action: Action): State {
+  switch (action._tag) {
+    case "SelectDifficulty":
+      return {
+        ...state,
+        difficulties: [...state.difficulties, action.difficulty]
+      }
+    case "UnselectDifficulty":
+      return {
+        ...state,
+        difficulties: state.difficulties.filter(
+          (value) => value !== action.difficulty
+        )
+      }
+  }
+}
+
+function applyDifficultyFilter(
+  tutorials: ReadonlyArray<TutorialGroup>,
+  difficulties: ReadonlyArray<Difficulty>
+): ReadonlyArray<TutorialGroup> {
+  if (difficulties.length === 0) {
+    return tutorials
+  }
+  return tutorials.filter(({ index }) =>
+    difficulties.includes(index.difficulty)
+  )
+}
+
+export function TutorialsDisplay() {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  const groups = Object.values(groupedTutorials)
+  const byDifficulty = applyDifficultyFilter(groups, state.difficulties)
+  const tutorials = byDifficulty.map(({ index }) => index)
+
+  return (
+    <div className="container px-4 md:px-6 grid grid-cols-1 md:grid-cols-[128px_1fr] gap-10 items-start py-12 md:py-20">
+      <div className="flex flex-col gap-6">
+        <Accordion type="multiple" className="w-full">
+          <DifficultySelector
+            onSelect={(difficulty) =>
+              dispatch(Action.SelectDifficulty({ difficulty }))
+            }
+            onUnselect={(difficulty) =>
+              dispatch(Action.UnselectDifficulty({ difficulty }))
+            }
+          />
+        </Accordion>
+      </div>
+
+      <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+        {tutorials.map(
+          ({ _id, urlPath, section, excerpt, prerequisites }) => (
+            <a key={_id} href={urlPath} target="_blank">
+              <Card className="h-full flex flex-col bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-900 cursor-pointer generic-hover">
+                <CardHeader className="pb-2">
+                  <CardTitle className="font-display text-2xl">
+                    {section}
+                  </CardTitle>
+                  <CardDescription className="text-black dark:text-white font-normal dark:font-light">
+                    {excerpt}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="grow">
+                  <h4 className="text-lg font-display font-semibold">
+                    Pre-requisites:
+                  </h4>
+                  <ul className="pl-5 space-y-1 text-sm font-normal dark:font-light text-black dark:text-white list-disc">
+                    {(prerequisites ?? []).map((requirement) => (
+                      <li key={requirement}>{requirement}</li>
+                    ))}
+                  </ul>
+                </CardContent>
+                <CardFooter>
+                  <p className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-gray-50 text-sm font-medium text-gray-50 dark:text-gray-900 rounded-md shadow">
+                    <span>Begin Tutorial</span>
+                    <Icon name="arrow-right" className="h-4" />
+                  </p>
+                </CardFooter>
+              </Card>
+            </a>
+          )
+        )}
+        {/* TODO: remove, only here for UI testing */}
+        <a href="#" target="_blank">
+          <Card className="h-full flex flex-col bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-900 cursor-pointer generic-hover">
+            <CardHeader className="pb-2">
+              <CardTitle className="font-display text-2xl">
+                Lorem Ipsum
+              </CardTitle>
+              <CardDescription className="text-black dark:text-white font-normal dark:font-light">
+                nisl tincidunt eget nullam non nisi est sit amet facilisis
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grow">
+              <h4 className="text-lg font-display font-semibold">
+                Pre-requisites:
+              </h4>
+              <ul className="pl-5 space-y-1 text-sm font-normal dark:font-light text-black dark:text-white list-disc">
+                <li>adipiscing at in tellus integer</li>
+                <li>adipiscing at in tellus integer</li>
+                <li>adipiscing at in tellus integer</li>
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <p className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-gray-50 text-sm font-medium text-gray-50 dark:text-gray-900 rounded-md shadow">
+                <span>Begin Tutorial</span>
+                <Icon name="arrow-right" className="h-4" />
+              </p>
+            </CardFooter>
+          </Card>
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/tutorials/layout.tsx b/src/app/tutorials/layout.tsx
index ad9aef5cc..bef44e50f 100644
--- a/src/app/tutorials/layout.tsx
+++ b/src/app/tutorials/layout.tsx
@@ -1,12 +1,12 @@
 import { ReactNode } from "react"
 import { Toaster } from "@/components/ui/toaster"
+import { Navigation } from "@/components/layout/navigation"
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <div className="h-screen flex flex-col">
-        {children}
-      </div>
+      <Navigation />
+      {children}
       <Toaster />
     </>
   )
diff --git a/src/app/tutorials/page.tsx b/src/app/tutorials/page.tsx
new file mode 100644
index 000000000..7a34335d2
--- /dev/null
+++ b/src/app/tutorials/page.tsx
@@ -0,0 +1,24 @@
+"use server"
+
+import { TutorialsDisplay } from "./components/TutorialsDisplay"
+
+export default async function TutorialsPage() {
+  return (
+    <main className="docs-container relative w-full max-w-screen-2xl min-h-screen mx-auto px-4 sm:px-8 lg:px-16 pt-24 sm:pt-40">
+      <section>
+        <div className="container px-4 md:px-6">
+          <div className="max-w-2xl mx-auto text-center space-y-4 text-white">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
+              Explore Our Tutorials
+            </h1>
+            <p className="text-gray-200 text-lg md:text-xl">
+              Find the perfect learning path to level-up your understanding of
+              Effect! Browse our curated selection of educational materials.
+            </p>
+          </div>
+        </div>
+      </section>
+      <TutorialsDisplay />
+    </main>
+  )
+}
diff --git a/src/components/icons/chevron-down.tsx b/src/components/icons/chevron-down.tsx
index fb71b2495..50971b64f 100644
--- a/src/components/icons/chevron-down.tsx
+++ b/src/components/icons/chevron-down.tsx
@@ -17,8 +17,8 @@ export const ChevronDownIcon: React.FC<Icon.CommonProps> = ({
       <path
         d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
         fill="currentColor"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
       ></path>
     </svg>
   )
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 000000000..af6a1a8dd
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent
+}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..56338aafb
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Icon } from "@/components/icons"
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Icon name="check" className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 000000000..281e56ffe
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import React from "react"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext
+} from "react-hook-form"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 000000000..002b482f6
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import React from "react"
+// import {
+//   CaretSortIcon,
+//   CheckIcon,
+//   ChevronDownIcon,
+//   ChevronUpIcon
+// } from "@radix-ui/react-icons"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Icon } from "@/components/icons"
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <Icon name="arrows-up-down" className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <Icon name="chevron-down" className="rotate-180" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <Icon name="chevron-down" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Icon name="check" className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
+}
diff --git a/src/contentlayer/schema/tutorial.ts b/src/contentlayer/schema/tutorial.ts
index dc7da62f4..3974743e3 100644
--- a/src/contentlayer/schema/tutorial.ts
+++ b/src/contentlayer/schema/tutorial.ts
@@ -16,10 +16,21 @@ export const Tutorial = defineDocumentType(() => ({
       description: "The name of the section.",
       required: false
     },
+    prerequisites: {
+      type: "list",
+      of: { type: "string" },
+      required: false
+    },
     excerpt: {
       type: "string",
       description: "A brief description of the tutorial.",
-      required: true
+      required: false
+    },
+    difficulty: {
+      type: "enum",
+      description: "The level of difficulty of the tutorial",
+      options: ["beginner", "intermediate", "advanced"],
+      required: false
     },
     workspace: {
       type: "enum",

From 66b17f3d30f24d3a55ced3590af8004dd22f085a Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Fri, 14 Jun 2024 13:18:52 -0400
Subject: [PATCH 4/9] improve tutorial navigation

---
 package.json                                  |   3 -
 pnpm-lock.yaml                                |  78 --------
 .../[...slug]/components/Navigation.tsx       | 115 ++++++++----
 .../[...slug]/components/Navigation/Menu.tsx  |  35 ----
 .../components/Navigation/MenuButton.tsx      |  40 ----
 .../components/Navigation/MenuGroup.tsx       |  47 -----
 .../components/DifficultySelector.tsx         |   2 +-
 src/app/tutorials/layout.tsx                  |   2 -
 src/app/tutorials/page.tsx                    |  35 ++--
 src/components/ui/form.tsx                    | 176 ------------------
 src/components/ui/select.tsx                  | 164 ----------------
 11 files changed, 103 insertions(+), 594 deletions(-)
 delete mode 100644 src/app/tutorials/[...slug]/components/Navigation/Menu.tsx
 delete mode 100644 src/app/tutorials/[...slug]/components/Navigation/MenuButton.tsx
 delete mode 100644 src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx
 delete mode 100644 src/components/ui/form.tsx
 delete mode 100644 src/components/ui/select.tsx

diff --git a/package.json b/package.json
index 92c02f5cc..1b6ecda0a 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "@effect/rpc-http": "^0.28.44",
     "@effect/schema": "^0.67.22",
     "@headlessui/react": "1.7.17",
-    "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -30,7 +29,6 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
@@ -58,7 +56,6 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.5",
     "react-instantsearch": "^7.4.1",
     "react-resizable-panels": "^2.0.19",
     "react-tweet": "^3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ece502133..16ba71a21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,9 +32,6 @@ importers:
       '@headlessui/react':
         specifier: 1.7.17
         version: 1.7.17(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@hookform/resolvers':
-        specifier: ^3.6.0
-        version: 3.6.0(react-hook-form@7.51.5(react@18.0.0))
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -59,9 +56,6 @@ importers:
       '@radix-ui/react-radio-group':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-select':
-        specifier: ^2.0.0
-        version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.3.2)(react@18.0.0)
@@ -143,9 +137,6 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.0.0(react@18.0.0)
-      react-hook-form:
-        specifier: ^7.51.5
-        version: 7.51.5(react@18.0.0)
       react-instantsearch:
         specifier: ^7.4.1
         version: 7.4.1(algoliasearch@4.23.3)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -853,11 +844,6 @@ packages:
       react: ^16 || ^17 || ^18
       react-dom: ^16 || ^17 || ^18
 
-  '@hookform/resolvers@3.6.0':
-    resolution: {integrity: sha512-UBcpyOX3+RR+dNnqBd0lchXpoL8p4xC21XP8H6Meb8uve5Br1GCnmg0PcBoKKqPKgGu9GHQ/oygcmPrQhetwqw==}
-    peerDependencies:
-      react-hook-form: ^7.0.0
-
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -1290,9 +1276,6 @@ packages:
       typescript:
         optional: true
 
-  '@radix-ui/number@1.0.1':
-    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
-
   '@radix-ui/primitive@1.0.1':
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
 
@@ -1588,19 +1571,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-select@2.0.0':
-    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -4550,12 +4520,6 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
-  react-hook-form@7.51.5:
-    resolution: {integrity: sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==}
-    engines: {node: '>=12.22.0'}
-    peerDependencies:
-      react: ^16.8.0 || ^17 || ^18
-
   react-instantsearch-core@7.4.1:
     resolution: {integrity: sha512-Nk47IJaCrIecoAfH1vdLStvdOflN+O+TiHqUoLU2NMlQ6cK4OoCQTHG5Vyc1DaiO4uctBkvjcCQhhzZOdk0tRg==}
     peerDependencies:
@@ -6048,10 +6012,6 @@ snapshots:
       react: 18.0.0
       react-dom: 18.0.0(react@18.0.0)
 
-  '@hookform/resolvers@3.6.0(react-hook-form@7.51.5(react@18.0.0))':
-    dependencies:
-      react-hook-form: 7.51.5(react@18.0.0)
-
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -6491,10 +6451,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@radix-ui/number@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.6
-
   '@radix-ui/primitive@1.0.1':
     dependencies:
       '@babel/runtime': 7.24.6
@@ -6838,36 +6794,6 @@ snapshots:
       '@types/react': 18.3.2
       '@types/react-dom': 18.3.0
 
-  '@radix-ui/react-select@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.3.2)(react@18.0.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
-      aria-hidden: 1.2.4
-      react: 18.0.0
-      react-dom: 18.0.0(react@18.0.0)
-      react-remove-scroll: 2.5.5(@types/react@18.3.2)(react@18.0.0)
-    optionalDependencies:
-      '@types/react': 18.3.2
-      '@types/react-dom': 18.3.0
-
   '@radix-ui/react-slot@1.0.2(@types/react@18.3.2)(react@18.0.0)':
     dependencies:
       '@babel/runtime': 7.24.6
@@ -10478,10 +10404,6 @@ snapshots:
       react: 18.0.0
       scheduler: 0.21.0
 
-  react-hook-form@7.51.5(react@18.0.0):
-    dependencies:
-      react: 18.0.0
-
   react-instantsearch-core@7.4.1(algoliasearch@4.23.3)(react@18.0.0):
     dependencies:
       '@babel/runtime': 7.24.6
diff --git a/src/app/tutorials/[...slug]/components/Navigation.tsx b/src/app/tutorials/[...slug]/components/Navigation.tsx
index fb099c49a..029159589 100644
--- a/src/app/tutorials/[...slug]/components/Navigation.tsx
+++ b/src/app/tutorials/[...slug]/components/Navigation.tsx
@@ -4,10 +4,17 @@ import React from "react"
 import Link from "next/link"
 import { Icon } from "@/components/icons"
 import { Tutorial } from "contentlayer/generated"
-import { Menu } from "./Navigation/Menu"
-import { MenuButton } from "./Navigation/MenuButton"
 import { cn } from "@/lib/utils"
-import { groupedTutorials, tutorialSection } from "@/workspaces/domain/tutorial"
+import {
+  groupedTutorials,
+  tutorialSection
+} from "@/workspaces/domain/tutorial"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
 
 export declare namespace Navigation {
   export interface Props {
@@ -15,8 +22,9 @@ export declare namespace Navigation {
   }
 }
 
-export const Navigation: React.FC<Navigation.Props> = async ({ tutorial }) => {
-  console.log(groupedTutorials)
+export const Navigation: React.FC<Navigation.Props> = async ({
+  tutorial
+}) => {
   const group = groupedTutorials[tutorialSection(tutorial)]
   const index = group.children.indexOf(tutorial)
   const previous = group.children[index - 1]
@@ -26,41 +34,82 @@ export const Navigation: React.FC<Navigation.Props> = async ({ tutorial }) => {
     <div className="px-4 pb-4 flex items-center">
       <PrevPage href={previous?.urlPath} />
 
-      <MenuButton title={tutorial.title} section={group.index.section!}>
-        <Menu selected={tutorial} groupedTutorials={groupedTutorials} />
-      </MenuButton>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="flex-1 p-px bg-gradient-to-br from-zinc-200 to-zinc-300 dark:from-zinc-600 dark:to-zinc-900 rounded-lg cursor-pointer">
+            <nav className="px-4 py-2 bg-gray-100 dark:bg-neutral-900 rounded-lg">
+              <div className="flex items-center">
+                <strong className="font-medium">{group.index.section}</strong>
+                <span className="text-lg px-2 leading-none">/</span>
+                <span>{tutorial.title}</span>
+                <div className="flex-1" aria-hidden />
+                <Icon name="arrows-up-down" className="h-4" />
+              </div>
+            </nav>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)] p-px bg-gradient-to-br from-zinc-200 to-zinc-300 dark:from-zinc-600 dark:to-zinc-900 rounded-lg">
+          <div className="p-4 bg-gray-100 dark:bg-neutral-900 rounded-lg">
+            {group.children.map((child) => (
+              <NavigationItem
+                key={child._id}
+                selected={tutorial._id === child._id}
+                tutorial={child}
+              />
+            ))}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <NextPage href={next?.urlPath} />
     </div>
   )
 }
 
-declare namespace NextPage {
-  export interface Props {
-    readonly href: string | undefined
-  }
+function NavigationItem({
+  selected,
+  tutorial
+}: {
+  readonly selected: boolean
+  readonly tutorial: Tutorial
+}) {
+  return (
+    <DropdownMenuItem disabled={selected} className="text-md" asChild>
+      {selected ? (
+        <div className="flex gap-2 font-medium !opacity-100">
+          <Icon name="arrow-right" className="h-4 w-4" />
+          <span>{tutorial.title}</span>
+        </div>
+      ) : (
+        <Link
+          href={tutorial.urlPath}
+          className={cn("cursor-pointer", selected && "font-medium")}
+        >
+          {tutorial.title}
+        </Link>
+      )}
+    </DropdownMenuItem>
+  )
 }
 
-const NextPage: React.FC<NextPage.Props> = ({ href }) => (
-  <Link
-    href={href ?? "#"}
-    className={cn("h-4 pl-3", !href && "text-gray-400 dark:text-gray-500")}
-  >
-    <Icon name="arrow-right" className="h-full" />
-  </Link>
-)
-
-declare namespace PrevPage {
-  export interface Props {
-    readonly href: string | undefined
-  }
+function NextPage({ href }: { readonly href: string | undefined }) {
+  return (
+    <Link
+      href={href ?? "#"}
+      className={cn("h-4 pl-3", !href && "text-gray-400 dark:text-gray-500")}
+    >
+      <Icon name="arrow-right" className="h-full" />
+    </Link>
+  )
 }
 
-const PrevPage: React.FC<NextPage.Props> = ({ href }) => (
-  <Link
-    href={href ?? "#"}
-    className={cn("h-4 pr-3", !href && "text-gray-400 dark:text-gray-500")}
-  >
-    <Icon name="arrow-right" className="h-full rotate-180" />
-  </Link>
-)
+function PrevPage({ href }: { readonly href: string | undefined }) {
+  return (
+    <Link
+      href={href ?? "#"}
+      className={cn("h-4 pr-3", !href && "text-gray-400 dark:text-gray-500")}
+    >
+      <Icon name="arrow-right" className="h-full rotate-180" />
+    </Link>
+  )
+}
diff --git a/src/app/tutorials/[...slug]/components/Navigation/Menu.tsx b/src/app/tutorials/[...slug]/components/Navigation/Menu.tsx
deleted file mode 100644
index d09d0e0ac..000000000
--- a/src/app/tutorials/[...slug]/components/Navigation/Menu.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client"
-
-import React from "react"
-import { Tutorial } from "contentlayer/generated"
-import { groupedTutorials } from "@/workspaces/domain/tutorial"
-import { Accordion } from "@/components/ui/accordion"
-import { MenuGroup } from "./MenuGroup"
-
-export declare namespace Menu {
-  export interface Props {
-    readonly selected: Tutorial
-    readonly groupedTutorials: typeof groupedTutorials
-  }
-}
-
-export const Menu: React.FC<Menu.Props> = ({
-  selected,
-  groupedTutorials
-}) => {
-  const defaultValue = Object.values(groupedTutorials).find((tutorials) =>
-    tutorials.children.some((tutorial) => tutorial._id === selected._id)
-  )
-  return (
-    <Accordion
-      type="single"
-      className="w-full"
-      defaultValue={defaultValue?.index._id}
-      collapsible
-    >
-      {Object.entries(groupedTutorials).map(([slug, tutorials]) => (
-        <MenuGroup key={slug} group={tutorials} selected={selected} />
-      ))}
-    </Accordion>
-  )
-}
diff --git a/src/app/tutorials/[...slug]/components/Navigation/MenuButton.tsx b/src/app/tutorials/[...slug]/components/Navigation/MenuButton.tsx
deleted file mode 100644
index 8946250d3..000000000
--- a/src/app/tutorials/[...slug]/components/Navigation/MenuButton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-
-import { Icon } from "@/components/icons"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "@/components/ui/popover"
-
-export declare namespace MenuButton {
-  export type Props = React.PropsWithChildren<{
-    readonly section: string
-    readonly title: string
-  }>
-}
-
-export const MenuButton: React.FC<MenuButton.Props> = ({
-  children,
-  section,
-  title
-}) => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <button className="flex-1 p-px bg-gradient-to-br from-zinc-200 to-zinc-300 dark:from-zinc-600 dark:to-zinc-900 rounded-lg cursor-pointer">
-          <nav className="px-4 py-2 bg-gray-100 dark:bg-neutral-900 rounded-lg">
-            <div className="flex items-center">
-              <strong className="font-medium">{section}</strong>
-              <span className="text-lg px-2 leading-none">/</span>
-              <span>{title}</span>
-              <div className="flex-1" aria-hidden />
-              <Icon name="arrows-up-down" className="h-4" />
-            </div>
-          </nav>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[--radix-popover-trigger-width]">{children}</PopoverContent>
-    </Popover>
-  )
-}
diff --git a/src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx b/src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx
deleted file mode 100644
index f4cd41cc7..000000000
--- a/src/app/tutorials/[...slug]/components/Navigation/MenuGroup.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client"
-
-import React from "react"
-import Link from "next/link"
-import { Tutorial } from "contentlayer/generated"
-import {
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from "@/components/ui/accordion"
-import { cn } from "@/lib/utils"
-import { TutorialGroup } from "@/workspaces/domain/tutorial"
-
-export function MenuGroup({
-  group,
-  selected
-}: {
-  readonly group: TutorialGroup
-  readonly selected: Tutorial
-}) {
-  return (
-    <AccordionItem value={group.index._id}>
-      <AccordionTrigger className="py-2">
-        <h4 className="flex items-center pb-1 text-base font-display">
-          {group.index.section}
-        </h4>
-      </AccordionTrigger>
-      <AccordionContent className="pb-2">
-        <div className="pl-4 text-sm leading-loose">
-          {group.children.map((tutorial) => (
-            <div key={tutorial._id}>
-              <Link
-                href={tutorial.urlPath}
-                className={cn(
-                  "hover:underline",
-                  tutorial._id === selected._id && "font-medium"
-                )}
-              >
-                {tutorial.title}
-              </Link>
-            </div>
-          ))}
-        </div>
-      </AccordionContent>
-    </AccordionItem>
-  )
-}
diff --git a/src/app/tutorials/components/DifficultySelector.tsx b/src/app/tutorials/components/DifficultySelector.tsx
index 1872784ea..04232d7b7 100644
--- a/src/app/tutorials/components/DifficultySelector.tsx
+++ b/src/app/tutorials/components/DifficultySelector.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useState } from "react"
+import { useCallback } from "react"
 import type { Tutorial } from "contentlayer/generated"
 import type { CheckedState } from "@radix-ui/react-checkbox"
 import {
diff --git a/src/app/tutorials/layout.tsx b/src/app/tutorials/layout.tsx
index bef44e50f..148a2eeef 100644
--- a/src/app/tutorials/layout.tsx
+++ b/src/app/tutorials/layout.tsx
@@ -1,11 +1,9 @@
 import { ReactNode } from "react"
 import { Toaster } from "@/components/ui/toaster"
-import { Navigation } from "@/components/layout/navigation"
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <Navigation />
       {children}
       <Toaster />
     </>
diff --git a/src/app/tutorials/page.tsx b/src/app/tutorials/page.tsx
index 7a34335d2..d07e1192d 100644
--- a/src/app/tutorials/page.tsx
+++ b/src/app/tutorials/page.tsx
@@ -1,24 +1,29 @@
 "use server"
 
+import { Navigation } from "@/components/layout/navigation"
 import { TutorialsDisplay } from "./components/TutorialsDisplay"
 
 export default async function TutorialsPage() {
   return (
-    <main className="docs-container relative w-full max-w-screen-2xl min-h-screen mx-auto px-4 sm:px-8 lg:px-16 pt-24 sm:pt-40">
-      <section>
-        <div className="container px-4 md:px-6">
-          <div className="max-w-2xl mx-auto text-center space-y-4 text-white">
-            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
-              Explore Our Tutorials
-            </h1>
-            <p className="text-gray-200 text-lg md:text-xl">
-              Find the perfect learning path to level-up your understanding of
-              Effect! Browse our curated selection of educational materials.
-            </p>
+    <>
+      <Navigation />
+      <main className="docs-container relative w-full max-w-screen-2xl min-h-screen mx-auto px-4 sm:px-8 lg:px-16 pt-24 sm:pt-40">
+        <section>
+          <div className="container px-4 md:px-6">
+            <div className="max-w-2xl mx-auto text-center space-y-4 text-white">
+              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
+                Explore Our Tutorials
+              </h1>
+              <p className="text-gray-200 text-lg md:text-xl">
+                Find the perfect learning path to level-up your understanding
+                of Effect! Browse our curated selection of educational
+                materials.
+              </p>
+            </div>
           </div>
-        </div>
-      </section>
-      <TutorialsDisplay />
-    </main>
+        </section>
+        <TutorialsDisplay />
+      </main>
+    </>
   )
 }
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
deleted file mode 100644
index 281e56ffe..000000000
--- a/src/components/ui/form.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React from "react"
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext
-} from "react-hook-form"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import { Label } from "@/components/ui/label"
-import { cn } from "@/lib/utils"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = "FormLabel"
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField
-}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
deleted file mode 100644
index 002b482f6..000000000
--- a/src/components/ui/select.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-"use client"
-
-import React from "react"
-// import {
-//   CaretSortIcon,
-//   CheckIcon,
-//   ChevronDownIcon,
-//   ChevronUpIcon
-// } from "@radix-ui/react-icons"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Icon } from "@/components/icons"
-import { cn } from "@/lib/utils"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <Icon name="arrows-up-down" className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <Icon name="chevron-down" className="rotate-180" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <Icon name="chevron-down" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Icon name="check" className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton
-}

From 30a78ecfc5823f26596f114e0668184adc45eeaa Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Fri, 14 Jun 2024 13:37:22 -0400
Subject: [PATCH 5/9] cleanup existing tutorials

---
 content/tutorials/basics/index.mdx                     |  4 +---
 .../incremental-adoption/100-getting-started.mdx       |  3 ++-
 .../incremental-adoption/200-dealing-with-errors.mdx   |  4 +++-
 .../incremental-adoption/300-handling-requirements.mdx | 10 ++++++++--
 src/components/docs/navigation-link.tsx                |  6 +++---
 src/components/layout/footer.tsx                       |  4 ++--
 src/components/layout/navigation.tsx                   |  2 +-
 7 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/content/tutorials/basics/index.mdx b/content/tutorials/basics/index.mdx
index e72485d49..c14a28177 100644
--- a/content/tutorials/basics/index.mdx
+++ b/content/tutorials/basics/index.mdx
@@ -8,8 +8,6 @@ prerequisites:
   - Basic understanding of TypeScript syntax and features
 ---
 
-Welcome to the Effect tutorials!
-
 ### What is Effect?
 
 Effect is a powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.
@@ -27,4 +25,4 @@ To the right is an editor & console window. As you make changes to the code in t
 
 Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 
-If you want to view the recommended solution to an exercise, click the "Solve" button.
+If you want to view the recommended solution to an exercise, click the "Show Solution" button.
diff --git a/content/tutorials/incremental-adoption/100-getting-started.mdx b/content/tutorials/incremental-adoption/100-getting-started.mdx
index c7916365a..130fd110e 100644
--- a/content/tutorials/incremental-adoption/100-getting-started.mdx
+++ b/content/tutorials/incremental-adoption/100-getting-started.mdx
@@ -47,4 +47,5 @@ Using what we have learned above, your tasks for this exercise include:
   - Fix all type errors within the `POST /todos` route of our Express API
   - Ensure that the Express API responds with the created `Todo` as JSON
 
-In the editor to the right, modify the code to restore functionality to our server.
+Modify the code in the editor to the right to accomplish your tasks.
+
diff --git a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
index 19c14da04..239e6a27e 100644
--- a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
+++ b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
@@ -168,4 +168,6 @@ Using what we have learned above, your tasks for this exercise include:
     - Set the response status code to `404`
     - Return a JSON response that conforms to the following `{ "type": "CreateTodoError", "text": <TODO_TEXT> }`
 
-In the editor to the right, modify the code to restore functionality to our server. Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
+Modify the code in the editor to the right to accomplish your tasks.
+
+Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
diff --git a/content/tutorials/incremental-adoption/300-handling-requirements.mdx b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
index 95042f4cd..fe86c5592 100644
--- a/content/tutorials/incremental-adoption/300-handling-requirements.mdx
+++ b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
@@ -44,7 +44,9 @@ main()
  */
 ```
 
-As you can see from the output, the message `"Hello, World!"` is logged twice. This is because each call to `Effect.provide` will fully construct the dependency graph specified by the `Layer` and then provide it to the Effect program. This can create problems when your layers are meant to encapsulate logic that is only meant to be executed **once** (for example, creating a database connection pool) or when layer construction is **expensive** (for example, fetching a large number of remote assets and caching them in memory).
+As you can see from the output, the message `"Hello, World!"` is logged twice. This is because each call to `Effect.provide` will fully construct the dependency graph specified by the `Layer` and then provide it to the Effect program.
+
+This can create problems when your layers are meant to encapsulate logic that is only meant to be executed **once** (for example, creating a database connection pool) or when layer construction is **expensive** (for example, fetching a large number of remote assets and caching them in memory).
 
 To solve this problem, we need some sort of top-level, re-usable Effect `Runtime` which contains our fully constructed dependency graph, and then use that `Runtime` to execute our Effect programs instead of the default `Runtime` used by the `Effect.run*` methods.
 
@@ -52,6 +54,8 @@ To solve this problem, we need some sort of top-level, re-usable Effect `Runtime
 
 The `ManagedRuntime` data type in Effect allows us to create a top-level, re-usable Effect `Runtime` which encapsulates a fully constructed dependency graph. In addition, `ManagedRuntime` gives us explicit control over when resources acquired by the runtime should be disposed.
 
+Let's take a look at an example where we refactor the code from above to utilize `ManagedRuntime`:
+
 ```ts twoslash
 import { Console, Effect, Layer, ManagedRuntime } from "effect"
 
@@ -103,4 +107,6 @@ Using what we have learned above, your tasks for this exercise include:
     - Return a JSON response that conforms to the following `{ "type": "TodoNotFound", "id": <TODO_ID> }`
   - **BONUS**: properly dispose of the `ManagedRuntime` when the server shuts down
 
-In the editor to the right, modify the code to restore functionality to our server. Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
+Modify the code in the editor to the right to accomplish your tasks.
+
+Please note that there is no one "correct" answer, as there are multiple ways to achieve the desired outcome.
diff --git a/src/components/docs/navigation-link.tsx b/src/components/docs/navigation-link.tsx
index 44a612c94..886fa41ba 100644
--- a/src/components/docs/navigation-link.tsx
+++ b/src/components/docs/navigation-link.tsx
@@ -12,7 +12,7 @@ export const NavigationLink: FC<{
   const pathname = usePathname()
   const [collapsed, setCollapsed] = useState<boolean>(
     element.collapsible
-      ? pathname.startsWith(element.urlPath)
+      ? pathname?.startsWith(element.urlPath)
         ? false
         : true
       : false
@@ -20,13 +20,13 @@ export const NavigationLink: FC<{
   const ref = useRef<HTMLLIElement>(null)
 
   useEffect(() => {
-    if (pathname.startsWith(element.urlPath)) {
+    if (pathname?.startsWith(element.urlPath)) {
       setCollapsed(false)
     }
     if (
       level === 0 &&
       element.children.length > 0 &&
-      pathname.startsWith(element.urlPath)
+      pathname?.startsWith(element.urlPath)
     ) {
       document
         .getElementById("docs-sidebar-navigation")
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 7bfb0a813..0dbec0c96 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -48,7 +48,7 @@ const socials = [
 
 export const Footer = () => {
   const pathname = usePathname()
-  const wide = pathname.startsWith("/docs")
+  const wide = pathname?.startsWith("/docs")
 
   return (
     <div className={pathname === "/" ? "dark" : ""}>
@@ -89,7 +89,7 @@ export const Footer = () => {
                     <li key={index}>
                       <Link
                         href={href}
-                        className={`flex items-start ${pathname.startsWith(href) ? "" : "button-hover"}`}
+                        className={`flex items-start ${pathname?.startsWith(href) ? "" : "button-hover"}`}
                         target={blank === true ? "_blank" : "_self"}
                       >
                         <span>{name}</span>
diff --git a/src/components/layout/navigation.tsx b/src/components/layout/navigation.tsx
index 3612fd580..0b0c6e99f 100644
--- a/src/components/layout/navigation.tsx
+++ b/src/components/layout/navigation.tsx
@@ -19,7 +19,7 @@ export interface NavigationLink {
 const links: Array<NavigationLink> = [
   { name: "Docs", href: "/docs" },
   { name: "Blog", href: "/blog" },
-  // { name: "Tutorials", href: "/tutorials/basics" },
+  { name: "Tutorials", href: "/tutorials" },
   { name: "Play", href: "/play", reload: true }
 ]
 

From 6ba2abafab9a26046bc2ec7a9271f3ff67f5009c Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Tue, 18 Jun 2024 11:40:39 -0400
Subject: [PATCH 6/9] continue working on basics tutorial

---
 .../basics/100-your-first-effect.mdx          |  91 ++++++++--
 .../tutorials/basics/200-creating-effects.mdx | 169 ++++++++++++++++++
 .../tutorials/basics/200-returning-values.mdx |  50 ------
 .../basics/300-combining-effects.mdx          |  38 ----
 .../tutorials/basics/300-writing-programs.mdx | 109 +++++++++++
 .../tutorials/basics/400-managing-errors.mdx  |  81 +++++++++
 .../tutorials/basics/400-using-generators.mdx |   6 -
 content/tutorials/basics/index.mdx            |  27 ++-
 src/tutorials/basics/100/main.initial.txt     |   2 +-
 src/tutorials/basics/100/main.ts              |   4 +-
 src/tutorials/basics/200/main.initial.txt     |   4 +-
 src/tutorials/basics/200/main.ts              |   4 +-
 src/tutorials/basics/300/main.initial.txt     |  47 ++++-
 src/tutorials/basics/300/main.ts              |  48 ++++-
 14 files changed, 540 insertions(+), 140 deletions(-)
 create mode 100644 content/tutorials/basics/200-creating-effects.mdx
 delete mode 100644 content/tutorials/basics/200-returning-values.mdx
 delete mode 100644 content/tutorials/basics/300-combining-effects.mdx
 create mode 100644 content/tutorials/basics/300-writing-programs.mdx
 create mode 100644 content/tutorials/basics/400-managing-errors.mdx
 delete mode 100644 content/tutorials/basics/400-using-generators.mdx

diff --git a/content/tutorials/basics/100-your-first-effect.mdx b/content/tutorials/basics/100-your-first-effect.mdx
index 36f919207..5c428691b 100644
--- a/content/tutorials/basics/100-your-first-effect.mdx
+++ b/content/tutorials/basics/100-your-first-effect.mdx
@@ -1,30 +1,76 @@
 ---
-title: Your first Effect
+title: Your First Effect
 ---
 
 ### What is an Effect?
 
-The `Effect` type represents an immutable value that lazily describes a workflow
-or job.
-
-In some ways you can think of them like lazy Promises - but Effects are not
-actually Promises, of course. They can model synchronous, asynchronous,
+The `Effect` type represents an **immutable value** that **lazily describes** a
+computation, workflow, or job. In some ways you can think of an `Effect` like a
+lazy `Promise`. But `Effect`s are not actually `Promise`s, of course - they are
+much more powerful and can be used to model synchronous, asynchronous,
 concurrent, and resourceful computations.
 
-To get started, let's implement a "Hello world!" program! In the editor you can
-see an example of the `Effect.log` function. This effect will log a message to
-the console.
+The `Effect` type has three generic type parameters which allow
+us to fully describe all aspects of a program. Let's take a closer look:
+
+<div className="flex justify-center">
+  <code>Effect&lt;Success&comma; Error&comma; Requirements&gt;</code>
+</div>
+
+The `Success` type represents the type of value that an effect can succeed with
+when executed. If this type parameter is `void`, it means the effect produces no
+useful information, while if it is `never`, it means the effect will run forever
+(or until it fails).
+
+The `Error` type represents **expected** errors that can occur when executing an
+effect. If this type parameter is `never`, it means the effect cannot fail
+because there are no values of type `never`.
+
+The `Requirements` type represents the contextual data required by the effect in
+order to be executed. This data is stored internally within a specialized
+collection called `Context`
+(<a href="/docs/other/glossary#context" target="_blank">docs</a>). If this type
+parameter is `never`, it means the effect does not have any requirements and
+that the underlying `Context` collection is empty.
+
+<Info>
+In the Effect ecosystem, you may often encounter the type parameters of the
+`Effect` type abbreviated as `A`, `E`, and `R` respectively. This is just
+shorthand for the success value of type `A`, `E`rror, and `R`equirements.
+Additionally, you may also hear these type parameters referred to as _channels_
+of an `Effect`.
+</Info>
+
+### Describing Computations
 
-But how do we run it?
+We previously mentioned that an `Effect` is actually an immutable and lazy
+_description_ of a computation. This means that when you create an `Effect`,
+nothing actually happens. You are only _describing_ what you want your program
+to do. The fact that an `Effect` is an inherently lazy, immutable description of
+a program is a key component to what powers many of the features of the library.
 
-### Running Effect's
+Similar to calling a function, to actually execute a program described by an
+`Effect`, you must explicitly run the `Effect` using Effect's runtime system.
+
+To get a better understanding of what we mean, let's implement a simple program
+that outputs `"Hello, World!"` to the console.
+
+### Running an Effect
+
+In the editor to the right, you can see an example of the `Effect.log` function.
+This effect will log the provided message (in this case `Hello, World!`) to the
+console, along with some other relevant metadata.
+
+But how do we actually run it?
 
 If you type `Effect.run` into the editor, you will see several different options
-to choose from.
+to choose from. For this example let's try running our `Effect.log` program with
+the `Effect.runPromise` function.
 
-Similar to calling a function, to execute an Effect we need to explicitly run it.
-For this example let's try running the `Effect.log` effect with the
-`Effect.runPromise` function.
+<Idea>
+To learn more about the different ways you can execute an `Effect`, checkout
+the documentation on <a href="/docs/guides/essentials/running-effects" target="_blank">Running Effects</a>.
+</Idea>
 
 To use `Effect.runPromise`:
 
@@ -32,10 +78,17 @@ To use `Effect.runPromise`:
 Effect.runPromise(/* your effect goes here */)
 ```
 
-Remember, if you ever get stuck try clicking the "Solve" button.
+Additionally, take a look at the type of our `Effect.log` program by hovering
+over the `program` variable in the editor. We can see that:
+
+  - The program has `void` in the `Success` channel, which means that no value
+    will be produced by the program
+  - The program has `never` in the `Error` channel, which means that no expected
+    errors will be produced by the program
+  - The program has `never` in the `Requirements` channel, which means that the
+    program has no other requirements in order to be run
 
 <Idea>
-  To learn more about running effects, we have a page in the documentation
-  with more information:<br />
-  <a href="/docs/guides/essentials/running-effects" target="_blank">Running Effects</a>
+Remember, if you ever get stuck try clicking the "Show Solution" button in the
+upper right-hand corner of the editor.
 </Idea>
diff --git a/content/tutorials/basics/200-creating-effects.mdx b/content/tutorials/basics/200-creating-effects.mdx
new file mode 100644
index 000000000..7c4028199
--- /dev/null
+++ b/content/tutorials/basics/200-creating-effects.mdx
@@ -0,0 +1,169 @@
+---
+title: Creating Effects
+---
+
+### Returning Values
+
+Congratulations on running your first Effect!
+
+However, in the previous section our program had the type `void` in the
+`Success` channel of the effect, indicating that the program did not return
+any meaningful value.
+
+In this section, we are going to explore how we can create effects that _do_
+return meaningful values.
+
+### Modeling Synchronous Computations
+
+#### Effect.succeed
+
+To create an effect that returns the same value every time that it is run, you
+can use the `Effect.succeed` constructor. It takes a **pure value** as input and
+produces an effect that succeeds with that value.
+
+Here's an example:
+
+```ts
+Effect.succeed(42)
+```
+
+When run, this effect will always succeed with the value `42`.
+
+#### Effect.sync
+
+If you want to create an effect that executes a synchronous function each time
+it is run, you can use the `Effect.sync` constructor. It takes a thunk (i.e. a
+function with no arguments) as input, and calls that function each time the
+effect is run. This is particularly useful when you need to encapsulate
+operations within effect that have side-effects (e.g. logging to the console).
+
+Here's an example:
+
+```ts
+Effect.sync(() => Date.now())
+```
+
+This effect will return the current date each time. Note that if we used
+`Effect.succeed(Date.now())` instead, the date would be fixed to the time when
+the effect was created instead of being re-evaluated each time the effect is
+run.
+
+<Warning>
+The thunk passed to `Effect.sync` should never throw errors.
+</Warning>
+
+If, despite warnings, the thunk passed to `Effect.sync` does throw an error, the
+Effect runtime will create an `Effect` containing a "defect" (see
+<a href="/docs/guides/error-management/unexpected-errors" target="_blank">Unexpected Errors</a>
+in the documentation).
+
+#### Effect.try
+
+For situations where you need to perform a synchronous computation that may
+fail, you can use the `Effect.try` constructor. This constructor has two
+variants that can be used depending upon whether or not you would like to
+customize error handling.
+
+For example, let's say we have a function `numberOrFail` that can potentially
+throw an `Error`:
+
+```ts
+function numberOrFail(num: number) {
+  if (Math.random() > 0.5) {
+    throw new Error("failed")
+  }
+  return num
+}
+```
+
+If we do not need to customize error handling at all, we can directly pass our
+`numberOrFail` function to `Effect.try`. In this case, any errors thrown by the
+function passed to `Effect.try` will be wrapped by an `UnknownException`:
+
+```ts
+Effect.try(() => numberOrFail(42))
+```
+
+However, if we _do_ need to customize error handling, we can use the other
+variant of `Effect.try` which allows us to catch and handle any errors thrown
+from our synchronous function:
+
+```ts
+Effect.try({
+  // Try to run our synchronous function
+  try: () => numberOrFail(42),
+  // Catch and re-map the error to something possibly more useful
+  catch: (error) => new Error(`An error occurred: ${error}`)
+})
+```
+
+This pattern is analagous to a standard try-catch block in JavaScript.
+
+### Modeling Asynchronous Computations
+
+#### Effect.promise
+
+If you want to create an effect from an asynchronous function that returns a
+`Promise`, you can use the `Effect.promise` constructor. The resulting effect
+will resolve the returned `Promise` and succeed with it's value.
+
+Here's an example:
+
+```ts
+Effect.promise(
+  () => fetch("https://api.github.com/users/octocat")
+)
+```
+
+This effect will fetch the GitHub user `octocat` and succeed with the response.
+
+<Warning>
+The `Promise` returned by the thunk passed to `Effect.promise` should never
+reject.
+</Warning>
+
+If, despite warnings, the thunk passed to `Effect.promise` does reject, the
+Effect runtime will create an `Effect` containing a "defect" (see
+<a href="/docs/guides/error-management/unexpected-errors" target="_blank">Unexpected Errors</a>
+in the documentation).
+
+#### Effect.tryPromise
+
+For situations where you need to perform an asynchronous computation that may
+fail, you can use the `Effect.tryPromise` constructor. Similar to `Effect.try`,
+the `Effect.tryPromise` constructor has two variants that can be used depending
+upon whether or not you would like to customize error handling.
+
+If you do not need to customize error handling, the syntax is similar to
+`Effect.promise`, the difference being that if the promise rejects, the error
+will be wrapped into an `UnknownException`:
+
+```ts
+Effect.tryPromise(
+  () => fetch("https://api.github.com/users/octocat")
+)
+```
+
+However, if you _do_ need to customize error handling, you can use the other
+variant of `Effect.tryPromise` which allows for catching and handling the error
+returned by the rejected `Promise`:
+
+```ts
+Effect.tryPromise({
+  // Try to run the promise
+  try: () => fetch("https://api.github.com/users/octocat"),
+  // Catch and re-map the error to something possibly more useful
+  catch: (error) => new Error(`An error occurred: ${error}`)
+})
+```
+
+This is similar to adding a `.catch` handler to a `Promise`.
+
+### Exercise
+
+Using the Effect functions we just learned, complete the TODO's in the editor.
+
+<Idea>
+Remember, if you ever get stuck try clicking the "Show Solution" button in the
+upper right-hand corner of the editor.
+</Idea>
diff --git a/content/tutorials/basics/200-returning-values.mdx b/content/tutorials/basics/200-returning-values.mdx
deleted file mode 100644
index cae054c4d..000000000
--- a/content/tutorials/basics/200-returning-values.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Returning values
----
-
-Congratulations on running your first Effect!
-
-Next, let's take a look at the different ways you can return values from your
-Effects.
-
-### Effect.succeed
-
-To create an effect that returns the same value everytime, you can use the
-`Effect.succeed` constructor. It takes a value as input and produces an effect
-that succeeds with that value. Here's an example:
-
-```ts
-Effect.succeed(42)
-```
-
-This effect will always succeed with the value `42`.
-
-### Effect.sync
-
-If you want to create an effect that runs a synchronous function for each run,
-you can use the `Effect.sync` constructor. It takes a function as with no
-arguments as input, and calls the function for each run. Here's an example:
-
-```ts
-Effect.sync(() => Date.now())
-```
-
-This effect will return the current date each time. Note that if we used
-`Effect.succeed(Date.now())` instead, the date would be fixed to the time when
-the effect was created.
-
-### Effect.promise
-
-If you want to create an effect from an asynchronous function that returns a
-Promise, you can use the `Effect.promise` constructor. The resulting effect will
-resolve the returned Promise and succeed with the value. Here's an example:
-
-```ts
-Effect.promise(() => fetch('https://api.github.com/users/octocat'))
-```
-
-This effect will fetch the GitHub user `octocat` and succeed with the response.
-
-### Exercise
-
-Using the Effect functions we just learned, complete the TODO's in the editor.
\ No newline at end of file
diff --git a/content/tutorials/basics/300-combining-effects.mdx b/content/tutorials/basics/300-combining-effects.mdx
deleted file mode 100644
index c3983d72c..000000000
--- a/content/tutorials/basics/300-combining-effects.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Combining Effects
----
-
-Now that you can create and run effects, let's take a look at how you can
-combine them together.
-
-### Effect.andThen
-
-To combine two effects together, you can use `Effect.andThen`. It can be used
-inside a `pipe` to run the first effect, and then run another effect if the
-first one succeeds. Here's an example:
-
-```ts
-Effect.succeed(42).pipe(
-  Effect.andThen((value) => Effect.succeed(value * 2))
-)
-```
-
-The result of this effect will be the equivilent of `Effect.succeed(42 * 2)`.
-
-### Effect.tap
-
-If you want to combine two effects together without altering the return value,
-you can use `Effect.tap`. Like `Effect.andThen`, it can be used in a pipeline.
-Here's an example:
-
-```ts
-Effect.succeed(42).pipe(
-  Effect.tap((value) => Effect.log(value))
-)
-```
-
-The result of this effect will be `42`, which will additionally be logged to the console.
-
-### Exercise
-
-Using `Effect.andThen` & `Effect.tap`, complete the TODOs in the editor.
diff --git a/content/tutorials/basics/300-writing-programs.mdx b/content/tutorials/basics/300-writing-programs.mdx
new file mode 100644
index 000000000..b63d2dd7c
--- /dev/null
+++ b/content/tutorials/basics/300-writing-programs.mdx
@@ -0,0 +1,109 @@
+---
+title: Writing Programs with Effect
+---
+
+In the previous sections, we learned how to create effects and execute them. In
+this section, we will learn how to write simple programs with Effect.
+
+There are two main styles for writing programs with Effect - using generators
+and using pipelines - both of which can be freely mixed and matched.
+
+### Writing Programs with Generators
+
+The `Effect.gen` utility provided by Effect offers a convenient syntax,
+similar to `async`/`await`, which can be used to write effectful code using
+<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator" target="_blank">JavaScript's generator functions</a>.
+
+This allows you to write code in a more imperative style which can enhance
+readability especially for those who are new to Effect.
+
+Let's take a look at a very simple example:
+
+```ts
+Effect.gen(function*() {
+  const n = yield* Effect.sync(() => Math.random())
+
+  if (n > 0.5) {
+    yield* Effect.log(`The number ${n} is greater than 0.5`)
+  } else {
+    yield* Effect.log(`The number ${n} is less than 0.5`)
+  }
+
+  return n
+})
+```
+
+To learn about writing programs with `Effect.gen`, please visit the corresponding
+<a href="/docs/guides/essentials/using-generators" target="_blank">page in the documentation</a>
+and return here once you are finished reading.
+
+<Idea>
+The use of generators is an **optional feature** in Effect. If you find
+generators unfamiliar or prefer a different coding style, you can skip this
+section and move on to [Writing Programs with Pipelines](#writing-programs-with-pipelines)
+the next section of the tutorial which covers building pipelines with Effect.
+</Idea>
+
+Some key takeaways from the documentation on using generators with Effect
+include:
+
+  - Logic goes inside a generator function wrapped by `Effect.gen`
+    - i.e. `Effect.gen(function*() { /* Logic goes here */ })`
+  - Use `yield*` to get the return value of effects
+  - Standard control flow constructs can be used
+  - Errors short-circuit evaluation
+
+### Writing Programs with Pipelines
+
+Using pipelines to create programs with Effect allows for the composition and
+sequencing of operations on values, enabling the transformation and manipulation
+of data in a clear, concise, and modular manner.
+
+The `pipe` utility enables the creation of pipelines with Effect by taking the
+output of one function and passing it as the input to the next function in the
+pipeline. The sequential composition of functions is why we refer to this style
+of writing Effect programs as "creating pipelines".
+
+Let's take a look at the same example from the previous section re-written to
+use `pipe`:
+
+```ts
+Effect.sync(() => Math.random()).pipe(
+  Effect.tap((n) =>
+    n > 0.5
+      ? Effect.log(`The number ${n} is greater than 0.5`)
+      : Effect.log(`The number ${n} is less than 0.5`)
+  )
+)
+```
+
+<Info>
+The <a href="/docs/guides/essentials/pipeline#tap" target="_blank">Effect.tap</a>
+method allows us to access the value of the previous Effect, perform some logic,
+and then ignore the result of said logic, returning the value of the effect
+prior to executing `Effect.tap`.
+</Info>
+
+To learn about creating pipelines with `pipe`, please visit the corresponding
+<a href="/docs/guides/essentials/pipeline" target="_blank">page in the documentation</a>
+and return here once you are finished reading.
+
+Some key takeaways from the documentation on creating pipelines with Effect
+include:
+
+  - `pipe` will apply all functions in the pipeline to a value sequentially
+  - The `.pipe` method is available as a convenience method on most data types
+    in the Effect ecosystem
+
+### Exercise
+
+Using the concepts we just learned about writing programs with Effect, complete
+the `TODO`s in the editor.
+
+**Bonus**: re-write the program in the editor to utilize a pipeline instead of a
+generator.
+
+<Idea>
+Remember, if you ever get stuck try clicking the "Show Solution" button in the
+upper right-hand corner of the editor.
+</Idea>
diff --git a/content/tutorials/basics/400-managing-errors.mdx b/content/tutorials/basics/400-managing-errors.mdx
new file mode 100644
index 000000000..f32ab4877
--- /dev/null
+++ b/content/tutorials/basics/400-managing-errors.mdx
@@ -0,0 +1,81 @@
+---
+title: Managing Errors
+---
+
+In the previous section of this tutorial, we learned how to write simple
+programs with Effect. In this section, we will expand upon that knowledge to
+learn about managing errors with Effect.
+
+### Two Types of Errors
+
+Just like any other program, Effect programs may fail for expected or unexpected
+reasons. The difference between a non-Effect program and an Effect program is in
+the detail provided to you when your program fails. Effect attempts to preserve
+as much information as possible about what caused your program to fail to
+produce a detailed, comprehensive, and human readable failure message.
+
+In an Effect program, there are two possible ways for a program to fail:
+
+  - **Expected Errors**: These are errors that developers anticipate and expect
+    as part of normal program execution
+  - **Unexpected Errors**: These are errors that occur unexpectedly and are not
+    part of the intended program flow
+
+### Expected Errors
+
+These errors, also referred to as _failures_, _typed errors_ or _recoverable
+errors_, are errors that a developer anticipates as part of the normal program
+execution. They serve a similar purpose to checked exceptions and play a role
+in defining the program's domain and control flow.
+
+As we learned in a previous section of this tutorial, expected errors are
+**tracked at the type level** by the `Effect` data type (in the `Error` channel).
+
+For example, it is evident from the type that the Effect program in the
+following code snippet can fail with an error of type `HttpError` or an error of
+type `NetworkError`:
+
+<div className="flex justify-center">
+  <code>Effect&lt;string&comma; HttpError | NetworkError&gt;</code>
+</div>
+
+<Warning>
+Before continuing with this tutorial, please read through the section on
+**expected errors** <a href="docs/guides/error-management/expected-errors" target="_blank">in
+the documentation</a>.
+</Warning>
+
+### Unexpected Errors
+
+Unexpected errors, also referred to as _defects_, _untyped errors_, or
+_unrecoverable errors_, are errors that developers do not anticipate occurring
+during normal program execution. Unlike expected errors, which are considered
+part of a program's domain and control flow, unexpected errors resemble
+unchecked exceptions and lie outside the expected behavior of the program.
+
+Since these errors are not expected, Effect **does not track them at the type
+level**. However, the Effect runtime does keep track of these errors and
+provides several methods to aid in recovering from unexpected errors.
+
+<Warning>
+Before continuing with this tutorial, please read through the section on
+**unexpected errors** <a href="docs/guides/error-management/unexpected-errors" target="_blank">in
+the documentation</a>.
+</Warning>
+
+### Exercise
+
+Using the concepts we just learned about managing errors with Effect, complete
+the following tasks (also marked with `TODO`s in the editor):
+
+  - TODO
+  - TODO
+  - TODO
+
+**Bonus**: Use the <a href="/docs/guides/error-management/yieldable-errors" target="_blank">Data</a>
+module to create the custom error types via `Data.TaggedError`.
+
+<Idea>
+Remember, if you ever get stuck try clicking the "Show Solution" button in the
+upper right-hand corner of the editor.
+</Idea>
\ No newline at end of file
diff --git a/content/tutorials/basics/400-using-generators.mdx b/content/tutorials/basics/400-using-generators.mdx
deleted file mode 100644
index ec2b5db17..000000000
--- a/content/tutorials/basics/400-using-generators.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Using generators
----
-
-To make using Effect more approachable, we can use generators to write our
-programs in an imperative style.
diff --git a/content/tutorials/basics/index.mdx b/content/tutorials/basics/index.mdx
index c14a28177..8d9652b92 100644
--- a/content/tutorials/basics/index.mdx
+++ b/content/tutorials/basics/index.mdx
@@ -8,11 +8,20 @@ prerequisites:
   - Basic understanding of TypeScript syntax and features
 ---
 
+### Welcome!
+
+Welcome to Effect tutorials! Here, you will find clear, concise, and interactive
+guides designed to enhance your skills with Effect and deepen your understanding
+of all that Effect and its ecosystem provides!
+
+Let's get started!
+
 ### What is Effect?
 
-Effect is a powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.
+Effect is a powerful TypeScript library designed to help developers easily
+create complex, synchronous, and asynchronous programs.
 
-The benefits include:
+Some of the many benefits of Effect include:
 
 - Maximum Type-safety (incl. error handling)
 - Makes your code more composable, reusable and testable
@@ -21,8 +30,16 @@ The benefits include:
 
 ### How to use this tutorial
 
-To the right is an editor & console window. As you make changes to the code in the editor, the program will re-run and show the output in the console.
+On the right-hand side of the screen is both a code editor and a console window.
+As you make changes to the code in the editor, the program will re-run and show
+the output in the console.
 
-Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
+Each section will present an exercise designed to illustrate a feature or
+enhance understanding of a particular concept. Later exercises build on the
+knowledge gained in earlier ones, so it's recommended that you proceed through
+the tutorial in order from start to finish. If necessary, you can navigate
+through the tutorial using the drop-down menu above.
 
-If you want to view the recommended solution to an exercise, click the "Show Solution" button.
+If get stuck on a particular execerice and would like to view the recommended
+solution, you can click the "Show Solution" button in the upper right-hand
+corner of the editor.
diff --git a/src/tutorials/basics/100/main.initial.txt b/src/tutorials/basics/100/main.initial.txt
index c604311ad..d90d020cf 100644
--- a/src/tutorials/basics/100/main.initial.txt
+++ b/src/tutorials/basics/100/main.initial.txt
@@ -1,4 +1,4 @@
 import { Effect } from "effect"
 
 // TODO: Run the effect
-Effect.log("Hello world!")
+const program = Effect.log("Hello, World!")
diff --git a/src/tutorials/basics/100/main.ts b/src/tutorials/basics/100/main.ts
index 7471260fb..199c5008f 100644
--- a/src/tutorials/basics/100/main.ts
+++ b/src/tutorials/basics/100/main.ts
@@ -1,3 +1,5 @@
 import { Effect } from "effect"
 
-Effect.runPromise(Effect.log("Hello world!"))
+const program = Effect.log("Hello, World!")
+
+Effect.runPromise(program)
diff --git a/src/tutorials/basics/200/main.initial.txt b/src/tutorials/basics/200/main.initial.txt
index 22cfe5f7d..032285fe4 100644
--- a/src/tutorials/basics/200/main.initial.txt
+++ b/src/tutorials/basics/200/main.initial.txt
@@ -4,8 +4,8 @@ function fooFunc(): string {
   return "foo"
 }
 
-async function asyncFooFunc(): Promise<string> {
-  return "foo"
+function asyncFooFunc(): Promise<string> {
+  return Promise.resolve("foo")
 }
 
 async function main() {
diff --git a/src/tutorials/basics/200/main.ts b/src/tutorials/basics/200/main.ts
index 88d1ff66a..4c57ccd41 100644
--- a/src/tutorials/basics/200/main.ts
+++ b/src/tutorials/basics/200/main.ts
@@ -4,8 +4,8 @@ function fooFunc(): string {
   return "foo"
 }
 
-async function asyncFooFunc(): Promise<string> {
-  return "foo"
+function asyncFooFunc(): Promise<string> {
+  return Promise.resolve("foo")
 }
 
 async function main() {
diff --git a/src/tutorials/basics/300/main.initial.txt b/src/tutorials/basics/300/main.initial.txt
index 5be1efe0c..c74c14af7 100644
--- a/src/tutorials/basics/300/main.initial.txt
+++ b/src/tutorials/basics/300/main.initial.txt
@@ -1,14 +1,45 @@
 import { Effect } from "effect"
 import assert from "assert"
 
-const multiplyByTwo = (value: number) => Effect.succeed(value * 2)
+// Simulated asynchronous task to fetch a transaction amount from a database
+const fetchTransactionAmount = Effect.promise(() => Promise.resolve(100))
 
-const promise = Effect.succeed(42).pipe(
-  // TODO: multiply the value using `multiplyByTwo`
-  // TODO: log the value with `Effect.log`, without changing the return value
-  Effect.runPromise
-)
+// Simulated asynchronous task to fetch a discount rate from a configuration file
+const fetchDiscountRate = Effect.promise(() => Promise.resolve(5))
 
-promise.then((finalValue) => {
-  assert.strictEqual(finalValue, 84)
+const program = Effect.gen(function* () {
+  // TODO: Retrieve the transaction amount
+
+  // TODO: Retrieve the discount rate
+
+  // TODO: Calculate discounted amount using `applyDiscount`
+
+  // TODO: Apply service charge with `addServiceCharge`
+
+  // TODO: Return the final value
 })
+
+Effect.runPromise(program).then((value) => {
+  assert.strictEqual(value, 96)
+})
+
+// Helper Methods
+
+/**
+ * Adds a small service charge to a transaction amount.
+ */
+function addServiceCharge(amount: number): number {
+  return amount + 1
+}
+
+/**
+ * Applies a discount safely to a transaction amount.
+ */
+function applyDiscount(
+  total: number,
+  discountRate: number
+): Effect.Effect<number, Error> {
+  return discountRate === 0
+    ? Effect.fail(new Error("Discount rate cannot be zero"))
+    : Effect.succeed(total - (total * discountRate) / 100)
+}
diff --git a/src/tutorials/basics/300/main.ts b/src/tutorials/basics/300/main.ts
index 330549697..6e92db0ad 100644
--- a/src/tutorials/basics/300/main.ts
+++ b/src/tutorials/basics/300/main.ts
@@ -1,14 +1,46 @@
 import { Effect } from "effect"
 import assert from "assert"
 
-const multiplyByTwo = (value: number) => Effect.succeed(value * 2)
+// Simulated asynchronous task to fetch a transaction amount from a database
+const fetchTransactionAmount = Effect.promise(() => Promise.resolve(100))
 
-const promise = Effect.succeed(42).pipe(
-  Effect.andThen(multiplyByTwo),
-  Effect.tap((value) => Effect.log(value)),
-  Effect.runPromise
-)
+// Simulated asynchronous task to fetch a discount rate from a configuration file
+const fetchDiscountRate = Effect.promise(() => Promise.resolve(5))
 
-promise.then((finalValue) => {
-  assert.strictEqual(finalValue, 84)
+const program = Effect.gen(function* () {
+  const transactionAmount = yield* fetchTransactionAmount
+
+  const discountRate = yield* fetchDiscountRate
+
+  const discountedAmount = yield* applyDiscount(
+    transactionAmount,
+    discountRate
+  )
+
+  return addServiceCharge(discountedAmount)
+})
+
+Effect.runPromise(program).then((value) => {
+  assert.strictEqual(value, 96)
 })
+
+// Helper Methods
+
+/**
+ * Adds a small service charge to a transaction amount.
+ */
+function addServiceCharge(amount: number): number {
+  return amount + 1
+}
+
+/**
+ * Applies a discount safely to a transaction amount.
+ */
+function applyDiscount(
+  total: number,
+  discountRate: number
+): Effect.Effect<number, Error> {
+  return discountRate === 0
+    ? Effect.fail(new Error("Discount rate cannot be zero"))
+    : Effect.succeed(total - (total * discountRate) / 100)
+}

From b35fd2a57fcd88988fb52c9cdd9b2ab62d7cac2e Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Tue, 18 Jun 2024 12:52:32 -0400
Subject: [PATCH 7/9] fix typo

---
 content/tutorials/basics/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorials/basics/index.mdx b/content/tutorials/basics/index.mdx
index 8d9652b92..93e9c9514 100644
--- a/content/tutorials/basics/index.mdx
+++ b/content/tutorials/basics/index.mdx
@@ -40,6 +40,6 @@ knowledge gained in earlier ones, so it's recommended that you proceed through
 the tutorial in order from start to finish. If necessary, you can navigate
 through the tutorial using the drop-down menu above.
 
-If get stuck on a particular execerice and would like to view the recommended
+If get stuck on a particular exercise and would like to view the recommended
 solution, you can click the "Show Solution" button in the upper right-hand
 corner of the editor.

From cfc0f3d6bbf1053ed9a4045081eb8cdfe1db0153 Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Tue, 18 Jun 2024 12:56:35 -0400
Subject: [PATCH 8/9] explain usage of tutorial editor through code comments

---
 content/tutorials/basics/index.mdx      | 16 ----------------
 src/tutorials/basics/0/main.initial.txt |  8 ++++++++
 src/tutorials/basics/0/main.ts          |  1 +
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/content/tutorials/basics/index.mdx b/content/tutorials/basics/index.mdx
index 93e9c9514..045abb82d 100644
--- a/content/tutorials/basics/index.mdx
+++ b/content/tutorials/basics/index.mdx
@@ -27,19 +27,3 @@ Some of the many benefits of Effect include:
 - Makes your code more composable, reusable and testable
 - Extensive library with a rich ecosystem of packages
 - Clustering and Workflows (Alpha)
-
-### How to use this tutorial
-
-On the right-hand side of the screen is both a code editor and a console window.
-As you make changes to the code in the editor, the program will re-run and show
-the output in the console.
-
-Each section will present an exercise designed to illustrate a feature or
-enhance understanding of a particular concept. Later exercises build on the
-knowledge gained in earlier ones, so it's recommended that you proceed through
-the tutorial in order from start to finish. If necessary, you can navigate
-through the tutorial using the drop-down menu above.
-
-If get stuck on a particular exercise and would like to view the recommended
-solution, you can click the "Show Solution" button in the upper right-hand
-corner of the editor.
diff --git a/src/tutorials/basics/0/main.initial.txt b/src/tutorials/basics/0/main.initial.txt
index 2dc1859f8..c7c8914cc 100644
--- a/src/tutorials/basics/0/main.initial.txt
+++ b/src/tutorials/basics/0/main.initial.txt
@@ -1,5 +1,13 @@
+// This editor is interactive. Any changes you make to the code will trigger
+// the program to re-run. All program output will be displayed in the terminal
+// window below.
+
+// Feel free to import any packages that are listed in the `package.json`
 import { Effect } from "effect"
 
+// If you get stuck on a particular exercise and would like to view the
+// recommended solution, you can click the "Show Solution" button above the
+// editor. Try it out!
 Effect.log("Welcome to Effect!").pipe(
   Effect.runPromise
 )
diff --git a/src/tutorials/basics/0/main.ts b/src/tutorials/basics/0/main.ts
index 2005c3475..424a589cf 100644
--- a/src/tutorials/basics/0/main.ts
+++ b/src/tutorials/basics/0/main.ts
@@ -1,5 +1,6 @@
 import { Effect } from "effect"
 
+// Clicking the "Reset" button will revert the editor back to the original code
 Effect.log("Welcome to Effect!").pipe(
   Effect.andThen(Effect.log("Effect is awesome!")),
   Effect.runPromise

From f61e393fee3900344b276be43f59adb0b2147eef Mon Sep 17 00:00:00 2001
From: Maxwell Brown <maxwellbrown1990@gmail.com>
Date: Tue, 18 Jun 2024 16:11:07 -0400
Subject: [PATCH 9/9] push final stubs

---
 .../tutorials/basics/400-managing-errors.mdx  | 13 +++++--
 .../basics/500-managing-requirements.mdx      |  5 +++
 .../basics/600-managing-resources.mdx         |  5 +++
 src/tutorials/basics/400/main.initial.txt     | 38 +++++++++++++------
 src/tutorials/basics/400/main.ts              | 38 +++++++++++++------
 src/tutorials/basics/500/main.initial.txt     |  0
 src/tutorials/basics/500/main.ts              |  0
 src/tutorials/basics/600/main.initial.txt     |  0
 src/tutorials/basics/600/main.ts              |  0
 9 files changed, 73 insertions(+), 26 deletions(-)
 create mode 100644 content/tutorials/basics/500-managing-requirements.mdx
 create mode 100644 content/tutorials/basics/600-managing-resources.mdx
 create mode 100644 src/tutorials/basics/500/main.initial.txt
 create mode 100644 src/tutorials/basics/500/main.ts
 create mode 100644 src/tutorials/basics/600/main.initial.txt
 create mode 100644 src/tutorials/basics/600/main.ts

diff --git a/content/tutorials/basics/400-managing-errors.mdx b/content/tutorials/basics/400-managing-errors.mdx
index f32ab4877..b9a92daee 100644
--- a/content/tutorials/basics/400-managing-errors.mdx
+++ b/content/tutorials/basics/400-managing-errors.mdx
@@ -68,12 +68,17 @@ the documentation</a>.
 Using the concepts we just learned about managing errors with Effect, complete
 the following tasks (also marked with `TODO`s in the editor):
 
-  - TODO
-  - TODO
-  - TODO
+  - Create a custom `HttpError` class with a `_tag` attribute that is set to
+    the value `"HttpError"`
+  - Create a custom `NetworkError` class with a `_tag` attribute that is set to
+    the value `"NetworkError"`
+  - Add the necessary code to the pipeline to retry the program on errors for a
+    maximum of three times, but only if the error is an `HttpError`
+  - Add the necessary code to the pipeline to transform all expected errors
+    remaining after the retries into defects
 
 **Bonus**: Use the <a href="/docs/guides/error-management/yieldable-errors" target="_blank">Data</a>
-module to create the custom error types via `Data.TaggedError`.
+module to create the custom error types with `Data.TaggedError`.
 
 <Idea>
 Remember, if you ever get stuck try clicking the "Show Solution" button in the
diff --git a/content/tutorials/basics/500-managing-requirements.mdx b/content/tutorials/basics/500-managing-requirements.mdx
new file mode 100644
index 000000000..fb8c2fb7b
--- /dev/null
+++ b/content/tutorials/basics/500-managing-requirements.mdx
@@ -0,0 +1,5 @@
+---
+title: Managing Requirements
+---
+
+<Stub></Stub>
\ No newline at end of file
diff --git a/content/tutorials/basics/600-managing-resources.mdx b/content/tutorials/basics/600-managing-resources.mdx
new file mode 100644
index 000000000..d26519b70
--- /dev/null
+++ b/content/tutorials/basics/600-managing-resources.mdx
@@ -0,0 +1,5 @@
+---
+title: Managing Resources
+---
+
+<Stub></Stub>
\ No newline at end of file
diff --git a/src/tutorials/basics/400/main.initial.txt b/src/tutorials/basics/400/main.initial.txt
index e4dd75e4e..54404f04a 100644
--- a/src/tutorials/basics/400/main.initial.txt
+++ b/src/tutorials/basics/400/main.initial.txt
@@ -1,14 +1,30 @@
-import { Effect } from "effect"
-import assert from "assert"
+import { Data, Effect, Random } from "effect"
 
-const multiplyByTwo = (value: number) => Effect.succeed(value * 2)
+// TODO: Create a custom `HttpError` class with a `_tag` field
+/* Your code here*/
 
-const program = Effect.gen(function* (_) {
-  const value = yield* multiplyByTwo(42)
-  yield* Effect.log(value)
-  return value
-})
+// TODO: Create a custom `NetworkError` class with a `_tag` field
+/* Your code here*/
 
-Effect.runPromise(program).then((finalValue) => {
-  assert.strictEqual(finalValue, 84)
-})
+const program = Effect.gen(function*() {
+  const n = yield* Random.next
+  if (n < 0.3) {
+    // Simulate random HTTP errors
+    yield* Effect.logError("Encountered HTTP error")
+    return yield* Effect.fail(new HttpError())
+  }
+  if (n < 0.7) {
+    // Simulate random network errors
+    yield* Effect.logError("Encountered network error")
+    return yield* Effect.fail(new NetworkError())
+  }
+  // Simulate successful HTTP response
+  return 200
+}).pipe(
+  Effect.tap((statusCode) => Effect.log(`Status Code: ${statusCode}`)),
+  // TODO: retry the program three times, but only if the error
+  // is an `HttpError`
+  // TODO: transform all remaining failures in the pipeline to defects
+)
+
+Effect.runPromise(program)
diff --git a/src/tutorials/basics/400/main.ts b/src/tutorials/basics/400/main.ts
index e4dd75e4e..cdade9202 100644
--- a/src/tutorials/basics/400/main.ts
+++ b/src/tutorials/basics/400/main.ts
@@ -1,14 +1,30 @@
-import { Effect } from "effect"
-import assert from "assert"
+import { Data, Effect, Random } from "effect"
 
-const multiplyByTwo = (value: number) => Effect.succeed(value * 2)
+class HttpError extends Data.TaggedError("HttpError") {}
 
-const program = Effect.gen(function* (_) {
-  const value = yield* multiplyByTwo(42)
-  yield* Effect.log(value)
-  return value
-})
+class NetworkError extends Data.TaggedError("NetworkError") {}
 
-Effect.runPromise(program).then((finalValue) => {
-  assert.strictEqual(finalValue, 84)
-})
+const program = Effect.gen(function*() {
+  const n = yield* Random.next
+  if (n < 0.3) {
+    // Simulate random HTTP errors
+    yield* Effect.logError("Encountered HTTP error")
+    yield* Effect.fail(new HttpError())
+  }
+  if (n < 0.7) {
+    // Simulate random network errors
+    yield* Effect.logError("Encountered network error")
+    yield* Effect.fail(new NetworkError())
+  }
+  // Simulate successful HTTP response
+  return 200
+}).pipe(
+  Effect.tap((statusCode) => Effect.log(`Status Code: ${statusCode}`)),
+  Effect.retry({
+    while: (error) => error._tag === "HttpError",
+    times: 3
+  }),
+  Effect.catchAll((error) => Effect.die(error))
+)
+
+Effect.runPromise(program).catch(console.error)
diff --git a/src/tutorials/basics/500/main.initial.txt b/src/tutorials/basics/500/main.initial.txt
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/tutorials/basics/500/main.ts b/src/tutorials/basics/500/main.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/tutorials/basics/600/main.initial.txt b/src/tutorials/basics/600/main.initial.txt
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/tutorials/basics/600/main.ts b/src/tutorials/basics/600/main.ts
new file mode 100644
index 000000000..e69de29bb