From c8cbf55ea836ad7abd597cfa51fd5d218753235b Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Fri, 20 Jan 2023 16:17:47 -0800
Subject: [PATCH 1/5] Update titles

---
 .../tutorials/with-angular.mdx                |  22 +--
 .../getting-started/tutorials/with-expo.mdx   |  17 +-
 .../tutorials/with-flutter.mdx                |  16 +-
 .../tutorials/with-ionic-angular.mdx          |  18 +-
 .../tutorials/with-ionic-react.mdx            |  16 +-
 .../tutorials/with-ionic-vue.mdx              |  16 +-
 .../getting-started/tutorials/with-nextjs.mdx |  29 ++-
 .../getting-started/tutorials/with-nuxt-3.mdx |  20 +-
 .../getting-started/tutorials/with-react.mdx  |  16 +-
 .../tutorials/with-redwoodjs.mdx              | 180 ++----------------
 .../tutorials/with-solidjs.mdx                |  16 +-
 .../getting-started/tutorials/with-svelte.mdx |  16 +-
 .../tutorials/with-sveltekit.mdx              |  16 +-
 .../getting-started/tutorials/with-vue-3.mdx  |  16 +-
 14 files changed, 92 insertions(+), 322 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
index 8f2754453f9..0b2115624dc 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-angular',
-  title: 'Quickstart: Angular',
+  title: 'Build a User Management App with Angular',
   description: 'Learn how to use Supabase in your Angular App.',
-  sidebar_label: 'Angular',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/angular-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/angular-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -195,11 +194,7 @@ export class AuthComponent implements OnInit {
         />
       </div>
       <div>
-        <button
-          type="submit"
-          class="button block"
-          [disabled]="loading"
-        >
+        <button type="submit" class="button block" [disabled]="loading">
           {{ loading ? 'Loading' : 'Send magic link' }}
         </button>
       </div>
@@ -530,13 +525,8 @@ export class AccountComponent implements OnInit {
 }
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
index b60db313a51..589e3d6d33b 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
@@ -1,20 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-expo',
-  title: 'Quickstart: Expo',
+  title: 'Build a User Management App with Expo',
   description: 'Learn how to use Supabase in your React Native App.',
-  sidebar_label: 'Expo',
-  hide_table_of_contents: false,
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/supabase-flutter-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/expo-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/expo-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -500,13 +498,8 @@ Now you will need to run the prebuild command to get the application working on
 expo prebuild
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
index 6a73c7aa8ab..5e5d77994f0 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-flutter',
-  title: 'Quickstart: Flutter',
+  title: 'Build a User Management App with Flutter',
   description: 'Learn how to use Supabase in your Flutter App.',
-  sidebar_label: 'Flutter',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/supabase-flutter-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/flutter-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/flutter-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -77,7 +76,7 @@ Add an intent-filter to enable deep linking:
 </manifest>
 ```
 
-For iOS, edit the ios/Runner/Info.plist file. 
+For iOS, edit the ios/Runner/Info.plist file.
 
 Add CFBundleURLTypes to enable deep linking:
 
@@ -793,14 +792,13 @@ class _AccountPageState extends State<AccountPage> {
 }
 ```
 
-Congratulations, that is it! You have now built a fully functional user management app using Flutter and Supabase!
+Congratulations, you've built a fully functional user management app using Flutter and Supabase!
 
 ## See also
 
 - [Flutter Tutorial: building a Flutter chat app](https://supabase.com/blog/flutter-tutorial-building-a-chat-app)
 - [Flutter Tutorial - Part 2: Authentication and Authorization with RLS](https://supabase.com/blog/flutter-authentication-and-authorization-with-rls)
 
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
index 88c1d9e6433..a9c4ec599e6 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-ionic-angular',
-  title: 'Quickstart: Ionic Angular',
+  title: 'Build a User Management App with Ionic Angular',
   description: 'Learn how to use Supabase in your Ionic Angular App.',
-  sidebar_label: 'Ionic Angular',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-angular).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/mhartington/supabase-ionic-angular).
+</Admonition>
 
 <ProjectSetup />
 
@@ -522,14 +521,9 @@ template: `
 `
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-## Resources
+## See also
 
 - [Authentication in Ionic Angular with Supabase](https://supabase.com/blog/authentication-in-ionic-angular)
 
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx
index c14bb343ed3..8fd16025c55 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-ionic-react',
-  title: 'Quickstart: Ionic React',
+  title: 'Build a User Management App with Ionic React',
   description: 'Learn how to use Supabase in your Ionic React App.',
-  sidebar_label: 'Ionic React',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-react).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/mhartington/supabase-ionic-react).
+</Admonition>
 
 <ProjectSetup />
 
