docs: first version on 'Provide feedback to user when lesson is solved' docs

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/guides/how-to-use-tutorialkit-api.mdx

@@ -5,6 +5,9 @@ description: "Examples showing how to utilize TutorialKit APIs"
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
+TutorialKit's API can be used in custom components to provide highly custom experience in the tutorials.
+Below are listed few examples to solve real-world use cases. See [TutorialKit API](/reference/tutorialkit-api/) for API documentation.
+
 ## Access tutorial state
 
 In this example we'll read contents of `index.js` using Tutorial Store APIs.
@@ -74,7 +77,7 @@ function verifyIndexJs(code: string) {
   </TabItem>
   <TabItem label="content.mdx">
 
-```mdx title=" title="src/content/tutorial/chapter/part/lesson/content.mdx"
+```mdx title="src/content/tutorial/chapter/part/lesson/content.mdx"
 ---
 type: lesson
 title: TutorialKit API usage example
@@ -129,9 +132,9 @@ export default function TerminalWriter() {
 }
 ```
 
-</TabItem>
+  </TabItem>
 
-<TabItem label="content.mdx">
+  <TabItem label="content.mdx">
 
 ```mdx title="src/content/tutorial/chapter/part/lesson/content.mdx"
 ---
@@ -148,11 +151,110 @@ Fix <code>counter.js</code> and run the tests!
 <TerminalWriter client:load />
 ```
 
-</TabItem>
-
+  </TabItem>
 </Tabs>
 
 ## Provide feedback to user when lesson is solved
 
-## How to watch a file for changes
+In this example we'll congratulate user when they solve the lesson code.
+
+Every time user edits the `math.js`, we run `node check-lesson.js` in the webcontainer and see if the process exits with non-erroneous exit code.
+Once the exit code indicates success, we inform user with message.
+
+<a class="my-4 inline-block" href="https://stackblitz.com/edit/stackblitz-starters-b9ie5x?file=src/components/LessonChecker.tsx&file=src/templates/default/check-lesson.mjs&file=src/content/tutorial/1-basics/1-introduction/1-welcome/content.mdx">
+  <img alt="Open in StackBlitz" src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" />
+</a>
+
+<Tabs>
+   <TabItem label="LessonChecker.tsx">
+
+```tsx title="src/components/LessonChecker.tsx"
+import { Dialog } from '@tutorialkit/react';
+import { useEffect, useState } from 'react';
+import { webcontainer } from 'tutorialkit:core';
+import tutorialStore from 'tutorialkit:store';
+
+export default function LessonChecker() {
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
+    const unsubscribe = tutorialStore.onDocumentChanged('/math.js', () => {
+      clearTimeout(timeout);
+
+      timeout = setTimeout(async () => {
+        if (await checkLesson()) {
+          setSuccess(true);
+          unsubscribe();
+        }
+      }, 250);
+    });
+
+    return function cleanup() {
+      unsubscribe();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <>
+      {success && (
+        <Dialog title="Lesson complete" confirmText="OK" onClose={() => setSuccess(false)}>
+          Lesson complete, congratulations! 🎉
+        </Dialog>
+      )}
+    </>
+  );
+}
+
+async function checkLesson(): Promise<boolean> {
+  const webcontainerInstance = await webcontainer;
+  const process = await webcontainerInstance.spawn('node', ['./check-lesson.mjs']);
 
+  const exitCode = await process.exit;
+
+  return exitCode === 0;
+}
+```
+
+   </TabItem>
+
+   <TabItem label="check-lesson.mjs">
+
+```js title="src/templates/default/check-lesson.mjs"
+import * as math from './math.js';
+
+if (math.sum(25, 32) !== 57) {
+  process.exit(1);
+}
+
+if (math.multiply(3, 25) !== 75) {
+  process.exit(1);
+}
+
+process.exit(0);
+```
+
+   </TabItem>
+
+   <TabItem label="content.mdx">
+
+```mdx title="src/content/tutorial/chapter/part/lesson/content.mdx"
+---
+type: lesson
+title: TutorialKit API usage example
+focus: /math.js
+---
+
+import LessonChecker from '@components/LessonChecker';
+
+# TutorialKit API usage example
+
+Solve <code>math.js</code> and you'll see notification about completed lesson!
+
+<LessonChecker client:load />
+```
+
+   </TabItem>
+</Tabs>