Files
supabase/apps/learn
Brian-AnandDanny White f1082e28c7 chore: migrate Framer Motion imports to Motion (#51520)
## Problem

Closes #31221.
The applications and shared UI packages still import the former
`framer-motion` package instead of Motion's React entry point.

## Solution

Replace runtime imports, type imports, and three test mocks with
`motion/react` across the consuming workspaces.
Replace the seven direct dependency declarations with `motion:
^11.18.2`.
Preserve the existing animation engine version and all other dependency
resolutions, including the asynchronous `domMax` feature loader.
Historical blog examples remain as published; `framer-motion` remains a
transitive implementation dependency of Motion.

## Review instructions

1. Run `pnpm install --frozen-lockfile` and check the seven dependency
replacements in the lockfile.
2. Open the WWW Auth page and Docs homepage at desktop and mobile
widths, with normal and reduced motion preferences.
3. Open the mobile navigation, expand Product on WWW, and close the menu
using Escape and the close button.
4. Check the existing animation components, shared form validation, and
Studio tests for unchanged behavior.

Validation:

- Studio: 731 test files, 8,334 passing tests and one expected failure,
with `--maxWorkers=4`.
- Shared UI, UI patterns, WWW, and UI library: 615 passing tests.
- `pnpm run typecheck --concurrency=1`: all 16 repository tasks pass.
- All six application source lint scripts and lint ratchets pass;
generated Docs example copies are excluded from local lint.
- Repository Prettier source check, lockfile formatting, and case hazard
check pass.
- WWW: 10 existing end-to-end checks across nine pages.
- Docs: 5 existing guide link and accessibility checks across Database
and Auth.
- WWW and Docs mobile navigation pass at desktop/mobile sizes with
normal/reduced motion; SQL-to-REST translation tabs exercise the
asynchronous feature loader without browser errors.
- Frozen-lockfile installation passes; all existing package and snapshot
resolutions are unchanged.
- Learn and UI library command palettes open, filter results, and close
with Escape without browser errors.
- Independent code review finds no actionable defects.
- `npm run build -- --filter=www --filter=docs --filter=studio
--filter=learn --filter=library --concurrency=1 --continue=always`: all
five affected applications build successfully (9 tasks including
prerequisites); asset uploads disabled for local validation.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)
(no docs topics changed)

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-10-14 07:16:00 +00:00
..
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30

Plan: Course 1: Supabase Foundations Learn the basics of Supabase: database, auth, and RLS. 5 chapters.

Course 2: Project: Smart Office 15 Build a realtime room-booking dashboard using Supabase. 15 chapters. Course 3: Supabase Internals: Performance & Scaling. Learn how to profile queries, tune indexes, and scale Postgres with Supabase. 20 chapters. Course 4: Supabase Internals: Debugging & Operations. Understand how to diagnose slow queries, use read replicas, and manage production workloads. 20 chapters.

——— This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Supabase types

To regenerate the Supabase database types, run

supabase gen types --local > registry/default/fixtures/database.types.ts