@@ -495,13 +494,8 @@ return (
       <Avatar url={profile.avatar_url} onUpload={updateProfile}></Avatar>
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx
index 2f368771b78..6aea2ce3406 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-ionic-vue',
-  title: 'Quickstart: Ionic Vue',
+  title: 'Build a User Management App with Ionic Vue',
   description: 'Learn how to use Supabase in your Ionic Vue App.',
-  sidebar_label: 'Ionic Vue',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-vue).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/mhartington/supabase-ionic-vue).
+</Admonition>
 
 <ProjectSetup />
 
@@ -555,13 +554,8 @@ export default defineComponent({
 </script>
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
index 81b86e96b2f..f17b835107c 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
@@ -1,17 +1,15 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-nextjs',
-  title: 'Quickstart: Next.js',
+  title: 'Build a User Management App with NextJS',
   description: 'Learn how to use Supabase in your Next App.',
-  sidebar_label: 'Next.js',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### Video Guide
+## Video Guide
 
 <div class="video-container">
   <iframe
@@ -22,9 +20,10 @@ export const meta = {
   ></iframe>
 </div>
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -718,17 +717,15 @@ return (
 )
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) and deploy it to Vercel.
-- Explore the [pre-built Auth UI for React](/docs/guides/auth/auth-helpers/auth-ui).
-- Explore the [Auth Helpers for Next.js](/docs/guides/auth/auth-helpers/nextjs).
-- Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers).
-- See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub.
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
+## See also
+
+- See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) and deploy it to Vercel
+- Explore the [pre-built Auth UI for React](/docs/guides/auth/auth-helpers/auth-ui)
+- Explore the [Auth Helpers for Next.js](/docs/guides/auth/auth-helpers/nextjs)
+- Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers)
+- See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index b4f5af0a1a3..b70aaa4cf41 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-nuxt-3',
-  title: 'Quickstart: Nuxt 3',
+  title: 'Build a User Management App with Nuxt 3',
   description: 'Learn how to use Supabase in your Nuxt 3 App.',
