Merge pull request #196 from timDeHof/doc-78-submit-pagination-tutori…

…al-to-docs

feat(docs): add pagination tutorial and related files

src/routes/docs/tutorials/pagination/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { globToTutorial } from '$lib/utils/tutorials.js';
+	import { setContext } from 'svelte';
+
+	export let data;
+	const tutorials = globToTutorial(data);
+	setContext('tutorials', tutorials);
+</script>
+
+<slot />

src/routes/docs/tutorials/pagination/+layout.ts

@@ -0,0 +1,11 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = ({ url }) => {
+	const tutorials = import.meta.glob('./**/*.markdoc', {
+		eager: true
+	});
+	return {
+		tutorials,
+		pathname: url.pathname
+	};
+};

src/routes/docs/tutorials/pagination/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    throw redirect(303, '/docs/tutorials/pagination/step-1');
+};

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

@@ -0,0 +1,32 @@
+---
+layout: tutorial
+title: Implementing pagination with Appwrite and React
+description: Dive deep into integrating pagination in a React application using the Appwrite backend
+step: 1
+difficulty: intermediate
+readtime: 20
+---
+
+ In this tutorial, you'll learn how to seamlessly integrate Appwrite's pagination methods into a React application. Proper pagination ensures efficient data display, enhance user experience, and provide a smooth interface for navigating large datasets.
+
+# Why pagination? {% #why-pagination %}
+Pagination is critical in web development, especially when working with huge databases. It helps users explore and process data without feeling overwhelmed by breaking it down into smaller parts. Data-rich applications like search engines and e-commerce sites require this.
+
+The benefits are numerous:
+* faster load times
+* streamlined data management
+* a tidier, more user-friendly interface
+
+# Learning Objectives {% #learning-objectives %}
+By the end of this tutorial, you'll be equipped with:
+1. The knowledge to set up a React project integrated with Appwrite.
+2. Skills to craft queries using offset pagination and understand its implications.
+3. Expertise in constructing queries with cursor pagination and recognizing its benefits.
+4. Insight into the pros and cons of different pagination techniques.
+
+# Prerequisites {% #prerequisites %}
+Before diving in, ensure you:
+
+1. Basic knowledge of JavaScript and React.
+2. Basic understanding of databases or backend systems.
+3. Have the latest version of [Node.js](https://nodejs.org/en) and [npm](https://www.npmjs.com/) installed on your computer.

src/routes/docs/tutorials/pagination/step-10/+page.markdoc

@@ -0,0 +1,23 @@
+---
+layout: tutorial
+title: Finalizing and further exploration
+description: Test your pagination Implementation in React with Appwrite and discover more resources to deepen your understanding.
+step: 10
+---
+# Wrapping up {% #wrapping-up %}
+Pagination is a fundamental feature for applications that handle large datasets. By now, you should have a solid understanding of how to implement different pagination methods using Appwrite with React.
+# Test your pagination implementation {% #test-your-pagination-implementation %}
+Before deploying or integrating your pagination into a larger project, it's crucial to test it thoroughly:
+
+ ```sh
+ npm run dev -- --open --port 3000
+ ```
+
+ Navigate to [http://localhost:3000](http://localhost:3000) in your browser to interact with your application. Ensure that both offset and cursor pagination methods work as expected, and data loads correctly as you navigate through pages.
+
+ # Dive deeper {% #dive-deeper %}
+
+ To deepen your understanding and explore more advanced pagination techniques or nuances, refer to the official documentation:
+[Appwrite pagination documentation](/docs/products/databases/pagination).
+
+Remember, the choice between offset and cursor pagination will depend on your application's specific needs. Always consider the size of the dataset, user experience, and performance requirements when making your decision.

src/routes/docs/tutorials/pagination/step-2/+page.markdoc

@@ -0,0 +1,28 @@
+---
+layout: tutorial
+title: Create app
+description: Create a React app project and integrate it with Appwrite.
+step: 2
+---
+
+# Create React project {% #create-react-project %}
+
+Create a React app with the `npm create` command from [Vite](https://vitejs.dev/).
+
+```sh
+npm create vite@latest todo-app -- --template react && cd todo-app
+```
+
+# Add dependencies {% #add-dependencies %}
+
+Install the JavaScript Appwrite Web SDK.
+
+```sh
+npm install appwrite dotenv
+```
+
+You can start the development server to watch your app update in the browser as you make changes.
+
+```sh
+npm run dev -- --open --port 3000
+```

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

@@ -0,0 +1,60 @@
+---
+layout: tutorial
+title: Set up Appwrite
+description: Import and initialize Appwrite for your React application.
+step: 3
+---
+# Create project {% #create-project %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
+
+{% 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 %}
+
+If this is your first time using Appwrite, create an account and create your first project.
+
+Next, under **Add a platform**, choose  **Web app**. For the **Hostname**, use "localhost".
+
+{% only_dark %}
+![Add a platform](/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.
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+To use Appwrite in our React app, we need to identify our project ID. You can find this ID on 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 `src/lib/appwrite.js` to store our Appwrite-related code.
+
+{% info title="One Client() instance per an app" %}
+It's recommended to create only one instance of the `Client()` class for each app.
+{% /info %}
+
+Insert the following code, making sure to replace `<YOUR_PROJECT_ID>` with your actual project ID.
+
+```js
+import { Client, Databases } from "appwrite";
+
+const client = new Client();
+
+client
+  .setEndpoint("https://cloud.appwrite.io/v1")
+  .setProject("[YOUR_PROJECT_ID]"); // Replace with your project ID
+
+export const databases = new Databases(client);
+```

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

@@ -0,0 +1,57 @@
+---
+layout: tutorial
+title: Add database
+description: Add a database to your React application using Appwrite Web SDK.
+step: 4
+---
+Databases are essential for dynamic applications, ensuring data is organized and accessible. They form the backbone for data storage and management. In this step, we'll integrate a database into our application using the Appwrite Web SDK, setting the stage for more advanced functionalities.
+
+# Create a database {% #create-a-database %}
+In Appwrite's console, navigate to the **Databases** page and click **Create database** and name it "development".
+
+# Create a collection {% #create-collection %}
+To create a collection, head to the **Databases** page, find to your database, and click **Create collection**. Name the collection "Todos" as it will store our todo items.
+
+When setting up your collection, make sure it has these attributes:
+
+{% table %}
+*   {% width=10 %}
+* Field {% width=10 %}
+* Type {% width=10 %}
+* Required {% width=10 %}
+* Size {% width=10 %}
+* Min {% width=10 %}
+* Max {% width=10 %}
+---
+*  
+* taskId
+* Integer
+* Yes
+* -
+* 0
+* 500
+---
+*  
+* title
+* String
+* Yes
+* 248
+* -
+* -
+---
+*  
+* completed
+* Boolean
+* Yes
+* -
+* -
+* -
+{% /table %}
+
+# Add Permissions {% #add-permissions %}
+1. Go to the **Settings** tab.
+2. Scroll to the **Permissions** section.
+3. Add the **Any** role, ensuring you select both **CREATE** and **READ** permissions.
+{% info title="Any role" %}
+  The **Any** role is used in this tutorial for demonstration purposes. Remember to protect your user's data in production applications by configuring proper [permissions](/docs/advanced/platform/permissions).
+{% /info %}

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

@@ -0,0 +1,67 @@
+---
+layout: tutorial
+title: Environment setup
+description: Setup the environment for seeding the database
+step: 5
+---
+# Create environment configuration file {% #create-env-file %}
+Set up the environment configuration for your project to declare project-wide variables like Appwrite project ID, database ID, and collection ID. Create a `.env` and add the declare variables.
+```sh
+APPWRITE_PROJECT_ID=[YOUR_PROJECT_ID]
+APPWRITE_DATABASE_ID=[YOUR_DATABASE_ID]
+APPWRITE_COLLECTION_ID=[YOUR_COLLECTION_ID]
+```
+This `.env` file will now act as the central place for your project's environment-specific configurations. Make sure not to sure this file publicly, especially if it contains sensitive information like API keys or database credentials.
+
+# Seeding the collection {% #seeding-the-collection %}
+We'll now create a script that populates documents from a `setup.json` file.Create a new file `./db/setup.js` in the root of your project directory for this purpose.
+
+Insert the following code, make sure that you have `[APPWRITE_DATABASE_ID]` and `[APPWRITE_COLLECTION_ID]` with your respective database and collection IDs in a `.env` file on the root.
+
+```js
+import { databases } from "../src/lib/appwrite.js";
+import { ID } from "appwrite";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const dataURL = "https://jsonplaceholder.typicode.com/users/1/todos";
+
+async function seedCollection() {
+  const response = await fetch(dataURL);
+  const data = await response.json();
+  console.log("Starting to seed collection...");
+  try {
+    for (let i = 0; i < data.length; i++) {
+      const item = data[i];
+      let promise = await databases.createDocument(
+        import.meta.env.APPWRITE_DATABASE_ID,
+        import.meta.env.APPWRITE_COLLECTION_ID,
+        ID.unique(),
+        {
+          taskId: item.id,
+          title: item.title,
+          completed: item.completed,
+        },
+      );
+      console.log(`${promise.title} has been added to the collection`);
+    }
+    console.log("Seeding collection done!");
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+seedCollection();
+
+```
+
+# Run seed script {% #run-seed-script %}
+
+Open a terminal and run the following command:
+
+```sh
+node ./db/setup.js
+```
+
+You should see the process running in the terminal. Once it's completed, check your collection to verify that it's populated with the data.