diff --git a/src/routes/docs/quick-starts/+page.svelte b/src/routes/docs/quick-starts/+page.svelte
index eb46da9785..bf221bc5a8 100644
--- a/src/routes/docs/quick-starts/+page.svelte
+++ b/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'
},
diff --git a/src/routes/docs/quick-starts/nextjs/+page.markdoc b/src/routes/docs/quick-starts/nextjs/+page.markdoc
index b0749de47d..6810d27682 100644
--- a/src/routes/docs/quick-starts/nextjs/+page.markdoc
+++ b/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 %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /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.
\ No newline at end of file
+Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`.
+
+{% only_dark %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /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 %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
+
+Create a new file `app/appwrite.js` and add the following code to it, replace `` with your project ID.
+
+```js
+import { Client, Account } from 'appwrite';
+
+export const client = new Client();
+
+client
+ .setEndpoint('https://cloud.appwrite.io/v1')
+ .setProject(''); // 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 (
+
+
Logged in as {loggedInUser.name}
+
+
+ );
+ }
+
+ return (
+
+
Not logged in
+
+
+ );
+};
+
+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 %}
\ No newline at end of file
diff --git a/src/routes/docs/tutorials/react/step-1/+page.markdoc b/src/routes/docs/tutorials/react/step-1/+page.markdoc
index cf4046d420..42dd6dfa92 100644
--- a/src/routes/docs/tutorials/react/step-1/+page.markdoc
+++ b/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 %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
## Concepts {% #concepts %}
diff --git a/src/routes/docs/tutorials/react/step-6/+page.markdoc b/src/routes/docs/tutorials/react/step-6/+page.markdoc
index d26adad33f..b4fb9bdc69 100644
--- a/src/routes/docs/tutorials/react/step-6/+page.markdoc
+++ b/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.
-
+{% only_dark %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
Create a new collection with the following attributes:
| Field | Type | Required |
diff --git a/src/routes/docs/tutorials/sveltekit/step-1/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-1/+page.markdoc
index e18d07c62e..985db5e470 100644
--- a/src/routes/docs/tutorials/sveltekit/step-1/+page.markdoc
+++ b/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 %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
## Concepts {% #concepts %}
This tutorial will introduce the following concepts:
diff --git a/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc
index 732ba96511..f123d2fcc1 100644
--- a/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc
+++ b/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.
-
+{% only_dark %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
Create a new collection with the following attributes:
| Field | Type | Required |
diff --git a/src/routes/docs/tutorials/vue/step-1/+page.markdoc b/src/routes/docs/tutorials/vue/step-1/+page.markdoc
index efaed17b26..ff4085e5f5 100644
--- a/src/routes/docs/tutorials/vue/step-1/+page.markdoc
+++ b/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 %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
## Concepts {% #concepts %}
diff --git a/src/routes/docs/tutorials/vue/step-6/+page.markdoc b/src/routes/docs/tutorials/vue/step-6/+page.markdoc
index b851e22d3b..cc69912b6e 100644
--- a/src/routes/docs/tutorials/vue/step-6/+page.markdoc
+++ b/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.
-
+{% only_dark %}
+
+{% /only_dark %}
+{% only_light %}
+
+{% /only_light %}
Create a new collection with the following attributes:
| Field | Type | Required |
diff --git a/static/images/docs/tutorials/dark/idea-tracker-collection.png b/static/images/docs/tutorials/dark/idea-tracker-collection.png
new file mode 100644
index 0000000000..c80e433065
Binary files /dev/null and b/static/images/docs/tutorials/dark/idea-tracker-collection.png differ
diff --git a/static/images/docs/tutorials/dark/idea-tracker.png b/static/images/docs/tutorials/dark/idea-tracker.png
new file mode 100644
index 0000000000..08630c5e96
Binary files /dev/null and b/static/images/docs/tutorials/dark/idea-tracker.png differ
diff --git a/static/images/docs/tutorials/idea-tracker-collection.png b/static/images/docs/tutorials/idea-tracker-collection.png
new file mode 100644
index 0000000000..84f818f06e
Binary files /dev/null and b/static/images/docs/tutorials/idea-tracker-collection.png differ
diff --git a/static/images/docs/tutorials/idea-tracker.png b/static/images/docs/tutorials/idea-tracker.png
new file mode 100644
index 0000000000..215ecab2cf
Binary files /dev/null and b/static/images/docs/tutorials/idea-tracker.png differ