-  sidebar_label: 'Nuxt 3',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### Github
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -418,14 +417,7 @@ And then we can add the widget to the Account page:
 </script>
 ```
 
-That is it! You should now be able to upload a profile photo to Supabase Storage.
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
+That is it! You should now be able to upload a profile photo to Supabase Storage and you have a fully functional application.
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
index 7d1418b7146..57fc2def7bf 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-react',
-  title: 'Quickstart: React',
+  title: 'Build a User Management App with React',
   description: 'Learn how to use Supabase in your React App.',
-  sidebar_label: 'React',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -397,13 +396,8 @@ return (
 )
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx
index cae8504a010..de65c198f93 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx
@@ -1,49 +1,19 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-redwoodjs',
-  title: 'Quickstart: RedwoodJS',
+  title: 'Build a User Management App with RedwoodJS',
   description: 'Learn how to use Supabase in your RedwoodJS App.',
-  sidebar_label: 'RedwoodJS',
 }
 
-## Intro
-
-For the sake of consistency with the other framework Quickstart examples, we'll build a RedwoodJS a little differently than normal.
-
-We **_won't use_** Prisma to connect to the Supabase Postgres database or [Prisma migrations](https://redwoodjs.com/docs/cli-commands#prisma-migrate) as one typically might in a Redwood app.
-Instead, we'll rely on the Supabase client to do some of the work on the **web** side and use the client again on the **API** side to do data fetching as well.
-
-That means you will want to refrain from running any `yarn rw prisma migrate` commands and also double check your build commands on deployment to ensure Prisma won't reset your database.
-
-<Admonition type="note">
-
-TLDR; Prisma currently doesn't support cross-schema foreign keys, so introspecting the schema fails due to how your Supabase `public` schema references the `auth.users`.
-
-</Admonition>
-
-This example provides the steps to build a simple user management app (from scratch!) using Supabase and [RedwoodJS](https://redwoodjs.com/docs/introduction). It includes:
-
-- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data.
-- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email).
-- Supabase [Storage](/docs/guides/storage): users can upload a photo.
-- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables.
-- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data.
-
-By the end of this guide you'll have an app which allows users to login and update some basic profile details:
+<QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
 <Admonition type="note">
-
-Note: For RedwoodJS apps, port will be 8910
-
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/redwoodjs/redwoodjs-supabase-quickstart).
 </Admonition>
 
-### GitHub
-
-If you get stuck at any point, take a look at [this repo](https://github.com/redwoodjs/redwoodjs-supabase-quickstart).
-
 {/* ## Video demo */}
 
 {/* Coming soon. */}
@@ -84,128 +54,14 @@ The **`web side`** is built with React. Redwood's router makes it simple to map
 Pages may contain a "Layout" component to wrap content. They also contain "Cells" and regular React components.
 Cells allow you to declaratively manage the lifecycle of a component that fetches and displays data.
 
-<Admonition type="note">
-
-For the sake of consistency with the other framework Quickstart examples, we'll build a RedwoodJS a little differently than normal.
+For the sake of consistency with the other framework tutorials, we'll build this app a little differently than normal.
 We **_won't use_** Prisma to connect to the Supabase Postgres database or [Prisma migrations](https://redwoodjs.com/docs/cli-commands#prisma-migrate) as one typically might in a Redwood app.
 Instead, we'll rely on the Supabase client to do some of the work on the **`web`** side and use the client again on the **`api`** side to do data fetching as well.
 
-</Admonition>
+That means you will want to refrain from running any `yarn rw prisma migrate` commands and also double check your build commands on deployment to ensure Prisma won't reset your database. Prisma currently doesn't support cross-schema foreign keys, so introspecting the schema fails due
+to how your Supabase `public` schema references the `auth.users`.
 
-## Project set up
-
-Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase
-and then creating a "schema" inside the database.
-
-<Admonition type="note">
-
-When setting up Supabase, you'll interact with your project dashboard. However, most of the RedwoodJS setup steps will interact with the [Redwood CLI](https://redwoodjs.com/docs/cli-commands) to generate routes, pages, components, and more.
-So be sure to have a terminal at the ready and in your project directory.
-
-</Admonition>
-
-### Create a project
-
-1. Go to [app.supabase.com](https://app.supabase.com).
-1. Click on "New Project".
-1. Enter your project details.
-1. Wait for the new database to launch.
-
-### Set up the database schema
-
-Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor,
-or you can just copy/paste the SQL from below and run it yourself.
-
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="dashboard"
->
-<TabPanel id="dashboard" label="Dashboard">
-
-1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
-2. Click **User Management Starter**.
-3. Click **Run**.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/sql-user-management-starter.mp4" type="video/mp4" muted playsInline />
-</video>
-
-</TabPanel>
-<TabPanel id="sql" label="SQL">
-
-```sql
--- Create a table for public "profiles"
-create table profiles (
-  id uuid references auth.users not null,
-  updated_at timestamp with time zone,
-  username text unique,
-  avatar_url text,
-  website text,
-
-  primary key (id),
-  unique(username),
-  constraint username_length check (char_length(username) >= 3)
-);
-
-alter table profiles enable row level security;
-
-create policy "Public profiles are viewable by everyone."
-  on profiles for select
-  using ( true );
-
-create policy "Users can insert their own profile."
-  on profiles for insert
-  with check ( auth.uid() = id );
-
-create policy "Users can update own profile."
-  on profiles for update
-  using ( auth.uid() = id );
-
--- Set up Realtime!
-begin;
-  drop publication if exists supabase_realtime;
-  create publication supabase_realtime;
-commit;
-alter publication supabase_realtime add table profiles;
-
--- Set up Storage!
-insert into storage.buckets (id, name)
-values ('avatars', 'avatars');
-
-create policy "Avatar images are publicly accessible."
-  on storage.objects for select
-  using ( bucket_id = 'avatars' );
-
-create policy "Anyone can upload an avatar."
-  on storage.objects for insert
-  with check ( bucket_id = 'avatars' );
-
-```
-
-</TabPanel>
-</Tabs>
-
-#### Important Note about Prisma and Migrations
-
-<Admonition type="note">
-
-Because this Quick Start does not use Prisma to manage the database schema, seed it, or run migrations, you **need** to take extra care when running some of the typical Redwood CLI commands.
-
-</Admonition>
-
-### Get the API Keys
-
-Now that you've created some database tables, you are ready to insert data using the auto-generated API.
-We just need to get the URL as well as the `anon`, `service_role` and `JWT_SECRET` keys from the API settings.
-
-1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
-2. Find your API `URL`, `anon`, and `service_role` keys on this page.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<ProjectSetup />
 
 ## Building the App
 
@@ -281,7 +137,7 @@ And finally, you will also need to save **just** the `web side` environment vari
 
 ```bash title=redwood.toml
 [web]
