feat: initial kotlin starter guides

apps/docs/components/Frameworks.tsx

@@ -37,6 +37,14 @@ const Frameworks = () => {
       },
       href: '/reference/javascript/installing#javascript',
     },
+    {
+      name: 'Kotlin',
+      logo: {
+        light: '/docs/img/icons/flutter-icon.svg',
+        dark: '/docs/img/icons/flutter-icon.svg',
+      },
+      href: '/guides/with-kotlin',
+    },
     {
       name: 'Next.js',
       logo: {

apps/docs/components/HomePageCover.tsx

@@ -66,6 +66,16 @@ const HomePageCover = (props) => {
                 iconSize={iconSize}
                 hideArrow
                 tooltip="Flutter"
+                icon="/docs/img/icons/kotlin-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/kotlin`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="Kotlin"
                 icon="/docs/img/icons/flutter-icon"
               />
             </a>

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

@@ -208,6 +208,7 @@ export const gettingstarted = {
         { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs' },
         { name: 'RedwoodJS', url: '/guides/getting-started/quickstarts/redwoodjs' },
         { name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter' },
+        { name: 'Kotlin', url: '/guides/getting-started/quickstarts/kotlin' },
         { name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' },
         { name: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs' },
         { name: 'Vue', url: '/guides/getting-started/quickstarts/vue' },
@@ -265,7 +266,10 @@ export const gettingstarted = {
           name: 'Expo',
           url: '/guides/getting-started/tutorials/with-expo',
         },
-
+        {
+          name: 'Kotlin',
+          url: '/guides/getting-started/tutorials/with-kotlin',
+        },
         {
           name: 'Ionic React',
           url: '/guides/getting-started/tutorials/with-ionic-react',

apps/docs/pages/guides/getting-started.mdx

@@ -150,6 +150,13 @@ export const quickstarts = [
       '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',
   },
+  {
+    title: 'Kotlin',
+    href: '/guides/getting-started/quickstarts/kotlin',
+    description:
+      'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Kotlin app.',
+    icon: '/docs/img/icons/kotlin-icon',
+  },
   {
     title: 'SvelteKit',
     href: '/guides/getting-started/quickstarts/sveltekit',
@@ -247,6 +254,13 @@ export const mobile = [
       'Learn how to build a user management app with Expo and Supabase Database, Auth, and Storage functionality.',
     icon: '/docs/img/icons/expo-icon',
   },
+  {
+    title: 'Kotlin',
+    href: '/guides/getting-started/tutorials/with-kotlin',
+    description:
+      'Learn how to build a groceries store app with Kotlin and Supabase Database, Auth, and Storage functionality.',
+    icon: '/docs/img/icons/kotlin-icon',
+  },
   {
     title: 'Ionic React',
     href: '/guides/getting-started/tutorials/with-ionic-react',

apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx

@@ -0,0 +1,131 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+  title: 'Use Supabase with Kotlin',
+  subtitle:
+    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Kotlin app.',
+  breadcrumb: 'Framework Quickstarts',
+}
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+    <StepHikeCompact.Details title="Set up a Supabase project with sample data">
+
+    [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+    After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+     ```sql SQL_EDITOR
+      -- Create the table
+      CREATE TABLE countries (
+      id SERIAL PRIMARY KEY,
+      name VARCHAR(255) NOT NULL
+      );
+      -- Insert some sample data into the table
+      INSERT INTO countries (name) VALUES ('United States');
+      INSERT INTO countries (name) VALUES ('Canada');
+      INSERT INTO countries (name) VALUES ('Mexico');
+      ````
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={2}>
+
+    <StepHikeCompact.Details title="Create a Flutter app">
+
+    ...
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash Terminal
+      ...
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={3}>
+
+    <StepHikeCompact.Details title="Install the Supabase client library">
+
+      ...
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```kotlin
+      ...
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={4}>
+
+    <StepHikeCompact.Details title="Initialize the Supabase client">
+
+      ...
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```kotlin MainActivity.kt
+      ...
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={5}>
+
+    <StepHikeCompact.Details title="Query data from the app">
+
+      ...
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```kotlin MainActivity.kt
+      ...
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={6}>
+    <StepHikeCompact.Details title="Start the app">
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash Terminal
+      ...
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+</StepHikeCompact>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
+
+export default Page

apps/docs/pages/guides/getting-started/tutorials/with-kotlin.mdx

@@ -0,0 +1,37 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  title: 'Build a Groceries Store App with Kotlin',
+  description: 'Learn how to use Supabase in your Kotlin App.',
+}
+
+<QuickstartIntro />
+
+![Supabase User Management example](/docs/img/supabase-flutter-demo.png)
+
+<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).
+</Admonition>
+
+<ProjectSetup />
+
+## Building the App
+
+Let's start building the Kotlin app from scratch.
+
+### Initialize a Kotlin app
+
+...
+
+```bash
+...
+```
+
+### Setup deep links
+
+...
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page

apps/docs/public/sitemap.xml

@@ -1122,6 +1122,12 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/getting-started/quickstarts/kotlin</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/getting-started/quickstarts/nextjs</loc>
     <changefreq>weekly</changefreq>
@@ -1290,6 +1296,12 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular</loc>
     <changefreq>weekly</changefreq>

apps/www/components/Hero/HeroFrameworks.tsx

@@ -31,6 +31,12 @@ const frameworks = [
     docs: '/docs/guides/getting-started/quickstarts/flutter',
     gaEvent: 'www_hp_hero_frameworks_flutter',
   },
+  {
+    name: 'Kotlin',
+    icon: '/images/logos/frameworks/kotlin.svg',
+    docs: '/docs/guides/getting-started/quickstarts/kotlin',
+    gaEvent: 'www_hp_hero_frameworks_kotlin',
+  },
   {
     name: 'Svelte',
     icon: '/images/logos/frameworks/svelte.svg',

apps/www/lib/redirects.js

@@ -1707,6 +1707,11 @@ module.exports = [
     source: '/docs/guides/with-expo',
     destination: '/docs/guides/getting-started/tutorials/with-expo',
   },
+  {
+    permanent: true,
+    source: '/docs/guides/with-kotlin',
+    destination: '/docs/guides/getting-started/tutorials/with-kotlin',
+  },
   {
     permanent: true,
     source: '/docs/guides/with-ionic-react',

packages/ui/src/components/Command/utils/shared-nav-items.json

@@ -208,6 +208,10 @@
       "label": "Flutter",
       "url": "https://supabase.com/docs/guides/getting-started/quickstarts/flutter"
     },
+    {
+      "label": "Kotlin",
+      "url": "https://supabase.com/docs/guides/getting-started/quickstarts/kotlin"
+    },
     {
       "label": "SvelteKit",
       "url": "https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit"