📚 Documentation: Tutorial for TypeScript #269
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,125 @@ | ||
| <script lang="ts"> | ||
| import { MainFooter } from '$lib/components'; | ||
| import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata'; | ||
| import { DOCS_TITLE_SUFFIX } from '$routes/titles'; | ||
|
|
||
| const title = 'Tutorials' + DOCS_TITLE_SUFFIX; | ||
|
There was a problem hiding this comment. Can you remove all the white space changes? |
||
| const description = DEFAULT_DESCRIPTION; | ||
| const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png'; | ||
| </script> | ||
|
|
||
| <svelte:head> | ||
| <!-- Titles --> | ||
| <title>{title}</title> | ||
| <meta property="og:title" content={title} /> | ||
| <meta name="twitter:title" content={title} /> | ||
| <!-- Desscription --> | ||
| <meta name="description" content={description} /> | ||
| <meta property="og:description" content={description} /> | ||
| <meta name="twitter:description" content={description} /> | ||
| <!-- Image --> | ||
| <meta property="og:image" content={ogImage} /> | ||
| <meta property="og:image:width" content="1200" /> | ||
| <meta property="og:image:height" content="630" /> | ||
| <meta name="twitter:image" content={ogImage} /> | ||
| <meta name="twitter:card" content="summary_large_image" /> | ||
| </svelte:head> | ||
|
|
||
| <main class="aw-main-section"> | ||
| <article class="aw-article"> | ||
| <header class="aw-article-header"> | ||
| <div class="aw-article-header-start u-flex-vertical aw-u-cross-start"> | ||
| <div class="u-position-relative u-flex u-cross-center"> | ||
| <h1 class="aw-title">Platforms</h1> | ||
| </div> | ||
| </div> | ||
| <div class="aw-article-header-end" /> | ||
| </header> | ||
| <div class="aw-article-content aw-u-gap-80"> | ||
| <section class="u-flex-vertical u-gap-24"> | ||
| <h2 class="aw-eyebrow">Client</h2> | ||
| <ul class="aw-grid-row-4 aw-grid-row-4-mobile-2"> | ||
| <li class="is-mobile-col-span-2"> | ||
| <a href="/docs/tutorials/react" class="aw-card is-normal"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="icon-react aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">React</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Learn Appwrite Auth, Databases, and more with React. | ||
| </p> | ||
| </a> | ||
| </li> | ||
| <li class="is-mobile-col-span-2"> | ||
| <a href="/docs/tutorials/typescript" class="aw-card is-normal"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="icon-typescript aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">TypeScript</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Learn Appwrite Auth, Databases, and more with TypeScript. | ||
| </p> | ||
| </a> | ||
| </li> | ||
| <li class="is-mobile-col-span-2"> | ||
| <a href="/docs/tutorials/vue" class="aw-card is-normal"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="aw-icon-vue aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">Vue</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Learn Appwrite Auth, Databases, and more with Vue. | ||
| </p> | ||
| </a> | ||
| </li> | ||
| <li class="is-mobile-col-span-2"> | ||
| <a href="/docs/tutorials/sveltekit" class="aw-card is-normal"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="icon-svelte aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">SvelteKit</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Learn Appwrite Auth, Databases, and more with SvelteKit. | ||
| </p> | ||
| </a> | ||
| </li> | ||
| <li class="is-mobile-col-span-2"> | ||
| <article class="aw-card is-full-color"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="icon-flutter aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">Flutter</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Coming soon... | ||
| </p> | ||
| </article> | ||
| </li> | ||
| <li class="is-mobile-col-span-2"> | ||
| <article class="aw-card is-full-color"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="icon-apple aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">Apple</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Coming soon... | ||
| </p> | ||
| </article> | ||
| </li> | ||
| <li class="is-mobile-col-span-2"> | ||
| <article class="aw-card is-full-color"> | ||
| <header class="u-flex u-cross-baseline u-gap-4"> | ||
| <span class="icon-android aw-u-font-size-24" aria-hidden="true" /> | ||
| <h4 class="aw-sub-body-500 aw-u-color-text-primary">Android</h4> | ||
| </header> | ||
| <p class="aw-sub-body-400 u-margin-block-start-4"> | ||
| Coming soon... | ||
| </p> | ||
| </article> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </div> | ||
| </article> | ||
|
|
||
| <MainFooter variant="docs" /> | ||
| </main> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { redirect } from '@sveltejs/kit'; | ||
| import type { PageLoad } from './$types'; | ||
|
|
||
| export const load: PageLoad = async () => { | ||
| throw redirect(303, '/docs/tutorials/typescript/step-1'); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| --- | ||
| layout: tutorial | ||
| title: Build an ideas tracker with TypeScript | ||
| description: Learn to build a TypeScript app with no backend code using an Appwrite backend. | ||
| step: 1 | ||
| difficulty: beginner | ||
| 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 TypeScript with React. | ||
|
|
||
| {% only_dark %} | ||
|  | ||
| {% /only_dark %} | ||
| {% only_light %} | ||
|  | ||
| {% /only_light %} | ||
|
|
||
| # Concepts {% #concepts %} | ||
|
|
||
| This tutorial will introduce the following concepts: | ||
|
|
||
| 1. Setting up your first project | ||
| 2. Authentication | ||
| 3. Databases and collections | ||
| 4. Queries and pagination | ||
| 5. Storage | ||
|
|
||
|
|
||
| # Prerequisites {% #prerequisites %} | ||
|
|
||
| 1. Basic knowledge of TypeScript and React. | ||
| 2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| --- | ||
| layout: tutorial | ||
| title: Create app | ||
| description: Create a React app project and integrate with Appwrite. | ||
| step: 2 | ||
| --- | ||
|
|
||
| # Create React project {% #create-react-project %} | ||
|
|
||
| Create a React app with the `npm create` command. | ||
|
|
||
| ```sh | ||
| npm create vite@latest ideas-tracker && cd ideas-tracker | ||
| ``` | ||
|
|
||
| Select React and then TypeScript from CLI. | ||
PrerakMathur20 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
|  | ||
|
|
||
| # Add dependencies {% #add-dependencies %} | ||
|
|
||
| Install the TypeScript Appwrite SDK. | ||
|
|
||
| ```sh | ||
| npm install appwrite | ||
PrerakMathur20 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ``` | ||
|
|
||
| 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 | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| --- | ||
| 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 %} | ||
|  | ||
| {% /only_dark %} | ||
| {% only_light %} | ||
|  | ||
| {% /only_light %} | ||
|
|
||
| If this is your first time using Appwrite, create an account and create your first project. | ||
|
|
||
| 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. | ||
|
|
||
| # Initialize Appwrite SDK {% #init-sdk %} | ||
|
|
||
| To use Appwrite in our Svelte app, we'll need to find our project ID. Find your project's ID in the **Settings** page. | ||
|
|
||
| {% only_dark %} | ||
|  | ||
| {% /only_dark %} | ||
| {% only_light %} | ||
|  | ||
| {% /only_light %} | ||
|
|
||
| Create a new file `src/lib/appwrite.ts` to hold our Appwrite related code. | ||
| Only one instance of the `Client()` class should be created per app. | ||
| Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID. | ||
|
|
||
| ```ts | ||
| import { Client, Databases, Account } from "appwrite"; | ||
|
|
||
| const client = new Client(); | ||
| client | ||
| .setEndpoint("https://cloud.appwrite.io/v1") | ||
| .setProject("<YOUR_PROJECT_ID>"); // Replace with your project ID | ||
|
|
||
| export const account: Account = new Account(client); | ||
| export const databases: Databases = new Databases(client); | ||
|
|
||
| ``` |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why were these changed?