-  title = "Supabase Redwood Quickstart"
+  title = "Supabase Redwood Tutorial"
   port = 8910
   apiProxyPath = "/.redwood/functions"
   includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"]
@@ -333,9 +189,7 @@ yarn rw dev
 ```
 
 <Admonition type="note">
-
-Note: You can also use the alias `rw` for `redwood`, as in `yarn rw` to run Redwood CLI commands
-
+  `rw` is an alias for `redwood`, as in `yarn rw` to run Redwood CLI commands.
 </Admonition>
 
 You should see a "Welcome to RedwoodJS" page and a message about not having any pages yet.
@@ -355,7 +209,7 @@ yarn rw generate page home /
 
 <Admonition type="note">
 
-Note: the slash `/` is important here as it creates a root level route.
+The `/` is important here as it creates a root level route.
 
 </Admonition>
 
@@ -591,14 +445,10 @@ const Account = () => {
 export default Account
 ```
 
-<Admonition type="note">
-
-Note: You'll see the use of `useAuth()` several times in the quickstart. Redwood's `useAuth` hook provides convenient ways to access
+You'll see the use of `useAuth()` several times. Redwood's `useAuth` hook provides convenient ways to access
 logIn, logOut, currentUser, and access the `supabase` authenticate client. We'll use it to get an instance
 of the supabase client to interact with your API.
 
-</Admonition>
-
 ### Update Home Page
 
 Now that we have all the components in place, let's update your `HomePage` page to use them:
@@ -771,12 +621,10 @@ return (
 )
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
+## See also
+
 - Learn more about [RedwoodJS](https://redwoodjs.com)
 - Visit the [RedwoodJS Discourse Community](https://community.redwoodjs.com)
 
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx
index 7de71d63910..614d72826b5 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-solidjs',
-  title: 'Quickstart: SolidJS',
+  title: 'Build a User Management App with SolidJS',
   description: 'Learn how to use Supabase in your SolidJS App.',
-  sidebar_label: 'SolidJS',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/solid-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/solid-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -415,13 +414,8 @@ return (
 )
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
index 69cdea17b87..69fcb78928c 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-svelte',
-  title: 'Quickstart: Svelte',
+  title: 'Build a User Management App with Svelte',
   description: 'Learn how to use Supabase in your Svelte App.',
-  sidebar_label: 'Svelte',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -368,13 +367,8 @@ And then we can add the widget to the Account page:
 </form>
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
index bbac06e6019..fdad12022bb 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-sveltekit',
-  title: 'Quickstart: SvelteKit',
+  title: 'Build a User Management App wtih SvelteKit',
   description: 'Learn how to use Supabase in your SvelteKit App.',
-  sidebar_label: 'SvelteKit',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -434,13 +433,8 @@ And then we can add the widget to the Account page:
 </form>
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
index a1ec84a8c92..48923b48f81 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
@@ -1,19 +1,18 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  id: 'with-vue-3',
-  title: 'Quickstart: Vue 3',
+  title: 'Build a User Management App with Vue 3',
   description: 'Learn how to use Supabase in your Vue 3 App.',
-  sidebar_label: 'Vue 3',
 }
 
 <QuickstartIntro />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)
 
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management).
+<Admonition type="note">
+  If you get stuck while working through this guide, refer to the [full example on
+  GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management).
+</Admonition>
 
 <ProjectSetup />
 
