From 9b7d835883b01461fbded858d8421a55455e5935 Mon Sep 17 00:00:00 2001 From: Atharva Deosthale Date: Fri, 12 Dec 2025 18:11:46 +0530 Subject: [PATCH 1/2] add and changes to quickstart prompts --- src/routes/docs/quick-starts/nextjs/prompt.md | 8 +- .../docs/quick-starts/react-native/prompt.md | 9 +- src/routes/docs/quick-starts/react/prompt.md | 59 ++++++++ .../quick-starts/tanstack-start/prompt.md | 126 ++++++++++++++++++ 4 files changed, 196 insertions(+), 6 deletions(-) create mode 100644 src/routes/docs/quick-starts/react/prompt.md create mode 100644 src/routes/docs/quick-starts/tanstack-start/prompt.md diff --git a/src/routes/docs/quick-starts/nextjs/prompt.md b/src/routes/docs/quick-starts/nextjs/prompt.md index 8803fbc64c..41d91f929b 100644 --- a/src/routes/docs/quick-starts/nextjs/prompt.md +++ b/src/routes/docs/quick-starts/nextjs/prompt.md @@ -4,8 +4,9 @@ Do exactly these steps in order. Confirm each step succeeds before continuing. I Respect user's package manager at all time. Don't use NPM if the user uses something else. -1. Create Next.js app - - Run: npx create-next-app@latest my-app --use-npm --no-tailwind --eslint +1. Create or use existing Next.js app + - If you already have a Next.js project open, stay in it and use it (App Router required). + - Otherwise, run: npx create-next-app@latest my-app --use-npm --no-tailwind --eslint - Change dir: cd my-app - When prompted: TypeScript = No, ESLint = Yes, Tailwind = No, src dir = your choice, App Router = Yes, Import alias = No. @@ -30,7 +31,8 @@ Respect user's package manager at all time. Don't use NPM if the user uses somet ``` 4. Build the login page (client component) - - Create/replace app/page.js with this component using "use client". + - If this is a fresh project you just created above, you may replace `app/page.js` with this component using "use client". + - If you are working in an existing project, create a new route `app/auth/page.js` (or .tsx) instead of overriding the default route. - It must render: - Email/password inputs - Name input for registration diff --git a/src/routes/docs/quick-starts/react-native/prompt.md b/src/routes/docs/quick-starts/react-native/prompt.md index 3d148714c0..0b3cc709c4 100644 --- a/src/routes/docs/quick-starts/react-native/prompt.md +++ b/src/routes/docs/quick-starts/react-native/prompt.md @@ -6,8 +6,9 @@ Rules - Use explicit config (no hardcoding in code except reading constants/env the user sets). - Respect the user’s package manager and Expo workflow. -1. Scaffold Expo app - - Run: npx create-expo-app my-app && cd my-app +1. Scaffold or use existing Expo app + - If you already have an Expo project open, stay in it and use it. + - Otherwise, run: npx create-expo-app my-app && cd my-app 2. Install SDK and polyfills - Run: npx expo install react-native-appwrite react-native-url-polyfill @@ -33,7 +34,9 @@ Rules ``` 5. UI wiring (idea + key snippets) - - Screen file (e.g., `app/(tabs)/index.tsx`): + - If this is a fresh project, you can reuse the default entry screen (e.g., `app/(tabs)/index.tsx`). + - If you are adding to an existing project, create a new screen/route (e.g., `app/auth.tsx` or a new tab/stack screen) instead of overriding the current default route. + - Screen file example: ```tsx import React, { useState } from 'react'; diff --git a/src/routes/docs/quick-starts/react/prompt.md b/src/routes/docs/quick-starts/react/prompt.md new file mode 100644 index 0000000000..0010c8a3f6 --- /dev/null +++ b/src/routes/docs/quick-starts/react/prompt.md @@ -0,0 +1,59 @@ +Goal: Add Appwrite auth to a new React (Vite) app with a working login/register/logout page. + +Do exactly these steps in order. Confirm each step succeeds before continuing. If any command fails, show the error and fix it automatically. + +Respect user's package manager at all time. Don't use NPM if the user uses something else. + +1. Create or use existing React app + - If you already have a React (Vite) project open, stay in it and use it. + - Otherwise, run: npm create vite@latest my-app -- --template react + - Change dir: cd my-app + +2. Install Appwrite SDK + - Run: npm install appwrite + +3. Create Appwrite client module (ask user for details; never assume) + - Ask the user for: + - Appwrite Cloud Region (e.g. fra, nyc) + - Project ID (from Console -> Settings) + - Hardcode the endpoint and project ID in the file: src/lib/appwrite.js (or .ts) if provided, else leave placeholder and ask the user to provide them. + - Create file: src/lib/appwrite.js (or .ts) with key snippet: + ```js + import { Client, Account, ID } from 'appwrite'; + const endpoint = 'https://.cloud.appwrite.io/v1'; + const projectId = ''; + if (!endpoint || !projectId) throw new Error('Missing Appwrite endpoint and project ID'); + const client = new Client().setEndpoint(endpoint).setProject(projectId); + export const account = new Account(client); + export { ID }; + ``` + +4. Build the login page + - If this is a fresh project, you may replace `src/App.jsx` (or .tsx) with a component that renders the auth UI. + - If you are working in an existing project, add a new route/page instead of overriding the default route. If routing is not set up, install `react-router-dom` and add a `/auth` route that renders this component. + - The component should render: + - Email/password inputs + - Name input for registration + - Buttons: Login, Register, Logout + - Shows "Logged in as " when a session exists + - Implement functions: + - login(email, password): account.createEmailPasswordSession({ email, password }) then set user via account.get() + - register(): account.create({ userId: ID.unique(), email, password, name }) then call login + - logout(): account.deleteSession({ sessionId: 'current' }) then clear user state + +5. Verify environment (ask user to confirm) + - Confirm endpoint and project ID are set in `src/lib/appwrite.js`. + - Ensure the Web app platform exists in Appwrite Console with Hostname = `localhost`. If missing, guide the user to add it. + +6. Run and test + - Run: npm run dev -- --open --port 3000 + - Open: http://localhost:3000 + - Test flows: + - Register a new user and auto login works + - Logout then login again + - Surface any Appwrite errors (invalid project, endpoint, CORS/hostname) and fix by guiding updates to appwrite.js and Console settings. + +Deliverables + +- A running React app with working Appwrite auth (register/login/logout) +- Files created/updated: package.json (deps), src/lib/appwrite.js, src/App.jsx diff --git a/src/routes/docs/quick-starts/tanstack-start/prompt.md b/src/routes/docs/quick-starts/tanstack-start/prompt.md new file mode 100644 index 0000000000..119ac1be97 --- /dev/null +++ b/src/routes/docs/quick-starts/tanstack-start/prompt.md @@ -0,0 +1,126 @@ +Goal: Add Appwrite auth to a TanStack Start app with a working login/register/logout page. + +Do exactly these steps in order. Confirm each step succeeds before continuing. If any command fails, show the error and fix it automatically. + +Respect the user's package manager at all times. Don't use NPM if the user uses something else. + +1. Create or use existing TanStack Start app + - If you already have a TanStack Start project open, stay in it and use it. + - Otherwise, run: npm create @tanstack/start@latest my-app + - Change dir: cd my-app + +2. Install Appwrite SDK + - Run: npm install appwrite + +3. Create Appwrite client module (ask user for details; never assume) + - Ask the user for: + - Appwrite Cloud Region (e.g. fra, nyc) + - Project ID (from Console → Settings) + - Hardcode the endpoint and project ID in the file: src/utils/appwrite.ts (or .js) if provided, else leave placeholder and ask the user to provide them. + - Create file: src/utils/appwrite.ts (or .js) with key snippet: + ```ts + import { Client, Account, ID, type Models } from 'appwrite'; + const endpoint = 'https://.cloud.appwrite.io/v1'; + const projectId = ''; + if (!endpoint || !projectId) throw new Error('Missing Appwrite endpoint and project ID'); + const client = new Client().setEndpoint(endpoint).setProject(projectId); + export const account = new Account(client); + export { ID }; + export type { Models }; + ``` + +4. Build the login route + - If this is a fresh project, you may replace `src/routes/index.tsx` with an auth UI route. + - If you are working in an existing project, create a new route (e.g., `src/routes/auth.tsx`) instead of overriding the default route. + - The route should render: + - Email/password inputs + - Name input for registration + - Buttons: Login, Register, Logout + - Shows "Logged in as " when a session exists + - Route scaffold example: + + ```tsx + import { useState } from 'react'; + import { createFileRoute } from '@tanstack/react-router'; + import { account, ID, type Models } from '../utils/appwrite'; + + export const Route = createFileRoute('/')({ + component: Index + }); + + function Index() { + const [user, setUser] = useState | null>(null); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [name, setName] = useState(''); + + async function login(e: string, p: string) { + await account.createEmailPasswordSession({ email: e, password: p }); + setUser(await account.get()); + } + + async function register() { + await account.create({ userId: ID.unique(), email, password, name }); + await login(email, password); + } + + async function logout() { + await account.deleteSession({ sessionId: 'current' }); + setUser(null); + } + + return ( +
+

{user ? `Logged in as ${user.name}` : 'Not logged in'}

+
+ setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + setName(e.target.value)} + /> + + + {user && ( + + )} +
+
+ ); + } + ``` + +5. Verify environment (ask user to confirm) + - Confirm endpoint and project ID are set in `src/utils/appwrite.ts`. + - Ensure the Web app platform exists in Appwrite Console with Hostname = `localhost`. If missing, guide the user to add it. + +6. Run and test + - Run: npm run dev + - Open: http://localhost:3000 + - Test flows: + - Register a new user and auto login works + - Logout then login again + - Surface any Appwrite errors (invalid project, endpoint, CORS/hostname) and fix by guiding updates to appwrite.ts and Console settings. + +Deliverables + +- A TanStack Start app with working Appwrite auth (register/login/logout) +- Files created/updated: package.json (deps), src/utils/appwrite.ts, auth route file From c7540cf7fcc0b87b4a4567c5f045d55e1fe895fd Mon Sep 17 00:00:00 2001 From: Atharva Deosthale Date: Wed, 31 Dec 2025 04:53:42 +0530 Subject: [PATCH 2/2] more quickstart prompts --- .../docs/quick-starts/android-java/prompt.md | 363 ++++++++++++++++++ .../docs/quick-starts/android/prompt.md | 241 ++++++++++++ .../docs/quick-starts/angular/prompt.md | 139 +++++++ src/routes/docs/quick-starts/apple/prompt.md | 174 +++++++++ src/routes/docs/quick-starts/dart/prompt.md | 169 ++++++++ src/routes/docs/quick-starts/deno/prompt.md | 176 +++++++++ src/routes/docs/quick-starts/dotnet/prompt.md | 157 ++++++++ .../docs/quick-starts/flutter/prompt.md | 210 ++++++++++ src/routes/docs/quick-starts/go/prompt.md | 248 ++++++++++++ src/routes/docs/quick-starts/kotlin/prompt.md | 170 ++++++++ src/routes/docs/quick-starts/nextjs/prompt.md | 10 +- src/routes/docs/quick-starts/node/prompt.md | 238 ++++++++++++ src/routes/docs/quick-starts/nuxt/prompt.md | 120 ++++++ src/routes/docs/quick-starts/php/prompt.md | 213 ++++++++++ src/routes/docs/quick-starts/python/prompt.md | 212 ++++++++++ src/routes/docs/quick-starts/react/prompt.md | 10 +- src/routes/docs/quick-starts/refine/prompt.md | 148 +++++++ src/routes/docs/quick-starts/ruby/prompt.md | 167 ++++++++ src/routes/docs/quick-starts/solid/prompt.md | 127 ++++++ .../docs/quick-starts/sveltekit/prompt.md | 120 ++++++ src/routes/docs/quick-starts/swift/prompt.md | 162 ++++++++ .../quick-starts/tanstack-start/prompt.md | 7 +- src/routes/docs/quick-starts/vue/prompt.md | 123 ++++++ src/routes/docs/quick-starts/web/prompt.md | 149 +++++++ 24 files changed, 3842 insertions(+), 11 deletions(-) create mode 100644 src/routes/docs/quick-starts/android-java/prompt.md create mode 100644 src/routes/docs/quick-starts/android/prompt.md create mode 100644 src/routes/docs/quick-starts/angular/prompt.md create mode 100644 src/routes/docs/quick-starts/apple/prompt.md create mode 100644 src/routes/docs/quick-starts/dart/prompt.md create mode 100644 src/routes/docs/quick-starts/deno/prompt.md create mode 100644 src/routes/docs/quick-starts/dotnet/prompt.md create mode 100644 src/routes/docs/quick-starts/flutter/prompt.md create mode 100644 src/routes/docs/quick-starts/go/prompt.md create mode 100644 src/routes/docs/quick-starts/kotlin/prompt.md create mode 100644 src/routes/docs/quick-starts/node/prompt.md create mode 100644 src/routes/docs/quick-starts/nuxt/prompt.md create mode 100644 src/routes/docs/quick-starts/php/prompt.md create mode 100644 src/routes/docs/quick-starts/python/prompt.md create mode 100644 src/routes/docs/quick-starts/refine/prompt.md create mode 100644 src/routes/docs/quick-starts/ruby/prompt.md create mode 100644 src/routes/docs/quick-starts/solid/prompt.md create mode 100644 src/routes/docs/quick-starts/sveltekit/prompt.md create mode 100644 src/routes/docs/quick-starts/swift/prompt.md create mode 100644 src/routes/docs/quick-starts/vue/prompt.md create mode 100644 src/routes/docs/quick-starts/web/prompt.md diff --git a/src/routes/docs/quick-starts/android-java/prompt.md b/src/routes/docs/quick-starts/android-java/prompt.md new file mode 100644 index 0000000000..f7da195aef --- /dev/null +++ b/src/routes/docs/quick-starts/android-java/prompt.md @@ -0,0 +1,363 @@ +Goal: Add Appwrite auth to a new Android (Java) app with a working login/register/logout UI. + +Rules + +- Never assume project details. Ask the user for Cloud Region, Project ID, and package name. +- Use Android Studio as the development environment. +- Ensure the user creates a platform in the Appwrite Console with the correct package name. + +1. Create or use existing Android project + - If you already have an Android project open in Android Studio, stay in it and use it. + - Otherwise, open Android Studio and click **New Project**. + - Choose a project template (e.g., **Empty Activity**) and click **Next**. + - Enter the app **name** and **package name**, then click **Finish**. + +2. Create Appwrite project + - Ask the user to go to the [Appwrite Console](https://cloud.appwrite.io/console). + - If this is their first time, they should create an account and create their first project. + - Under **Add a platform**, add an **Android app** with the app's **name** and **package name** (the `applicationId` from the app-level `build.gradle`). + +3. Add the Appwrite SDK (ask user for Project ID) + - Add the following dependency to the app-level **build.gradle** file inside the **dependencies** block: + ```groovy + implementation "io.appwrite:sdk-for-android:8.1.0" + ``` + - Add the OAuth callback activity inside the `` tag in **AndroidManifest.xml** (replace `` with actual project ID): + ```xml + + ... + + ... + + + + + + + + + + + + ``` + +4. Create Appwrite helper class (ask user for Region and Project ID) + - Ask the user for: + - Cloud Region (e.g., fra, nyc) + - Project ID (from Console -> Settings) + - Create file: `AppwriteHelper.java` with the following code (replace ``, ``, and ``): + ```java + package ; + + import android.content.Context; + + import java.util.Map; + + import io.appwrite.Client; + import io.appwrite.ID; + import io.appwrite.coroutines.CoroutineCallback; + import io.appwrite.models.Session; + import io.appwrite.models.User; + import io.appwrite.services.Account; + + public class AppwriteHelper { + private static AppwriteHelper instance; + private Client client; + private Account account; + + private AppwriteHelper(Context context) { + client = new Client(context) + .setEndpoint("https://.cloud.appwrite.io/v1") + .setProject(""); + + account = new Account(client); + } + + public static synchronized AppwriteHelper getInstance(Context context) { + if (instance == null) { + instance = new AppwriteHelper(context.getApplicationContext()); + } + return instance; + } + + public interface AuthCallback { + void onSuccess(T result); + void onError(Exception error); + } + + public void login(String email, String password, final AuthCallback callback) { + account.createEmailPasswordSession( + email, + password, + new CoroutineCallback<>(result -> { + callback.onSuccess(result); + return null; + }, error -> { + callback.onError(error); + return null; + })); + } + + public void register(String email, String password, final AuthCallback>> callback) { + account.create( + ID.unique(), + email, + password, + new CoroutineCallback<>(result -> { + callback.onSuccess(result); + return null; + }, error -> { + callback.onError(error); + return null; + }) + ); + } + + public void logout(final AuthCallback callback) { + account.deleteSession("current", new CoroutineCallback<>(result -> { + callback.onSuccess(result); + return null; + }, error -> { + callback.onError(error); + return null; + })); + } + } + ``` + +5. Create login UI in XML + - Update `activity_main.xml` layout file: + ```xml + + + + + +