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 |