+
+
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/apps/learn/components/command-copy-button.tsx b/apps/learn/components/command-copy-button.tsx
new file mode 100644
index 0000000000000..8aa85d40fc545
--- /dev/null
+++ b/apps/learn/components/command-copy-button.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { useSendTelemetryEvent } from 'lib/telemetry'
+import { Button_Shadcn_ } from 'ui'
+
+export function CommandCopyButton({ command }: { command: string }) {
+ const [copied, setCopied] = useState(false)
+ const sendTelemetryEvent = useSendTelemetryEvent()
+
+ useEffect(() => {
+ if (copied) {
+ const timeout = setTimeout(() => setCopied(false), 2000)
+ return () => clearTimeout(timeout)
+ }
+ }, [copied])
+
+ const parseCommandForTelemetry = (cmd: string) => {
+ // Extract framework from URL (e.g., 'nextjs' from 'password-based-auth-nextjs.json')
+ const frameworkMatch = cmd.match(/ui\/r\/.*?-(nextjs|react|react-router|tanstack)\.json/)
+
+ // if the block doesn't have a framework defined (like infinite query), default to react
+ const framework = frameworkMatch
+ ? (frameworkMatch[1] as 'nextjs' | 'react-router' | 'tanstack' | 'react')
+ : 'react'
+
+ // Extract package manager from command prefix (npx, pnpm, yarn, bun)
+ const packageManager = cmd.startsWith('npx')
+ ? ('npm' as const)
+ : cmd.startsWith('pnpm')
+ ? ('pnpm' as const)
+ : cmd.startsWith('yarn')
+ ? ('yarn' as const)
+ : cmd.startsWith('bun')
+ ? ('bun' as const)
+ : ('npm' as const)
+
+ // Extract template title from URL (e.g., 'password-based-auth' from 'password-based-auth-nextjs.json')
+ const titleMatch = cmd.match(/\/ui\/r\/(.*?)\.json/)
+ const title = (titleMatch ? titleMatch[1] : '').replaceAll(`-${framework}`, '')
+
+ return {
+ framework,
+ packageManager,
+ title,
+ }
+ }
+
+ return (
+
+ {/* Large circle with chapter number */}
+
+
+
+
+
+ {chapterNumber}
+
+
+
+ {/* Small checkmark circle overlapping bottom-right */}
+
+
+
+ {/* Completion text */}
+
+ + You've completed Chapter {chapterNumber} +
+ + {completionMessage && ( ++ {completionMessage} +
+ )} +
+
+ {navItem.label}
+
+ {highlight && (
+
+
+
+ {(Object.keys(commands) as PackageManager[]).map((manager) => (
+
+ {manager}
+
+ ))}
+
+
+ {(Object.keys(commands) as PackageManager[]).map((manager) => (
+
+
+ ))}
+
+
+
+
+ $
+ {commands[manager]}
+
+
+
+
+ {/* Chapter label */}
+
+ )
+}
diff --git a/apps/learn/components/explore-more.tsx b/apps/learn/components/explore-more.tsx
new file mode 100644
index 0000000000000..4145774bb3c8e
--- /dev/null
+++ b/apps/learn/components/explore-more.tsx
@@ -0,0 +1,110 @@
+import Link from 'next/link'
+import { BookOpen, Code, Users, ExternalLink, BookA } from 'lucide-react'
+import { IconYoutubeSolid } from 'ui'
+
+interface ExploreItem {
+ title: string
+ link: string
+ itemType?: string
+ description?: string
+}
+
+interface ExploreMoreProps {
+ items: ExploreItem[]
+}
+
+// Icon mapping based on itemType
+function getIcon(itemType?: string) {
+ if (!itemType) return BookOpen
+ const lowerType = itemType.toLowerCase()
+ if (lowerType === 'doc' || lowerType === 'documentation') {
+ return BookA
+ }
+ if (lowerType === 'reference' || lowerType === 'api') {
+ return Code
+ }
+ if (lowerType === 'community' || lowerType === 'forum') {
+ return Users
+ }
+ if (lowerType === 'video' || lowerType === 'tutorial') {
+ return IconYoutubeSolid
+ }
+ return BookA // default icon
+}
+
+// Default descriptions based on itemType
+function getDescription(itemType?: string): string {
+ if (!itemType) return 'Learn more about this topic'
+ const lowerType = itemType.toLowerCase()
+ if (lowerType === 'doc' || lowerType === 'documentation') {
+ return 'Complete guides and references'
+ }
+ if (lowerType === 'reference' || lowerType === 'api') {
+ return 'Detailed API documentation'
+ }
+ if (lowerType === 'community' || lowerType === 'forum') {
+ return 'Get help from the community'
+ }
+ if (lowerType === 'video' || lowerType === 'tutorial') {
+ return 'Watch video tutorials and guides'
+ }
+ return 'Learn more about this topic'
+}
+
+export function ExploreMore({ items }: ExploreMoreProps) {
+ if (!items || items.length === 0) {
+ return null
+ }
+
+ return (
+
+
+
+ Chapter Introduction
+
+
+
+ + {title} +
+ ++ Learn the foundations of Supabase, the Postgres development platform. +
+ ++ In this short course, you'll explore how Supabase brings together Database, Auth, + Storage, Edge Functions, and Realtime into a unified developer platform. +
+ + {/* Course metadata */} +
+
+
+
+
+
+
+ 5 Chapters
+
+
+
+
+
+ ~1 hour
+
+
+
+
+ Beginner
+
+
+ )
+}
diff --git a/apps/learn/components/mdx-components.tsx b/apps/learn/components/mdx-components.tsx
new file mode 100644
index 0000000000000..d71686970ef02
--- /dev/null
+++ b/apps/learn/components/mdx-components.tsx
@@ -0,0 +1,186 @@
+import { useMDXComponent } from 'next-contentlayer2/hooks'
+import Link from 'next/link'
+
+import {
+ Accordion_Shadcn_ as Accordion,
+ AccordionContent_Shadcn_ as AccordionContent,
+ AccordionItem_Shadcn_ as AccordionItem,
+ AccordionTrigger_Shadcn_ as AccordionTrigger,
+ cn,
+} from 'ui'
+import { Callout } from './callout'
+import { CopyButton } from './copy-button'
+import TanStackBeta from './tanstack-beta'
+
+const components = {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ h1: ({ className, ...props }: React.HTMLAttributes
+
+ + Explore More +
+
+ {items.map((item, index) => {
+ const isExternal = item.link.startsWith('http://') || item.link.startsWith('https://')
+ const Icon = getIcon(item.itemType)
+ const description = item.description || getDescription(item.itemType)
+
+ const cardContent = (
+
+
+
+ )
+
+ if (isExternal) {
+ return (
+
+ {cardContent}
+
+ )
+ }
+
+ return (
+
+ {cardContent}
+
+ )
+ })}
+
+
+
+
+
+
+ {item.title}
+{description}
++ ), + table: ({ className, ...props }: React.HTMLAttributes
+
+
+ ),
+ tr: ({ className, ...props }: React.HTMLAttributes
+
+ {__rawString__ && (
+
+ )
+ },
+ code: ({ className, ...props }: React.HTMLAttributes
+
+ )
+}
diff --git a/apps/learn/components/mobile-menu-sheet.tsx b/apps/learn/components/mobile-menu-sheet.tsx
new file mode 100644
index 0000000000000..4e7c3cc019076
--- /dev/null
+++ b/apps/learn/components/mobile-menu-sheet.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useMobileMenu } from '@/hooks/use-mobile-menu'
+import { Sheet } from 'ui'
+
+interface MobileMenuSheetProps {
+ children: React.ReactNode
+}
+
+export function MobileMenuSheet({ children }: MobileMenuSheetProps) {
+ const { open, setOpen } = useMobileMenu()
+
+ return (
+
+
+ )
+}
diff --git a/apps/learn/components/side-navigation-item.tsx b/apps/learn/components/side-navigation-item.tsx
new file mode 100644
index 0000000000000..619f4ae6bb1b3
--- /dev/null
+++ b/apps/learn/components/side-navigation-item.tsx
@@ -0,0 +1,168 @@
+'use client'
+
+import Link, { LinkProps } from 'next/link'
+import { usePathname } from 'next/navigation'
+import React, { useState, useEffect } from 'react'
+import { ChevronRight, Lock } from 'lucide-react'
+
+import { useMobileMenu } from '@/hooks/use-mobile-menu'
+import { SidebarNavItem } from '@/types/nav'
+import { Badge, cn } from 'ui'
+
+// We extend:
+// 1. LinkProps - for Next.js Link component props (prefetch, etc)
+// 2. AnchorHTMLAttributes - for standard HTML anchor props (className, etc)
+// We omit href from both since we compute it internally from item.href
+interface NavigationItemProps
+ extends Omit
+
+
+
+ Next Up
++ {chapterNumber && {chapterNumber}: } + {title} +
+{description}
+
+
+ }
+ className="flex items-center gap-2"
+ >
+ Start {chapterNumber ? `Chapter ${chapterNumber}` : 'Next'}
+
+
+
+ -
+ {item.items?.map((childItem, i) => (
+
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/learn/components/site-footer.tsx b/apps/learn/components/site-footer.tsx
new file mode 100644
index 0000000000000..d44c37194ef13
--- /dev/null
+++ b/apps/learn/components/site-footer.tsx
@@ -0,0 +1,29 @@
+export function SiteFooter() {
+ return (
+
+ )
+}
diff --git a/apps/learn/components/tanstack-beta.tsx b/apps/learn/components/tanstack-beta.tsx
new file mode 100644
index 0000000000000..84c68949adb00
--- /dev/null
+++ b/apps/learn/components/tanstack-beta.tsx
@@ -0,0 +1,29 @@
+import { TriangleAlert } from 'lucide-react'
+import { Callout } from './callout'
+
+export default function TanStackBeta() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/learn/components/theme-switcher-dropdown.tsx b/apps/learn/components/theme-switcher-dropdown.tsx
new file mode 100644
index 0000000000000..e52a515d143ff
--- /dev/null
+++ b/apps/learn/components/theme-switcher-dropdown.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+import {
+ Button,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+ RadioGroup_Shadcn_,
+ Theme,
+ singleThemes,
+} from 'ui'
+
+const ThemeSwitcherDropdown = () => {
+ const [mounted, setMounted] = useState(false)
+ const { theme, setTheme, resolvedTheme } = useTheme()
+
+ /**
+ * Avoid Hydration Mismatch
+ * https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
+ */
+ // useEffect only runs on the client, so now we can safely show the UI
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ if (!mounted) {
+ return null
+ }
+
+ function SingleThemeSelection() {
+ return (
+
+ )
+ }
+
+ const iconClasses = 'text-foreground-light group-data-[state=open]:text-foreground'
+
+ return (
+ <>
+
+
+
+
+ We're excited to support TanStack Start in our UI library! But since it's still
+ in beta, things may change quickly — expect breaking changes and some rough edges.
+ We'll do our best to keep up and make integration with Supabase as smooth as
+ possible. If you run into issues, have a look at the TanStack docs.
+
+ TanStack Quickstart guide
+
+
+
+ )
+}
+
+function useActiveItem(itemIds: string[]) {
+ const [activeId, setActiveId] = React.useState(null)
+
+ React.useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id)
+ }
+ })
+ },
+ { rootMargin: `0% 0% -80% 0%` }
+ )
+
+ itemIds?.forEach((id) => {
+ const element = document.getElementById(id)
+ if (element) {
+ observer.observe(element)
+ }
+ })
+
+ return () => {
+ itemIds?.forEach((id) => {
+ const element = document.getElementById(id)
+ if (element) {
+ observer.unobserve(element)
+ }
+ })
+ }
+ }, [itemIds])
+
+ return activeId
+}
+
+interface TreeProps {
+ tree: TableOfContents
+ level?: number
+ activeItem?: string
+}
+
+function Tree({ tree, level = 1, activeItem }: TreeProps) {
+ return tree?.items?.length && level < 3 ? (
+ On This Page
+-
+ {tree.items.map((item, index) => {
+ return (
+
-
+
+ {item.title}
+
+ {item.items?.length ? (
+
+ ) : null} +
+ )
+ })}
+
+
+
+ What will I learn?
+ ++ In the fundamental courses, you'll learn all the basics: +
+
+ {learningTracks.map((track) => {
+ const Icon = track.icon
+ return (
+
+
+
+ {track.title}
+
+
+ {track.description}
+
+
+
+ )
+ })}
+
+
+
+ Smart Office project
++ In the Smart Office project, you'll learn how to build a full-featured Dashboard: +
+
+
+
+
+
+
+ -
+
-
+
+
+ + Real-time room monitoring that tracks live occupancy, sensor readings +
+ -
+
+
+ + Booking management with live status filters, calendar integrations. +
+ -
+
+
+ + + Advanced analytics that surface 30+ days of utilization trends and patterns. + +
+ -
+
+
+ + + Detect capacity issues, open facilities tasks, and track resolution SLAs without + leaving the app. + +
+
+ _Example: no duplicate emails._ + +- Link records safely with foreign keys
+ _Example: delete a user and their notes in one action._ + +- Express real permissions with RLS
+ _Example: users can read their own notes; admins can read all._ + +- Query exactly what you need with table joins
+ _Example: fetch notes with the author's email._ + +--- + +## What we learned + +A database in Supabase is made up of tables. +Each table has: + +- columns (which describe the type of information stored) +- rows (the individual pieces of data in that table) + +You can relate tables to each other using foreign keys. +This lets you model real situations, such as: + +- a user has many notes +- a team has many members +- a project has many tasks + +Thinking in tables, rows, and relationships is the foundation of working with data in Supabase. diff --git a/apps/learn/content/foundations/edge-functions.mdx b/apps/learn/content/foundations/edge-functions.mdx new file mode 100644 index 0000000000000..add8c13d7d260 --- /dev/null +++ b/apps/learn/content/foundations/edge-functions.mdx @@ -0,0 +1,7 @@ +--- +title: Edge Functions +description: 'Learn how to run custom backend logic close to your users, using Deno and the Supabase serverless runtime.' +chapterNumber: 6 +--- + +Soon... diff --git a/apps/learn/content/foundations/index.mdx b/apps/learn/content/foundations/index.mdx new file mode 100644 index 0000000000000..11b9e1111ab0d --- /dev/null +++ b/apps/learn/content/foundations/index.mdx @@ -0,0 +1,69 @@ +--- +title: Supabase Foundations +description: Learn the foundations of Supabase, the Postgres development platform. +courseHero: + title: Supabase Foundations + subtitle: Learn the foundations of Supabase, the Postgres development platform. + description: In this short course, you'll explore how Supabase brings together **Database**, **Auth**, **Storage**, **Edge Functions**, and **Realtime** into a unified developer platform. + instructors: + - name: Jane Doe + gradientFrom: '#00c3ff' + gradientTo: '#ffff1c' + - name: John Doe + gradientFrom: '#ff00ea' +--- + +In this short course, you'll explore how Supabase brings together **Database**, **Auth**, **Storage**, **Edge Functions**, and **Realtime** into a unified developer platform. + +By the end, you'll understand how each piece of Supabase fits together, how to persist and protect your data, and how to start confidently building your own applications. + +## What you'll learn + +- **Architecture**: how Supabase's core products work together. +- **Data fundamentals**: create tables, insert and retrieve data, and explore our generated APIs. +- **Authentication**: create and sign in users, and make secure requests. +- **Security**: enable Row Level Security (RLS) and write policies to protect your data. +- **Storage**: upload and serve files using buckets. +- **Edge Functions**: run custom backend logic close to your users, using Deno and Supabase's serverless runtime. +- **Vector search**: store and query embeddings for AI-powered search and recommendations. + +--- + +## Prerequisites + +- A [Supabase account](https://supabase.com/) (free) +- Basic familiarity with a terminal to run queries. + +--- + +## Course outline + +The course is split into 7 chapters, each approximately 10 minutes long. + +1. **What is Supabase?** + Get an overview of Supabase's architecture and core products. Create your first project and make a simple API call. +2. **Your First Table** + Create a Postgres table in Supabase, insert data, and query it through the REST API. +3. **Authentication Basics** + Add users, sign them in, and understand how Supabase secures your APIs with JWTs. +4. **Secure Your Data with Row-Level Security** + Enable Row-Level Security and write policies to ensure users only access their own data. +5. **Storage** + Store files in Supabase Storage and upload and serve files from your buckets. +6. **Edge Functions** + Deploy simple functions to run backend logic close to your users using Deno. +7. **Vector Search** + Store and query embeddings for AI-powered search and recommendations using Supabase Vector. + +--- + +## Before you begin + +Create a new project at [supabase.com](https://supabase.com), open the **Supabase Dashboard**, and grab your **API URL** and **anon key** from the [Connect dialog](https://supabase.com/dashboard/project/_/settings/api?showConnect=true&connectTab=frameworks). +You'll use them throughout the course to send real requests to your database and APIs. + +--- + +## Duration + +Approx. **1 hour** — a fast, hands-on introduction to the Supabase platform. diff --git a/apps/learn/content/foundations/introduction.mdx b/apps/learn/content/foundations/introduction.mdx new file mode 100644 index 0000000000000..4c378e9efe559 --- /dev/null +++ b/apps/learn/content/foundations/introduction.mdx @@ -0,0 +1,79 @@ +--- +title: Supabase Foundations +description: Learn the foundations of Supabase, the Postgres development platform. + +explore: + - title: Supabase Docs + link: https://supabase.com/docs + itemType: doc + +courseHero: + title: Supabase Foundations + subtitle: Learn the foundations of Supabase, the Postgres development platform. + description: In this short course, you'll explore how Supabase brings together **Database**, **Auth**, **Storage**, **Edge Functions**, and **Realtime** into a unified developer platform. + stats: + - label: 5 Chapters + icon: book-open + accent: emerald + - label: ~1 hour + icon: clock + accent: blue + - label: Beginner + icon: zap + accent: amber +--- + +In this short course, you'll explore how Supabase brings together **Database**, **Auth**, **Storage**, **Edge Functions**, and **Realtime** into a unified developer platform. + +By the end, you'll understand how each piece of Supabase fits together, how to persist and protect your data, and how to start confidently building your own applications. + +## What you'll learn + +- **Architecture**: how Supabase's core products work together. +- **Data fundamentals**: create tables, insert and retrieve data, and explore our generated APIs. +- **Authentication**: create and sign in users, and make secure requests. +- **Security**: enable Row Level Security (RLS) and write policies to protect your data. +- **Storage**: upload and serve files using buckets. +- **Edge Functions**: run custom backend logic close to your users, using Deno and Supabase's serverless runtime. +- **Vector search**: store and query embeddings for AI-powered search and recommendations. + +--- + +## Prerequisites + +- A [Supabase account](https://supabase.com/) (free) +- Basic familiarity with a terminal to run queries. + +--- + +## Course outline + +The course is split into 7 chapters, each approximately 10 minutes long. + +1. **What is Supabase?** + Get an overview of Supabase's architecture and core products. Create your first project and make a simple API call. +2. **Your First Table** + Create a Postgres table in Supabase, insert data, and query it through the REST API. +3. **Authentication Basics** + Add users, sign them in, and understand how Supabase secures your APIs with JWTs. +4. **Secure Your Data with Row-Level Security** + Enable Row-Level Security and write policies to ensure users only access their own data. +5. **Storage** + Store files in Supabase Storage and upload and serve files from your buckets. +6. **Edge Functions** + Deploy simple functions to run backend logic close to your users using Deno. +7. **Vector Search** + Store and query embeddings for AI-powered search and recommendations using Supabase Vector. + +--- + +## Before you begin + +Create a new project at [supabase.com](https://supabase.com), open the **Supabase Dashboard**, and grab your **API URL** and **anon key** from the [Connect dialog](https://supabase.com/dashboard/project/_/settings/api?showConnect=true&connectTab=frameworks). +You'll use them throughout the course to send real requests to your database and APIs. + +--- + +## Duration + +Approx. **1 hour** — a fast, hands-on introduction to the Supabase platform. diff --git a/apps/learn/content/foundations/quickstart.mdx b/apps/learn/content/foundations/quickstart.mdx new file mode 100644 index 0000000000000..e33c066d63fa3 --- /dev/null +++ b/apps/learn/content/foundations/quickstart.mdx @@ -0,0 +1,77 @@ +--- +title: Quick Start +description: Install shadcn/ui and use the components in your project +--- + +## Set up shadcn/ui + +Start by installing [shadcn/ui](https://ui.shadcn.com/) in your project. Use the appropriate setup guide linked below for your framework of choice. + +If you're already using a recent version of shadcn/ui in your existing project, you can skip this step—this library should work with your current setup. However, if you encounter issues, try deleting your existing `components.json` file and follow one of the guides to reset your setup. + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Next.js
+
+
+ + `$``npx create-next-app -e with-supabase` +
+React Router
+TanStack Start
+React SPA
+