Feat pagination tutorial

src/routes/docs/tutorials/pagination-react/+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-react/+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-react/+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-react/step-1');
+};

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

@@ -0,0 +1,32 @@
+---
+layout: tutorial
+title: Pagination deep-dive with React
+description: Dive deep into integrating pagination in a React application using the Appwrite backend
+step: 1
+difficulty: intermediate
+readtime: 30
+---
+
+ 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.
+
+ While this is a React example, the same priciples should apply to any other framework or platform.
+
+# Why pagination? {% #why-pagination %}
+Pagination is critical in web development, especially when working with large datasets. 
+It helps users explore and process data without feeling overwhelmed by breaking it down into smaller parts. 
+With large data sets, it also lets you improve performance and lower resource use by fetching a small "page" of data to be processed at a time.
+
+# Concepts {% #concepts %}
+1. What is pagination?
+1. Building different pagination UIs in React.
+1. Offset pagination.
+1. Cursor pagination.
+1. Trade-offs between offset and cursor pagination.
+
+# Prerequisites {% #prerequisites %}
+Before diving in, ensure you:
+
+1. Basic knowledge of JavaScript and React.
+2. Basic understanding of Appwrite Databases.
+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-react/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-react/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-react/step-3/+page.markdoc

@@ -0,0 +1,63 @@
+---
+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.
+
+```js
+import { Client, Databases } from "appwrite";
+
+const client = new Client();
+
+client
+  .setEndpoint("https://cloud.appwrite.io/v1")
+  .setProject("import.meta.env.VITE_APPWRITE_PROJECT_ID");
+
+export const databases = new Databases(client);
+```
+
+# Create environment 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
+VITE_APPWRITE_PROJECT_ID=<YOUR_PROJECT_ID>
+VITE_APPWRITE_DATABASE_ID=<YOUR_DATABASE_ID>
+VITE_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.

src/routes/docs/tutorials/pagination-react/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
+---
+Before we can talk about pagination, we need to create some mock data to paginate.
+
+# 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 your database, and click **Create collection**. Name the collection "Todos".
+
+Create the following attributes in your collection.
+
+{% 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-react/step-5/+page.markdoc

@@ -0,0 +1,66 @@
+---
+layout: tutorial
+title: Environment setup
+description: Setup the environment for seeding the database
+step: 5
+---
+
+# 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 { Client, Databases, ID } from "appwrite";
+
+import dotenv from "dotenv";
+dotenv.config();
+
+const client = new Client();
+
+client
+  .setEndpoint("https://cloud.appwrite.io/v1")
+  .setProject(process.env.VITE_APPWRITE_PROJECT_ID); // Replace with your project ID
+
+export const databases = new Databases(client);
+
+
+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(
+        process.env.VITE_APPWRITE_DATABASE_ID,
+        process.env.VITE_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.