mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
635b2d6050
## I have read the CONTRIBUTING.md file. YES ## What kind of change does this PR introduce? This PR helps standardise link sections which is useful for overview pages that frequently use similar sections such as "Next steps", "Get started", or "Examples". Six high-traffic overview pages are migrated as a pilot, with a skill in the new [supabase/docs-agent-skills](https://github.com/supabase/docs-agent-skills) repo to audit and convert the rest in a follow-on PR. Refactored from an initial YAML front matter approach per review feedback from @jeremenichelli. Now implemented as a React component and using existing linting & Markdown export functionality. A second round of review feedback further simplified the architecture: the per-listing component registry was removed in favor of a single `<ContentListings id="..." />` component backed by an ID-keyed data lookup, the listing data moved out of `apps/docs/components/` into `apps/docs/data/content-listings/`, the listing-specific link wrapper was replaced with the existing `<Link>` + `<GlassPanel>` pattern from the rest of the docs, and the headings now defer to the shared `<Heading>` from `MdxBase.shared.tsx` (no parallel marker-to-tag mapping, no typography overrides). Great feedback, thank you! 🙏 Relates to DOCS-1032. ## What is the current behavior? Authors implement these sections however they wish. As a result, overview and index pages use inconsistent patterns for orientation links: some use hand-rolled Markdown lists, some use custom panel/grid components, some use buttons, and some have no guidance about where to go next at all. There is no shared component for these sections and no analytics on those clicks. ## What is the new behavior? Authors add orientation sections in two steps: 1. Define listing data in a `.data.ts` file under `apps/docs/data/content-listings/` (for example, `storage.data.ts`). Each `ContentListingGroup` has a globally-unique `id` like `storage-get-started`. 2. Place a single `<ContentListings id="..." />` component inline in guide MDX. The ID is also the telemetry `listingId`, so the same value disambiguates the section in PostHog dashboards. Grid and list layouts, optional icons (such as `/docs/img/icons/github-icon` with `-light.svg` variants for dark mode), and external URLs are supported. Conditionals that use `$Show` around inline components are also supported, for example for auth pricing. ### Usage example from "Storage" overview page `apps/docs/data/content-listings/storage.data.ts`: ```ts export const storageGetStarted: ContentListingGroup = { id: 'storage-get-started', heading: 'Get started', description: 'Choose the bucket type that fits your use case:', type: 'grid', items: [ { title: 'Files buckets', href: '/guides/storage/quickstart', description: 'Store and serve images, videos, documents, and general-purpose files with direct URL access and row-level security.', }, { title: 'Analytics buckets', href: '/guides/storage/analytics/introduction', description: 'Store data in Apache Iceberg tables for data lakes, logs, and ETL. Query from Postgres via foreign tables with partitioning.', }, { title: 'Vector buckets', href: '/guides/storage/vector/introduction', description: 'Store embeddings and run similarity search for semantic matching, AI, and RAG. Use HNSW indexing, distance metrics, and metadata filtering.', }, ], } ``` `apps/docs/content/guides/storage.mdx`: ```mdx <ContentListings id="storage-get-started" /> ``` Renders as: <img width="689" alt="Storage Get started listing — Files, Analytics, and Vector buckets" src="https://github.com/user-attachments/assets/0d1b9531-962f-40ae-891e-b1e93ff1c939" /> <br>Exported in Markdown as: ```md ## Get started Choose the bucket type that fits your use case: - **[Files buckets](/docs/guides/storage/quickstart):** Store and serve images, videos, documents, and general-purpose files with direct URL access and row-level security. - **[Analytics buckets](/docs/guides/storage/analytics/introduction):** Store data in Apache Iceberg tables for data lakes, logs, and ETL. Query from Postgres via foreign tables with partitioning. - **[Vector buckets](/docs/guides/storage/vector/introduction):** Store embeddings and run similarity search for semantic matching, AI, and RAG. Use HNSW indexing, distance metrics, and metadata filtering. ``` Click tracking fires via PostHog (`docs_content_listing_clicked`): ```json { "action": "docs_content_listing_clicked", "custom_properties": { "targetPath": "/guides/storage/quickstart", "linkTitle": "Files buckets", "groupTitle": "Get started", "listingId": "storage-get-started" } } ``` Still finding my way around PostHog, but I verified on preview deploy that clicking a content listing on `/docs/guides/auth` sends `docs_content_listing_clicked` to `https://api.supabase.green/platform/telemetry/event` and receives HTTP 201. ### Authoring experience Three ways to add or convert content listings: copy the agent prompt first, use snippets for manual edits, or invoke the audit skill for batch follow-on work. Refer to `CONTRIBUTING.md` for the full authoring guide. #### 1. Agent prompt Copy into Cursor or another AI assistant: ```text Add a content listing block for [TOPIC] / [SECTION] (for example, Storage / Examples). Follow CONTRIBUTING § Content listings in apps/docs. - Add data to apps/docs/data/content-listings/[topic].data.ts - Use a globally-unique kebab-case id like `[topic]-[section]` - Place inline in the guide MDX with <ContentListings id="..." /> - Copy structure from storageGetStarted in apps/docs/data/content-listings/storage.data.ts - Run pnpm test:local lib/content-listings.test.ts from apps/docs ``` #### 2. VS Code / Cursor snippets Type these prefixes in the docs workspace (`.vscode/content-listing.code-snippets`): | Prefix | Inserts | | ----------- | -------------------------------------------------------- | | `cl-data` | `ContentListingGroup` export skeleton with namespaced id | | `cl-inline` | `<ContentListings id="…" />` in guide MDX | <img width="658" height="274" alt="image" src="https://github.com/user-attachments/assets/5ef20954-7aee-4925-887d-79a5ae766b37" /> #### 3. Batch audit skill For follow-on overview page conversion or maintenance, use the [`audit-content-listings`](https://github.com/supabase/docs-agent-skills/blob/main/.claude/skills/audit-content-listings/SKILL.md) skill in `docs-agent-skills` (skill, `conversion-manifest.json`, and validation script). Example: ```text Use audit-content-listings. Audit getting-started.mdx, update conversion-manifest.json, then convert the next unconverted section only. ``` ## Additional context The implementation includes a presentational `<ContentListings />` component (grid/list layouts, GlassPanel, telemetry) backed by ID-keyed data modules, and a single markdown export handler that reads the same `id` prop from the JSX and looks up data via the shared registry. Key files: - **Data:** `apps/docs/data/content-listings/` (one `.data.ts` file per guide topic, plus `index.ts` exporting `CONTENT_LISTINGS` and `getContentListingById`) - **Renderer:** `apps/docs/components/ContentListings/` (single `<ContentListings id="…" />` component); registered in `apps/docs/features/docs/MdxBase.shared.tsx` - **Types/helpers:** `apps/docs/lib/content-listings.schema.ts` (zod schemas, type aliases, grid/heading/href helpers) - **Markdown export:** `apps/docs/internals/markdown-schema/Listings.ts` (single ID-driven handler) wired into `apps/docs/internals/generate-guides-markdown.ts` - **Telemetry:** `docs_content_listing_clicked` defined in `packages/common/telemetry-constants.ts`, fired from `ContentListings.client.tsx` - **Authoring guide:** `apps/docs/CONTRIBUTING.md` (Components and elements → Content listings) - **VS Code snippets:** `.vscode/content-listing.code-snippets` (`cl-data`, `cl-inline`) ### Before & After #### Auth | [Before (production)](https://supabase.com/docs/guides/auth) | [After (preview)](https://docs-git-fork-nrichers-nikrichers-docs-1032-sta-e2a8cb-supabase.vercel.app/docs/guides/auth) | | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | |  |  | #### Database overview | [Before (production)](https://supabase.com/docs/guides/database/overview) | [After (preview)](https://docs-git-fork-nrichers-nikrichers-docs-1032-sta-e2a8cb-supabase.vercel.app/docs/guides/database/overview) | | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | |  |  | #### Edge Functions | [Before (production)](https://supabase.com/docs/guides/functions) | [After (preview)](https://docs-git-fork-nrichers-nikrichers-docs-1032-sta-e2a8cb-supabase.vercel.app/docs/guides/functions) | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | |  |  | #### Storage | [Before (production)](https://supabase.com/docs/guides/storage) | [After (preview)](https://docs-git-fork-nrichers-nikrichers-docs-1032-sta-e2a8cb-supabase.vercel.app/docs/guides/storage) | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | |  |  | #### Realtime | [Before (production)](https://supabase.com/docs/guides/realtime) | [After (preview)](https://docs-git-fork-nrichers-nikrichers-docs-1032-sta-e2a8cb-supabase.vercel.app/docs/guides/realtime) | | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | |  |  | #### Getting Started (partial migration for demoing) | [Before (production)](https://supabase.com/docs/guides/getting-started) | [After (preview)](https://docs-git-fork-nrichers-nikrichers-docs-1032-sta-e2a8cb-supabase.vercel.app/docs/guides/getting-started) | | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | |  |  | ### Test plan - [ ] Visually verify migrated pages render correctly: - [ ] `/guides/auth` — grid "Get started", conditional pricing list, grid "Next steps" - [ ] `/guides/database/overview` — get started + next steps listings - [ ] `/guides/getting-started` — top 3-column grid - [ ] `/guides/functions` — get started + example listings - [ ] `/guides/storage` — get started, examples, resources listings - [ ] `/guides/realtime` — get started, examples, resources listings - [ ] Confirm listings render at explicit page positions - [ ] Click a content listing link and verify `docs_content_listing_clicked` fires in PostHog with expected properties (the new `listingId` is the namespaced kebab-case id, e.g. `storage-get-started`) - [ ] Build docs and confirm `.md` alternate output includes listing sections at component placement (e.g. `public/markdown/guides/storage.md`) - [ ] Run unit tests: `pnpm test:local lib/content-listings.test.ts` in `apps/docs` ## Summary by CodeRabbit ## Release Notes * **New Features** * Introduced a standardized content listings system for organizing related guides and resources. * Content listings now support both grid and list layouts for consistent presentation. * Added click telemetry for content listing interactions. * **Documentation** * Updated authentication, database, functions, getting started, realtime, and storage guide pages to use the new content listing components. * Improved MDX structure examples and listing markup formatting in contributor documentation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Introduced a new content listings component for displaying guide content in list and grid layouts across documentation pages. * Added telemetry tracking for content listing interactions to measure user engagement. * **Documentation** * Updated guide pages (Authentication, Database, Functions, Storage, Realtime, Getting Started) to use the new listings layout. * Added contribution guidelines for creating and managing content listings in documentation. * **Tests** * Added comprehensive test coverage for content listings validation, serialization, and rendering. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Nik Richers <nik@validmind.ai> Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>
411 lines
14 KiB
Plaintext
411 lines
14 KiB
Plaintext
---
|
|
id: 'getting-started'
|
|
title: 'Getting Started'
|
|
description: 'Resources for getting started with Supabase.'
|
|
hideToc: true
|
|
---
|
|
|
|
<ContentListings id="getting-started-overview" />
|
|
|
|
### Use cases
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/ai#examples" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="AI, Vectors, and embeddings"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/openai_logo"
|
|
hasLightIcon={true}
|
|
>
|
|
Build AI-enabled applications using our Vector toolkit.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Subscription Payments (SaaS)"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
>
|
|
Clone, deploy, and fully customize a SaaS subscription application with Next.js.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Partner Gallery"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
>
|
|
Postgres full-text search, image storage, and more.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
|
|
### Framework quickstarts
|
|
|
|
<$Show if="docs:framework_quickstarts">
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/getting-started/quickstarts/reactjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="React"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/react-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a React app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/nextjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Next.js"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Next.js app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/nuxtjs" passHref className="col-span-4">
|
|
<GlassPanel title="Nuxt" span="col-span-6" background={false} icon="/docs/img/icons/nuxt-icon">
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Nuxt app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/hono" passHref className="col-span-4">
|
|
<GlassPanel title="Hono" span="col-span-6" background={false} icon="/docs/img/icons/hono-icon">
|
|
Learn how to create a Supabase project, add some sample data to your database, secure it with
|
|
auth, and query the data from a Hono app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/redwoodjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="RedwoodJS"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/redwood-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database using Prisma
|
|
migration and seeds, and query the data from a RedwoodJS app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<$Show if="sdk:dart">
|
|
<Link href="/guides/getting-started/quickstarts/flutter" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Flutter"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/flutter-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Flutter app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<$Show if="sdk:swift">
|
|
<Link href="/guides/getting-started/quickstarts/ios-swiftui" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="iOS SwiftUI"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/swift-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from an iOS app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<$Show if="sdk:kotlin">
|
|
<Link href="/guides/getting-started/quickstarts/kotlin" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Android Kotlin"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/kotlin-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from an Android Kotlin app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<Link href="/guides/getting-started/quickstarts/sveltekit" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="SvelteKit"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/svelte-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a SvelteKit app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/solidjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="SolidJS"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/solidjs-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a SolidJS app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/vue" passHref className="col-span-4">
|
|
<GlassPanel title="Vue" span="col-span-6" background={false} icon="/docs/img/icons/vuejs-icon">
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Vue app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/tanstack" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="TanStack Start"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/tanstack-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a TanStack Start app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/refine" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Refine"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/refine-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Refine app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
|
|
</$Show>
|
|
|
|
<$Show if="!quickstarts:hide_nimbus">
|
|
|
|
<$Partial path="quickstart_nimbus.mdx" />
|
|
|
|
</$Show>
|
|
|
|
<$Show if="docs:web_apps">
|
|
|
|
### Web app demos
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/getting-started/tutorials/with-nextjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Next.js"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-react" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="React"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/react-icon"
|
|
>
|
|
Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-vue-3" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Vue 3"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/vuejs-icon"
|
|
>
|
|
Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-nuxt-3" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Nuxt 3"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nuxt-icon"
|
|
>
|
|
Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-angular" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Angular"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/angular-icon"
|
|
>
|
|
Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-redwoodjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="RedwoodJS"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/redwood-icon"
|
|
>
|
|
Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-svelte" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Svelte"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/svelte-icon"
|
|
>
|
|
Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-sveltekit" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="SvelteKit"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/svelte-icon"
|
|
>
|
|
Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-refine" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Refine"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/refine-icon"
|
|
>
|
|
Learn how to build a user management app with Refine and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</$Show>
|
|
|
|
<$Show if="docs:mobile_tutorials">
|
|
|
|
### Mobile tutorials
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<$Show if="sdk:dart">
|
|
<Link href="/guides/getting-started/tutorials/with-flutter" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Flutter"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/flutter-icon"
|
|
>
|
|
Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<Link
|
|
href="/guides/getting-started/tutorials/with-expo-react-native"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Expo React Native"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/expo-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="/guides/getting-started/tutorials/with-expo-react-native-social-auth"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Expo React Native Social Auth"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/expo-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to implement social authentication in an app with Expo React Native and Supabase Database and Auth functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<$Show if="sdk:kotlin">
|
|
<Link href="/guides/getting-started/tutorials/with-kotlin" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Android Kotlin"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/kotlin-icon"
|
|
>
|
|
Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<$Show if="sdk:swift">
|
|
<Link href="/guides/getting-started/tutorials/with-swift" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="iOS Swift"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/swift-icon"
|
|
>
|
|
Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<Link href="/guides/getting-started/tutorials/with-ionic-react" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Ionic React"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/ionic-icon"
|
|
>
|
|
Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-ionic-vue" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Ionic Vue"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/ionic-icon"
|
|
>
|
|
Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="/guides/getting-started/tutorials/with-ionic-angular"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Ionic Angular"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/ionic-icon"
|
|
>
|
|
Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</$Show>
|