Added next.js quick start guide

src/lib/layouts/DocsArticle.svelte

@@ -82,7 +82,6 @@
 							<li>Last updated on July 16, 2023</li>
 							<li>
 								<button class="">
-									<!-- TODO: wait for implement icons in website -->
 									<span class="icon-edit" aria-hidden="true" />
 									<span>Update on GitHub</span>
 								</button>

src/routes/docs/quick-starts/+page.svelte

@@ -18,14 +18,20 @@
 			title: 'Web App',
 			quickStarts: [
 				{
-					title: 'React.js',
-					icon: 'icon-next_js',
+					title: 'Next.js',
+					icon: 'icon-nextjs',
 					image: '/images/blog/placeholder.png',
 					href: 'nextjs'
 				},
+				{
+					title: 'React',
+					icon: 'icon-react',
+					image: '/images/blog/placeholder.png',
+					href: 'react'
+				},
 				{
 					title: 'Vue.js',
-					icon: 'icon-vue_js',
+					icon: 'icon-vue',
 					image: '/images/blog/placeholder.png',
 					href: 'vue'
 				},

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

@@ -5,12 +5,150 @@ description: Learn how to use Appwrite to add authentication, user management, f
 difficulty: beginner
 readtime: 3
 ---
+Learn to setup your first Next.js project powered by Appwrite.
+{% section #step-1 step=1 title="Create project" %}
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
 
-Improve the docs, add this guide.
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
 
-We still don't have this guide in place, but we do have some great news. 
-The Appwrite docs, just like Appwrite, is completely open sourced.
-This means, anyone can help improve them and add new guides and tutorials. 
+If this is your first time using Appwrite, create an account and create your first project.
 
-If you see this page, **we're actively looking for contributions to this page**.
-Follow our contribution guidelines, open a PR to [our Website repo](https://github.com/appwrite/website), and collaborate with our core team to improve this page.
+Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`. 
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip optional steps.
+
+{% /section %}
+{% section #step-2 step=2 title="Create Next.js project" %}
+Create a Next.js project and create a **JavaScript** Next.js project.
+
+```sh
+npx create-next-app@latest && cd my-app
+```
+{% /section %}
+{% section #step-3 step=3 title="Install Appwrite SDK" %}
+
+Install the JavaScript Appwrite SDK.
+
+```sh
+npm install appwrite
+```
+{% /section %}
+{% section #step-4 step=4 title="Define Appwrite service" %}
+Find your project's ID in the **Settings** page. 
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Create a new file `app/appwrite.js` and add the following code to it, replace `<YOUR_PROJECT_ID>` with your project ID.
+
+```js
+import { Client, Account } from 'appwrite';
+
+export const client = new Client();
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1')
+    .setProject('<YOUR_PROJECT_ID>'); // Replace with your project ID
+
+export const account = new Account(client);
+export { ID } from 'appwrite';
+```
+{% /section %}
+{% section #step-5 step=5 title="Create a login page" %}
+Create or update `app/page.jsx` file and add the following code to it.
+
+```js
+"use client";
+import { useState } from "react";
+import { account, ID } from "appwrite";
+
+const LoginPage = () => {
+  const [loggedInUser, setLoggedInUser] = useState(null);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+
+  const login = async (email, password) => {
+    const session = await account.createEmailSession(email, password);
+    setLoggedInUser(await account.get());
+  };
+
+  const register = async () => {
+    await account.create(ID.unique(), email, password, name);
+    login(email, password);
+  };
+
+  const logout = async () => {
+    await account.deleteSession("current");
+    setLoggedInUser(null);
+  };
+
+  if (loggedInUser) {
+    return (
+      <div>
+        <p>Logged in as {loggedInUser.name}</p>
+        <button type="button" onClick={logout}>
+          Logout
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <p>Not logged in</p>
+      <form>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <button type="button" onClick={() => login(email, password)}>
+          Login
+        </button>
+        <button type="button" onClick={register}>
+          Register
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default LoginPage;
+```
+{% /section %}
+
+{% section #step-6 step=6 title="All set" %}
+Run your project with `npm run dev` and open [http://localhost:3000](http://localhost:3000) in your browser.
+
+Don't forget to add some CSS to suit your style.
+{% /section %}

src/routes/docs/tutorials/react/step-1/+page.markdoc

@@ -10,7 +10,12 @@ readtime: 10
 **Idea Tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
 In this tutorial, you will build Idea Tracker with Appwrite and React.
 
-[TODO: Image] 
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker.png)
+{% /only_light %}
 
 ## Concepts {% #concepts %}
 

src/routes/docs/tutorials/react/step-6/+page.markdoc

@@ -8,7 +8,12 @@ step: 6
 ## Create collection
 In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
 
-![Create collection screen](#TODO update me)
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
+{% /only_light %}
 
 Create a new collection with the following attributes:
 | Field       | Type   | Required |

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

@@ -10,7 +10,12 @@ readtime: 10
 **Idea Tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
 In this tutorial, you will build Idea Tracker with Appwrite and SvelteKit.
 
-[TODO: Image] 
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker.png)
+{% /only_light %}
 
 ## Concepts {% #concepts %}
 This tutorial will introduce the following concepts:

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

@@ -7,7 +7,12 @@ step: 6
 ## Create collection
 In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
 
-![Create collection screen](#TODO update me)
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
+{% /only_light %}
 
 Create a new collection with the following attributes:
 | Field       | Type   | Required |

src/routes/docs/tutorials/vue/step-1/+page.markdoc

@@ -8,7 +8,12 @@ step: 1
 **Idea Tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
 In this tutorial, you will build Idea Tracker with Appwrite and Vue.
 
-[TODO: Image] 
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker.png)
+{% /only_light %}
 
 ## Concepts {% #concepts %}
 

src/routes/docs/tutorials/vue/step-6/+page.markdoc

@@ -7,7 +7,12 @@ step: 6
 ## Create collection
 In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
 
-![Create collection screen](#TODO update me)
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
+{% /only_light %}
 
 Create a new collection with the following attributes:
 | Field       | Type   | Required |