added documentation for front end

docs/technical-documentation/frontend/01-sharable-link.md

@@ -0,0 +1,19 @@
+# Sharable link
+
+One of the main features of the application is the ability to share a diagram with other users via a sharable link.
+
+The link is generated by setting a query parameter in the URL to the content of the code editor.
+
+The content of the query parameter is read into the code editor when the application is loaded.
+
+Here is a snippet for generating the sharable link:
+
+```ts
+const url = new URL(window.location.href);
+url.searchParams.set("preview", "true");
+url.searchParams.set("content", editorContent);
+navigator.clipboard.writeText(url.href);
+enqueueSnackbar("Copied link to clipboard", {
+	variant: "info",
+});
+```

docs/technical-documentation/frontend/02-exporting-diagrams.md

@@ -0,0 +1,32 @@
+# Exporting diagrams
+
+The diagram itself is an HTML element, but the main issue is that browsers do not provide a way to export an HTML element as an image.
+
+The current solution is to capture the diagram element, convert to a data URL, then download it as an image.
+
+The conversion step is handled by [html-to-image](https://github.com/bubkoo/html-to-image).
+It provides simple APIs to capture an HTML element and convert it to a data URL.
+In the project, I used `toPng`, `toSvg` and `toJpeg` functions.
+
+The download step is handled by [FileSaver.js](https://github.com/eligrey/FileSaver.js)
+
+Here is a snippet of the code:
+
+```ts
+const HTMLNode = document.getElementById(
+	"structogram-preview",
+);
+if (HTMLNode === null) {
+	return;
+}
+toSvg(HTMLNode).then((blob) => {
+	if (blob === null) {
+		return;
+	}
+	if (window.saveAs) {
+		window.saveAs(blob, "diagram");
+	} else {
+		saveAs(blob, "diagram");
+	}
+});
+```

docs/technical-documentation/frontend/03-snackbar-notification.md

@@ -0,0 +1,6 @@
+# Snackbar notification
+
+When copying a shareable link or exporting a diagram, a snackbar notification will appear to provide feedback to the user.
+This is handled by [Notistack](https://iamhosseindhv.com/notistack).
+
+There is no practical reason why I chose Notistack over other libraries, apart from the fact that it is built on top of Material UI, so it is very easy to integrate it with Material UI.

docs/technical-documentation/frontend/04-ui-library.md

@@ -0,0 +1,5 @@
+# UI library
+
+The UI library is built with [Material UI](https://material-ui.com/).
+
+I was tempted to use other icon libraries like [Font Awesome](https://fontawesome.com/) or [Feather Icons](https://feathericons.com/), but I decided to stick with [MUI Icon](https://material-ui.com/components/material-icons/) for style consistency.

docs/technical-documentation/frontend/05-code-editor.md

@@ -0,0 +1,5 @@
+# Code editor
+
+The code editor is the most important part of the project, so I want to a few functionalities of text editors such auto-pairing brackets, syntax highlighting, etc.
+
+The code editor is built with [CodeMirror](https://codemirror.net/), which is a very popular text editor library.

docs/technical-documentation/frontend/06-auto-saving.md

@@ -0,0 +1,35 @@
+# Auto-saving
+
+The save the progress of the user, the application automatically saves the content of the code editor to the browser's local storage when a change has been made to the code editor.
+
+```ts
+useEffect(() => {
+	localStorage.setItem(
+		"editorContent",
+		editorContent,
+	);
+}, [editorContent]);
+```
+
+This is a very simple solution, but it is not perfect.
+
+There will be cases where the user opened a sharable link while having some previous progress saved in the local storage.
+In this case, the content of the code editor will be overwritten by the content of the sharable link.
+
+I have decided that the sharable link should take precedence over the local storage, so the content of the sharable link will be loaded into the code editor if it is available.
+
+```ts
+const url = new URL(window.location.href);
+const content = url.searchParams.get("content");
+if (content !== null) {
+	window.localStorage.setItem("content", content);
+	return content;
+}
+
+const savedContent =
+	window.localStorage.getItem("content");
+if (savedContent !== null) {
+	return savedContent;
+}
+return "";
+```

docs/technical-documentation/renderer/02-structogram-node.md

@@ -2,8 +2,6 @@
 
 This compnent is a collection of smaller components that are used to render a `Node` object as a `StructogramNodeLoopFirst`, `StructogramNodeLoopLast`, `StructogramNodeIfElse`, or `StructogramNodeProcess` component based on its `kind` property.
 
-The `StructogramNode` component is a functional component that takes a `Node` object and optional border properties as its props. It uses a switch statement to determine the `kind` of the `Node` object and renders different components accordingly.
-
 Here is an interface of the component:
 
 ```tsx