Refactor Svelte Tutorial

src/routes/docs/quick-starts/sveltekit/+page.markdoc

@@ -35,7 +35,7 @@ You can skip optional steps.
 Create a SvelteKit project.
 
 ```sh
-npm create svelte@next my-app && cd my-app
+npm create svelte@next my-app && cd my-app && npm install
 ```
 {% /section %}
 {% section #step-3 step=3 title="Install Appwrite" %}
@@ -58,7 +58,7 @@ Find your project's ID in the **Settings** page.
 Create a new file `src/lib/appwrite.js` and add the following code to it, replace `<YOUR_PROJECT_ID>` with your project ID.
 
 ```js
-import { Client, Account} from 'appwrite';
+import { Client, Account } from 'appwrite';
 
 export const client = new Client();
 
@@ -71,53 +71,60 @@ export { ID } from 'appwrite';
 ```
 {% /section %}
 {% section #step-5 step=5 title="Create a login page" %}
-Create a new file `src/routes/index.svelte` and add the following code to it.
+Replace the contents of `src/routes/+page.svelte` with the following code.
 
 ```html
 <script>
     import { account, ID } from '$lib/appwrite';
 
     let loggedInUser = null;
 
-    let email = '';
-    let password = '';
-    let name = '';
-
     async function login(email, password) {
         await account.createEmailSession(email, password);
         loggedInUser = await account.get();
     }
+
+    async function register(email, password) {
+        await account.create(ID.unique(), email, password);
+        login(email, password);
+    }
+
+    function submit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const type = e.submitter.dataset.type;
+
+        if (type === "login") {
+            login(formData.get('email'), formData.get('password'));
+        } else if (type === "register") {
+            register(formData.get('email'), formData.get('password'));
+        }
+    }
+
+    function logout() {
+        await account.deleteSession('current');
+        loggedInUser = null;
+    }
 </script>
 
 <p>
     {loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in'}
 </p>
 
-<form>
-    <input type="email" placeholder="Email" bind:value={email} />
-    <input type="password" placeholder="Password" bind:value={password} />
-    <input type="text" placeholder="Name" bind:value={name} />
-
-    <button type="button" on:click={() => login(email, password)}>Login</button>
-    <button
-        type="button"
-        on:click={async () => {
-            await account.create(ID.unique(), email, password, name);
-            login(email, password);
-        }}>Register</button>
-
-    <button
-        type="button"
-        on:click={async () => {
-            await account.deleteSession('current');
-            loggedInUser = null;
-        }}>Logout</button>
+<form on:submit={submit}>
+    <input type="email" placeholder="Email" name="email" required />
+    <input type="password" placeholder="Password" name="password" required />
+
+    <button type="submit" data-type="login">Login</button>
+    <button type="submit" data-type="register">Register</button>
 </form>
+
+<button on:click={logout}>Logout</button>
 ```
 {% /section %}
 
 {% section #step-6 step=6 title="All set" %}
-Run your project with `npm run dev -- --open --port 3000` and open [Localhost on Port 3000](http://localhost:3000) in your browser.
+Run your project with `npm run dev` and open [localhost on port 5173](http://localhost:5173) in your browser.
 {% /section %}
 
 

src/routes/docs/tutorials/sveltekit/step-3/+page.markdoc

@@ -44,7 +44,6 @@ Only one instance of the `Client()` class should be created per app.
 Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID.
 
 ```js
-
 import { Client, Databases, Account } from "appwrite";
 
 const client = new Client();

src/routes/docs/tutorials/sveltekit/step-4/+page.markdoc

@@ -7,51 +7,63 @@ step: 4
 
 # Using stores {% #using-stores %}
 
-In Svelte, [stores](https://svelte.dev/docs/svelte-store) are a way to manage state throughout your application.
+Svelte [stores](https://svelte.dev/docs/svelte-store) provide an easy way to manage state throughout your application.
 We'll use a store to keep track of our user's data.
 
-Create a new file `src/lib/stores/user.js` and add the following code to it.
+Create a new file `src/lib/user.js` and add the following code to it.
 
 ```js
-import { writable } from "svelte/store";
-import { ID } from "appwrite";
-import { goto } from "$app/navigation";
-import { account } from "$lib/appwrite";
-
-const store = writable(null);
-
-async function init() {
-  try {
-    store.set(await account.get());
-  } catch (e) {
-    store.set(null);
-  }
-}
-
-async function register(email, password, name) {
-  await account.create(ID.unique(), email, password, name);
-  await login(email, password);
-}
-
-async function login(email, password) {
-  await account.createEmailSession(email, password);
-  await init();
-  goto("/"); // Redirect to home page after login
-}
-
-async function logout() {
-  await account.deleteSession("current");
-  store.set(null);
-}
-
-// Expose the store's value with $user
-export const user = {
-  subscribe: store.subscribe, 
-  register,
-  login,
-  logout,
-  init,
+import { writable } from 'svelte/store';
+import { ID } from 'appwrite';
+import { goto } from '$app/navigation';
+import { account } from '$lib/appwrite';
+
+// Avoid auth calls in server-side, so that a user is not shared between requests
+const isBrowser = typeof window !== 'undefined';
+
+const createUser = () => {
+	const store = writable(null);
+
+	async function init() {
+		if (!isBrowser) return;
+		try {
+			store.set(await account.get());
+		} catch (e) {
+			store.set(null);
+		}
+	}
+
+	init();
+
+	async function register(email, password, name) {
+		if (!isBrowser) return;
+		await account.create(ID.unique(), email, password, name);
+		await login(email, password);
+	}
+
+	async function login(email, password) {
+		if (!isBrowser) return;
+		await account.createEmailSession(email, password);
+		await init();
+		goto('/'); // Redirect to home page after login
+	}
+
+	async function logout() {
+		await account.deleteSession('current');
+		store.set(null);
+	}
+
+	return {
+		// Exposes the store's value with $user
+		subscribe: store.subscribe,
+		register,
+		login,
+		logout,
+		init
+	};
 };
+
+export const user = createUser();
 ```
 
 # Login page {% #login-page %}
@@ -62,51 +74,59 @@ Create a new file `src/routes/login/+page.svelte` and add the following code to
 
 ```html
 <script>
-  import { user } from "$lib/stores/user";
-
-  const login = async (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.target);
-    await user.login(formData.get("email"), formData.get("password"));
-  };
-
-  const register = async (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.target);
-    await user.register(formData.get("email"), formData.get("password"), formData.get("name"));
-  };
+	import { user } from '$lib/user';
+
+	const login = async (e) => {
+		e.preventDefault();
+		const formData = new FormData(e.target);
+		await user.login(formData.get('email'), formData.get('password'));
+	};
+
+	const register = async (e) => {
+		e.preventDefault();
+		const formData = new FormData(e.target);
+		await user.register(formData.get('email'), formData.get('password'), formData.get('name'));
+	};
 </script>
 
 <h1>Login or register</h1>
 
 <form on:submit={login}>
-  <input type="email" placeholder="Email" name="email" required />
-  <input type="password" placeholder="Password" name="password" required />
-  <button type="submit">
-    Login
-  </button>
+	<label>
+		Email
+		<input type="email" placeholder="Email" name="email" required />
+	</label>
+	<label>
+		Password:
+		<input type="password" placeholder="Password" name="password" required />
+	</label>
+	<button type="submit"> Login </button>
 </form>
 
-
 <form on:submit={register}>
-  <input type="text" placeholder="Name" name="name" required />
-  <input type="email" placeholder="Email" name="email" required />
-  <input
-    type="password"
-    placeholder="Password"
-    name="password"
-    required
-    minlength="8"
-  />
-  <button type="submit">
-    Register
-  </button>
+	<label>
+		Name:
+		<input type="text" placeholder="Name" name="name" required />
+	</label>
+	<label>
+		Email:
+		<input type="email" placeholder="Email" name="email" required />
+	</label>
+	<label>
+		Password:
+		<input type="password" placeholder="Password" name="password" required minlength="8" />
+	</label>
+	<button type="submit"> Register </button>
 </form>
 
 <style>
-  form {
-    display: grid;
-    gap: 0.25rem;
-  }
+	form {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25rem;
+
+		margin-block-end: 2rem;
+	}
 </style>
 ```

src/routes/docs/tutorials/sveltekit/step-5/+page.markdoc

@@ -8,49 +8,41 @@ step: 5
 We'll create a layout component, that's used by all pages, to display a navbar.
 The navbar will show a login button if the user is not logged in, and a logout button if the user is logged in.
 
-In this component, we can call our `user.init()` function to check if the user is logged in when the page loads.
-
 Create a new file `src/routes/+layout.svelte` and add the following code to it.
 
 ```html
 <script>
-  import { ideas } from "$lib/stores/ideas";
-  import { user } from "$lib/stores/user";
-  import { onMount } from "svelte";
-
-  onMount(async () => {
-    user.init();
-  });
+	import { user } from '$lib/user';
 </script>
 
 <nav>
-  <a href="/">Idea tracker</a>
-  {#if $user}
-    <div>
-      <span>{$user.name}</span>
-      <button type="button" on:click={user.logout}>Logout</button>
-    </div>
-  {:else}
-    <a href="/login">Login</a>
-  {/if}
+	<a href="/">Home</a>
+	{#if $user}
+		<div>
+			<span>{$user.name}</span>
+			<button type="button" on:click={user.logout}>Logout</button>
+		</div>
+	{:else}
+		<a href="/login">Login</a>
+	{/if}
 </nav>
 
 <slot />
 
 <style>
-  :global(*) {
-    font-family: sans-serif;
-  }
-
-  :global(body) {
-    margin: 1rem auto;
-    max-width: 30rem;
-  }
-
-  nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+	:global(*) {
+		font-family: sans-serif;
+	}
+
+	:global(body) {
+		margin: 1rem auto;
+		max-width: 30rem;
+	}
+
+	nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 </style>
 ```