Awesome Supabase
Supabaseを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
- 公式スターター
- コミュニティ製スターター
- データ移行ツール
- Supabase DX ツール
- コミュニティツール
- オンラインコース
- 動画、ポッドキャスト、ライブ配信、トーク
- 統合ガイド
- その他の興味深い記事
公式スターター
以下のスターターは @supabase/supabase-js v2 ライブラリをサポートします。
- Angular -
- Expo -
- Flutter -
- Next.js (TS) -
- Nuxt -
- Nuxt3 -
- React -
- Solid -
- Svelte -
- Svelte Kit -
- Vue 3 -
- Next.js, Slack Clone -
- Svelte, Todo list -
- React Native, Stripe Payments -
- Flutter, Stripe Payments -
コミュニティ製スターター
- Vuepabase - Pinia、Vue-router 4、Tailwind CSS、Vitest、Cypress などを備えた Vue3 Supabase スターター。
- Supastarter - Next.js、認証、メールテンプレート、ランディングページ、ダッシュボード、ブログを備えた Supabase スターター。
- RedwoodJS Supabase Quickstart - RedwoodJS を使う Supabase Quickstart のサンプルアプリ。
- Basejump - チーム、個人アカウント、招待、Tailwind、i18n を備えたオープンソース Next.js スターター。スキーマは完全にテスト済み。
- Supanext - AI アプリの例、認証、課金、設定、ランディングページ、ブログなどを含む Next.js 対応 Supabase スターター。
- SupaSasS Lite - オープンソースの Next.js SasS テンプレート(2FA とサンプルアプリ付き)。
- SupaSocial - 認証、友達リクエスト、プロフィール画像、サンプルアプリ(プロフィール、友達、サインイン、リーダーボードなど)を備えた React ソーシャルメディアスターター。
- Extro - オープンソースのブラウザー拡張機能スターターキット。
データ移行ツール
- Supabase Schema - この便利なツールで SQL スクリプトとデータベース図を生成。機密情報は不要で、プロジェクト URL と匿名キーだけを使用します。
- Heroku to Supabase Importer - Heroku はまもなく無料枠のサポートを終了するため、プロジェクトで引き続き利用したい PostgreSQL DB がある場合、Supabase への移行は良い選択です。このツールで簡単に移行できます。この移行プロセスには動画付きのガイドもあります。
- Supabase DB to Google Sheets - Supabase データを Google Sheets へ取り込むツール。
- Retool REST API data generator - PostgresDB に挿入する構造化データを生成するツール。
- Lovable Cloud to Supabase Exporter - パスワードリセットや手作業の CSV 処理なしに、Lovable Cloud のテーブル、ユーザー、ストレージを自分の Supabase バックエンドへ移行。
Supabase DX ツール
- Supabase CLI - Supabase CLI は、ローカルでのプロジェクト開発と Supabase Platform へのデプロイのためのツールを提供。
- Supabase SQL - よくある用途の SQL スクリプトを、コピー&ペースト向けに容易に検索。
- Supabase Plus - 通常の Supabase CLI の可能性を超えて Supabase プロジェクトを管理するための追加ツールセット。
コミュニティツール
- MadeWithSupabase - Supabase で作られたプロジェクトを探索するアプリ。使われている Supabase 機能やユーザー付与のタグ、特定の暦月に投稿されたプロジェクトから検索できます。
- Octokit-lite - 複数リポジトリに対する一般的な GitHub 操作を効率よく実行するアプリ。Supabase Auth と DB を使用。
- Generate Supabase Database Types GitHub Action - Supabase データベースに基づく型を生成する GitHub Action。
- Supabase Cache Helpers - Supabase を扱うためのフレームワーク固有 Cache ユーティリティ集。
- PostgreSQL WebAssembly by Snaplet and Supabase - ブラウザーで PostgreSQL を実行するツール。
- Bemi for Supabase JS - 自動データ変更追跡のためのオープンソースプラットフォーム。
- Supabase automated self host - Caddy と Authelia を使って Supabase をセルフホスト。スクリプトを 1 つ実行するだけです。
- Edge Worker - Supabase Edge Functions(Background Tasks)と Supabase Queues 上で動作するオープンソースのサーバーレスタスクキューワーカー。キュー消費を簡単にし、並行性制御、再試行、オブザーバビリティなどの機能を追加します。
- Supabase DataFlows SMS Hook - DataFlows SMS API で電話 OTP 検証を送信。Supabase Auth 向けの Twilio のオーストラリア代替。
- Pharos AI - インタラクティブマップ、OSINT フィード、AI を活用した要約を備える、地政学的紛争追跡向けオープンソースのリアルタイムインテリジェンスダッシュボード。
オンラインコース
- Build a Full-Stack App with Next.js, Supabase & Prisma - React / Next.js、Prisma、Supabase という優れたモダン Web 技術を使い、フルスタックアプリケーションをゼロから構築する方法を学びます。Grégory D’Angeloによる無料コース。
- Cache Supabase data at the Edge with Cloudflare Workers and KV Storage - Cloudflare workers を通じ、KV Storage を使って Supabase をクエリし、キャッシュ CRUD 操作を実行する方法を開発者へ教える無料コース。 Cloudflare x Supabase Developer Meetupで紹介。 Jon Meyersによる無料コース。
- Vue JS Essentials: A Beginners Series on Pinia, Vitest, and Supabase - フロントエンドテストと本番品質のプロジェクトを模倣するモックを含む、詳細なチュートリアルの優れたシリーズ。
動画、ポッドキャスト、ライブ配信、トーク
- Is Supabase Legit? Firebase Alternative Breakdown - Supabase を扱う Fireship.io の動画。
- Supabase Happy Hours - Supabase コアチームが主催する継続的な代表ライブ配信シリーズ。Supabase API を使ってサイドプロジェクトを作り、コミュニティと交流します。コアメンバーのThor Schaeff、Jon Meyers、Alaister Young、Tyler Shukertが担当。
- Supabase Developer Stories - Supabase を利用する SaaS の創業者・共同創業者が製品を紹介する継続的なシリーズ。
- CityJS 2022 Talk on Building Billy with Supabase - React Native の支出トラッカーのサイドプロジェクトが Supabase でどのように構築されるかを扱う、SupaSquad メンバーEstee Teyのトーク。
- Build An Image Gallery With Supabase Storage and React - Supabase を使った画像のアップロードと配信のチュートリアル。
- PMF is one pivot away with Ant Wilson from Supabase - Supabase の Product Market Fit(PMF)前後の段階における経験を語ります。
統合ガイド
- Firebase to Supabase - Auth、Firestore、Storage、Functions など Firebase の各コンポーネントから Supabase への移行ガイド集。
- How to Manage Your Supabase Database with Directus - Directus Studio はノーコードアプリを通じてデータベース内容を閲覧、管理、可視化する手段を提供。このガイドは Supabase と Directus の設定方法を示します。
- Supabase admin panel tutorial with Retool - Retool はチームが内部ツールを素早く構築するのを支援。Retool と Supabase で管理パネルを設定する方法を学びます。
- Set up a monorepo with Supabase and Turborepo - 3 つの Next.js アプリ、Preact ウィジェット、React Native アプリ、2 つの Fastify サーバーを単一リポジトリから提供し、同じ Supabase インスタンスと通信する、turborepo 駆動の pnpm モノレポへコードベースを移行する方法を解説。
- How to Implement RBAC (Role-Based Access Control) in Supabase - Permit.io を使って Supabase アプリケーションへロールベースアクセス制御(RBAC)認可を実装する方法を学びます。
- Integrate Clerk with Supabase - RLS ポリシーを含め、Supabase の認証プロバイダーとして Clerk を使う公式ガイド。
その他の興味深い記事
- How to market to developers on Twitter: Learnings from 4 months of Supabase feed - 特に Twitter における Supabase のグロースマーケティング戦略を分析。
- How Fleeting Notes Migrated 1000+ Users from Firebase to Supabase (Stripe, Firebase, Supabase) - ノートアプリ Fleeting Notes が、Stripe 統合とそのデータベースの観点から Firebase から Supabase へ移行した過程を説明。
- Ultimate guide to testing on Supabase using pgTAP - Supabase の RLS ポリシーとリクエストをテストする方法。
- Migrating from Firebase to Supabase: Lessons Learned - BaaS のさまざまな側面、Realtime サブスクリプションとデータ型の違いを踏まえた、移行ワークフローの詳細な解説。
- Supabase vs Firebase: Choosing the Right Backend for Your Project - Supabase と Firebase の詳細比較。両プラットフォームの主な違いと、Supabase を選ぶ利点を確認できます。