@@ -379,13 +378,8 @@ And then we can add the widget to the Account page:
 </template>
 ```
 
-## Next steps
-
 At this stage you have a fully functional application!
 
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page

From 44afd20619e91b48c92b06ed51853d5a6a7ec4e2 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Fri, 20 Jan 2023 16:19:17 -0800
Subject: [PATCH 2/5] Update intro and project setup

---
 apps/docs/components/MDX/project_setup.mdx    | 32 ++++++-------------
 apps/docs/components/MDX/quickstart_intro.mdx | 12 +++----
 2 files changed, 14 insertions(+), 30 deletions(-)

diff --git a/apps/docs/components/MDX/project_setup.mdx b/apps/docs/components/MDX/project_setup.mdx
index 9efe03df58e..2003a3a2220 100644
--- a/apps/docs/components/MDX/project_setup.mdx
+++ b/apps/docs/components/MDX/project_setup.mdx
@@ -2,22 +2,19 @@ import UserManagementSQLTemplate from './user_management_quickstart_sql_template
 import { Tabs } from 'ui'
 export const TabPanel = Tabs.Panel
 
-# Project set up
+## Project setup
 
-Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase
-and then creating a "schema" inside the database.
+Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase and then creating a "schema" inside the database.
 
-## Create a project
+### Create a project
 
-1. Go to [app.supabase.com](https://app.supabase.com).
-1. Click on "New Project".
+1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
 1. Enter your project details.
 1. Wait for the new database to launch.
 
-## Set up the database schema
+### Set up the database schema
 
-Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor,
-or you can just copy/paste the SQL from below and run it yourself.
+Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor, or you can just copy/paste the SQL from below and run it yourself.
 
 <Tabs
   scrollable
@@ -31,10 +28,6 @@ or you can just copy/paste the SQL from below and run it yourself.
 2. Click **User Management Starter**.
 3. Click **Run**.
 
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/sql-user-management-starter.mp4" type="video/mp4" muted playsInline />
-</video>
-
 </TabPanel>
 <TabPanel id="sql" label="SQL">
 
@@ -43,15 +36,10 @@ or you can just copy/paste the SQL from below and run it yourself.
 </TabPanel>
 </Tabs>
 
-## Get the API Keys
+### Get the API Keys
 
 Now that you've created some database tables, you are ready to insert data using the auto-generated API.
-We just need to get the URL and `anon` key from the API settings.
+We just need to get the Project URL and `anon` key from the API settings.
 
-1. Go to the [Settings](https://app.supabase.com/project/_/settings) page in the Dashboard.
-2. Click **API** in the sidebar.
-3. Find your API `URL`, `anon`, and `service_role` keys on this page.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
+1. Find your Project `URL`, `anon`, and `service_role` keys on this page.
diff --git a/apps/docs/components/MDX/quickstart_intro.mdx b/apps/docs/components/MDX/quickstart_intro.mdx
index 59e0e01da5c..d20d9f32ece 100644
--- a/apps/docs/components/MDX/quickstart_intro.mdx
+++ b/apps/docs/components/MDX/quickstart_intro.mdx
@@ -1,9 +1,5 @@
-This example provides the steps to build a basic user management app. It includes:
+This tutorial demonstrates how to build a basic user management app. The app authenticates and identifies the user, stores their profile information in the database, and allows the user to log in, update their profile details, and upload a profile photo. The app uses:
 
-- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data.
-- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email).
-- Supabase [Storage](/docs/guides/storage): users can upload a photo.
-- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data.
-- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables.
-
-By the end of this guide you'll have an app which allows users to login and update some basic profile details:
+- [Supabase Database](/docs/guides/database) - a Postgres database for storing your user data and [Row Level Security](/docs/guides/auth#row-level-security) so data is protected and users can only access their own information.
+- [Supabase Auth](/docs/guides/auth) - users log in through magic links sent to their email (without having to set up passwords).
+- [Supabase Storage](/docs/guides/storage) - users can upload a profile photo.

From b82b0186b96debd708d199f005fdc311d3d65526 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Fri, 20 Jan 2023 16:19:34 -0800
Subject: [PATCH 3/5] Update nav menu titles

---
 .../Navigation/NavigationMenu/NavigationMenu.constants.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 40ceb4f47e2..165ae49064e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -45,7 +45,7 @@ export const gettingstarted = {
     {
       name: 'Framework Quickstarts',
       items: [
-        { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] },
+        { name: 'React', url: '/guides/getting-started/quickstarts/reactjs', items: [] },
         { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] },
         { name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter', items: [] },
       ],
@@ -54,7 +54,7 @@ export const gettingstarted = {
       name: 'Web app tutorials',
       items: [
         {
-          name: 'Next.js',
+          name: 'NextJS',
           url: '/guides/getting-started/tutorials/with-nextjs',
           items: [],
         },

From 1fcc1e2ad2c8c17681ed841b6acc0465cb647878 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Fri, 20 Jan 2023 17:12:53 -0800
Subject: [PATCH 4/5] Update Getting Started landing page

---
 apps/docs/pages/guides/getting-started.mdx | 61 +++++++++++++++++++++-
 apps/docs/pages/index.mdx                  |  2 +-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx
index 535ee897ec6..820eae29e0c 100644
--- a/apps/docs/pages/guides/getting-started.mdx
+++ b/apps/docs/pages/guides/getting-started.mdx
@@ -36,7 +36,23 @@ export const meta = {
 
 </div>
 
-### Tutorials
+### Framework Quickstarts
+
+<div className="grid lg:grid-cols-12 gap-6 not-prose">
+  {quickstarts.map((item) => {
+    return (
+      <Link href={`/${item.href}`} key={item.title} passHref>
+        <a className={'col-span-4'}>
+          <GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
+            {item.description}
+          </GlassPanel>
+        </a>
+      </Link>
+    )
+  })}
+</div>
+
+### Web App Tutorials
 
 <div className="grid lg:grid-cols-12 gap-6 not-prose">
   {webapps.map((item) => {
@@ -52,6 +68,46 @@ export const meta = {
   })}
 </div>
 
+### Mobile Tutorials
+
+<div className="grid lg:grid-cols-12 gap-6 not-prose">
+  {mobile.map((item) => {
+    return (
+      <Link href={`/${item.href}`} key={item.title} passHref>
+        <a className={'col-span-4'}>
+          <GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
+            {item.description}
+          </GlassPanel>
+        </a>
+      </Link>
+    )
+  })}
+</div>
+
+export const quickstarts = [
+  {
+    title: 'React',
+    href: '/guides/getting-started/quickstarts/reactjs',
+    description:
+      'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.',
+    icon: '/docs/img/icons/react-icon',
+  },
+  {
+    title: 'NextJS',
+    href: '/guides/getting-started/quickstarts/nextjs',
+    description:
+      'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.',
+    icon: '/docs/img/icons/nextjs-icon',
+  },
+  {
+    title: 'Flutter',
+    href: '/guides/getting-started/quickstarts/flutter',
+    description:
+      'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
+    icon: '/docs/img/icons/flutter-icon',
+  },
+]
+
 export const webapps = [
   {
     title: 'NextJS',
@@ -109,6 +165,9 @@ export const webapps = [
       'Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.',
     icon: '/docs/img/icons/svelte-icon',
   },
+]
+
+export const mobile = [
   {
     title: 'Flutter',
     href: '/guides/getting-started/tutorials/with-flutter',
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 5de1c11462e..96a24c7f756 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -110,7 +110,7 @@ export const meta = {
       md:items-center md:gap-3
     ">
       <h2 className="text-sm lg:text-base text-scale-1200 m-0">Ready to make a fully working app?</h2>
-      <p className="text-sm lg:text-base text-scale-1100 m-0">Follow the step-by-step <Link href="/guides/getting-started#tutorials"><a className="m-0 text-scale-1200 underline">tutorials</a></Link>.</p>
+      <p className="text-sm lg:text-base text-scale-1100 m-0">Follow the step-by-step <Link href="/guides/getting-started#web-app-tutorials"><a className="m-0 text-scale-1200 underline">tutorials</a></Link>.</p>
     </div>
 
   </div>

From 5b906e98b868f96eae4f15581b89f44ccedfa9c4 Mon Sep 17 00:00:00 2001
From: dannykng <danny@supabase.io>
Date: Mon, 30 Jan 2023 12:51:41 -0800
Subject: [PATCH 5/5] Fix typo

---
 .../pages/guides/getting-started/tutorials/with-sveltekit.mdx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
index c3418ec3ce2..e01d5e9dda0 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -1,7 +1,7 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  title: 'Build a User Management App wtih SvelteKit',
+  title: 'Build a User Management App with SvelteKit',
   description: 'Learn how to use Supabase in your SvelteKit App.',
 }