Merge pull request supabase#11819 from supabase/docs/tutorials

Update tutorials

Author: dng

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,15 +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="https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/docs/sql-user-management-starter.mp4"
-    type="video/mp4"
-    muted
-    playsInline
-  />
-</video>
-
 </TabPanel>
 <TabPanel id="sql" label="SQL">
 
@@ -48,20 +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.
-
-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.
+We just need to get the Project URL and `anon` key from the API settings.
 
-<video width="99%" muted playsInline controls="true">
-  <source
-    src="https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/docs/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.

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.

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -51,7 +51,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: [] },
         { name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit', items: [] },
@@ -63,7 +63,7 @@ export const gettingstarted = {
       name: 'Web app tutorials',
       items: [
         {
-          name: 'Next.js',
+          name: 'NextJS',
           url: '/guides/getting-started/tutorials/with-nextjs',
           items: [],
         },

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',

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 />
 
@@ -192,11 +191,7 @@ export class AuthComponent {
         />
       </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>
@@ -529,13 +524,8 @@ export class AccountComponent implements OnInit {
 
 <StorageManagement />
 
-## 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

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 />
 
@@ -504,13 +502,8 @@ expo prebuild
 
 <StorageManagement />
 
-## 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

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:
 
@@ -797,14 +796,13 @@ class _AccountPageState extends State<AccountPage> {
 
 <StorageManagement />
 
-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

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 />
 
@@ -526,14 +525,9 @@ template: `
 
 <StorageManagement />
 
-## 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)