mirror of
https://github.com/supabase/supabase.git
synced 2026-06-23 15:45:38 +08:00
154 lines
9.9 KiB
Plaintext
154 lines
9.9 KiB
Plaintext
---
|
|
id: examples
|
|
title: Examples and Resources
|
|
description: 'Examples you can use to get started with Supabase'
|
|
---
|
|
|
|
We have a [set of examples](https://github.com/supabase/examples) in our [main repository](https://github.com/supabase/supabase) to help you get started.
|
|
|
|
## Featured
|
|
|
|
### Supabase Crash Course
|
|
|
|
By [Traversy Media](https://www.youtube.com/watch?v=7uKQBl9uZ00).
|
|
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube-nocookie.com/embed/7uKQBl9uZ00"
|
|
frameBorder="1"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
|
|
### Build an App With Supabase and NextJS
|
|
|
|
By [@jlengstorf](https://twitter.com/jlengstorf) and [@jonmeyers_io](https://twitter.com/jonmeyers_io).
|
|
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube-nocookie.com/embed/8vqY1KT4TLU"
|
|
frameBorder="1"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
|
|
### Is Supabase Legit
|
|
|
|
By [Fireship](https://www.youtube.com/watch?v=WiwfiVdfRIc).
|
|
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube-nocookie.com/embed/WiwfiVdfRIc"
|
|
frameBorder="1"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
|
|
## Official Examples
|
|
|
|
### Todo List
|
|
|
|
Build a basic Todo List with Supabase and your favorite frontend framework:
|
|
|
|
- [Expo Todo List.](https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/expo-todo-list)
|
|
- [Next.js Todo List.](https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/nextjs-todo-list)
|
|
- [React Todo List.](https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/react-todo-list)
|
|
- [Svelte Todo List.](https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/sveltejs-todo-list)
|
|
- [Vue 3 Todo List (Typescript).](https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/vue3-ts-todo-list)
|
|
- [Angular Todo List.](https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/angular-todo-list)
|
|
- [Nuxt 3 Todo List.](https://github.com/nuxt-community/supabase-module/tree/main/demo)
|
|
|
|
### Auth examples
|
|
|
|
- [Supabase Auth with vanilla JavaScript.](https://github.com/supabase/examples/tree/main/supabase-js-v1/auth/javascript-auth). Use Supabase without any frontend frameworks.
|
|
- [Supabase Auth with Next.js SSR.](https://github.com/supabase/examples/tree/main/supabase-js-v1/nextjs-with-supabase-auth) Uses cookies to persist auth between the server and the client.
|
|
- [Supabase Auth with RedwoodJS.](https://redwood-playground-auth.netlify.app/supabase) Try out Supabase authentication in the [RedwoodJS](https://redwoodjs.com) Authentication Playground complete with OAuth support and code samples.
|
|
|
|
### Collaborative
|
|
|
|
- [Next.js Slack Clone.](https://github.com/supabase/examples/tree/main/supabase-js-v1/slack-clone/nextjs-slack-clone)
|
|
|
|
## Community
|
|
|
|
### Courses
|
|
|
|
- Build a FullStack App with Next.js, Supabase & Prisma by [@gdangel0](https://twitter.com/gdangel0): [Free course](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224)
|
|
|
|
### Libraries
|
|
|
|
- D (in development): [GitHub](https://github.com/csharpdf/dupabase)
|
|
- Dart (in development): [GitHub](https://github.com/supabase/supabase-dart)
|
|
- Python (in development): [GitHub](https://github.com/supabase/supabase-py)
|
|
- C# (in development): [GitHub](https://github.com/supabase/supabase-csharp)
|
|
- Kotlin (in development): [GitHub](https://github.com/supabase-community/postgrest-kt)
|
|
- `useSupabase`: Supabase React Hooks. [GitHub](https://github.com/gbibeaul/use-supabase)
|
|
- `vue-supabase`: Supabase Vue wrapper. [GitHub](https://github.com/supabase/vue-supabase)
|
|
- `vue-3-supabase`: Supabase Vue 3 wrapper. [GitHub](https://github.com/DidoMarchet/vue-3-supabase)
|
|
- `nuxt-supabase`: Supabase Nuxt wrapper. [GitHub](https://github.com/supabase/nuxt-supabase)
|
|
- `@nuxtjs/supabase`: Supabase Nuxt 3 module. [GitHub](https://github.com/nuxt-community/supabase-module)
|
|
- `react-supabase`: Supabase React Hooks. [Docs](https://react-supabase.vercel.app) [GitHub](https://github.com/tmm/react-supabase)
|
|
- ` @triniwiz/nativescript-supabase`: Supabase NativeScript. [GitHub](https://github.com/triniwiz/nativescript-plugins/tree/master/packages/nativescript-supabase)
|
|
|
|
### Guides
|
|
|
|
- Supabase Auth with Redwood. [Docs](https://redwoodjs.com/tutorial/authentication)
|
|
- Supabase Auth with Sapper SSR. [Blog](https://dev.to/jakobbouchard/how-to-setup-supabase-auth-with-sapper-ssr-13od)
|
|
- Switch from Firebase Auth to Supabase Auth. [Blog](https://msyyn.medium.com/switch-from-firebase-auth-to-supabase-auth-the-open-source-firebase-alternative-509746952b1b)
|
|
- Setting up Umami Analytics with Supabase. [Blog](https://dev.to/jakobbouchard/setting-up-umami-with-vercel-and-supabase-3a73)
|
|
- Creating New Supabase Users In NextJS. [Blog](https://www.aboutmonica.com/blog/creating-new-supabase-users-in-next-js)
|
|
- Creating Protected Routes In NextJS With Supabase. [Blog](https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
|
- Migrate from Google Cloud Storage (GCS) to Supabase Storage [Gist](https://gist.github.com/danalloway/86f79efd5ca336ff7364554ac3104014)
|
|
- Subscriptions with Supabase and Stripe Billing [Blog](https://www.sandromaglione.com/2021/04/29/supabase-auth-create-stripe-customer-subscription-supabase-stripe-billing-part-1/)
|
|
- Flutter Supabase Authentication [Blog](https://www.sandromaglione.com/2021/04/24/flutter-supabase-authentication/)
|
|
- Supabase in 6 minutes [Video](https://www.youtube.com/watch?v=c8DNV9yl0mg)
|
|
- Let's build SupaAuth - Build an Authentication System using Supabase, Next.js and Typescript [6-part Blog Series](https://aalam.in/blog/supabase-auth-intro-setup-next)
|
|
- In-depth self-hosting guide using Nginx [Blog](https://dev.to/chronsyn/self-hosting-with-supabase-1aii)
|
|
- Build an Email and Social Auth for Next JS with Supabase, Tailwind CSS 3.0 and TypeScript [Blog](https://creativedesignsguru.com/next-js-supabase-auth/)
|
|
- Link Shortener using Supabase and Ory [3-part Blog Series](https://www.ory.sh/tutorial-url-shortener-supabase-ory-integration-backend/)
|
|
|
|
### Example apps
|
|
|
|
- Supabase + Stripe + Next.js. [GitHub](https://github.com/vercel/nextjs-subscription-payments)
|
|
- Supabase + Svelte Trello clone. [GitHub](https://github.com/joshnuss/supabase-kanban)
|
|
- Supabase + Expo Starter. [GitHub](https://github.com/codingki/react-native-expo-template/tree/master/template-typescript-bottom-tabs-supabase-auth-flow)
|
|
- Supabase + Nest.js. [GitHub](https://github.com/hiro1107/nestjs-supabase-auth)
|
|
- Supabase + Cloudflare Workers. [GitHub](https://github.com/supabase/examples/tree/main/supabase-js-v1/with-cloudflare-workers)
|
|
- Supabase + Cloudflare Workers + Webpack. [GitHub](https://github.com/signalnerve/supabase-workers-proxy)
|
|
- Realtime chat app with Supabase + React. [GitHub](https://github.com/shwosner/realtime-chat-supabase-react)
|
|
- Repository.surf: GitHub insights dashboard. [GitHub](https://github.com/supabase/repository.surf)
|
|
- Supabase + React Native Instagram Clone. [GitHub](https://github.com/NiketanG/instaclone)
|
|
- KeepLink: Simple bookmark service with tags and archive. [GitHub](https://github.com/fengkx/keeplink)
|
|
- Supabase + Next.js (Next.js Starter Kit) [GitHub](https://github.com/one-aalam/next-starter-kit/tree/auth-supabase)
|
|
- Supabase + Svelte (Svelte Starter Kit) [GitHub](https://github.com/one-aalam/svelte-starter-kit)
|
|
- Supabase + SolidJS (SolidJS Starter Kit) [GitHub](https://github.com/one-aalam/solid-starter-kit)
|
|
- Supabase + Nuxt3 (Nuxt Starter Kit) [GitHub](https://github.com/one-aalam/nuxt-starter-kit)
|
|
- Supabase + Remix (Remix Starter Kit) [GitHub](https://github.com/one-aalam/remix-starter-kit)
|
|
- Supabase + Angular (Angular Starter Kit) [GitHub](https://github.com/one-aalam/ng-starter-kit)
|
|
- Supabase + Nuxt3 + nuxtjs/supabase [Github](https://github.com/nuxt-community/supabase-module/tree/main/demo)
|
|
- Supabase + Ory Kratos & Ory Oathkeeper [Github](https://github.com/ory/examples/tree/master/kratos-keto-oathkeeper-supabase)
|
|
- Supabase + Ory Cloud [Github](https://github.com/ory/examples/tree/master/supabase-ory-cloud)
|
|
- Supabase Auth with React Native + Next.js (Monorepo) [Github](https://github.com/mateoguzmana/react-native-next-supabase-auth-monorepo)
|
|
|
|
### Blog Posts
|
|
|
|
- Realtime Subscriptions using Vue + Supabase. [Blog](https://dev.to/ftonato/realtime-subscriptions-using-vue-supabase-1e11)
|
|
- Creating a microblog using Vue + Supabase. [Blog](https://dev.to/ftonato/creating-a-microblog-using-vue-supabase-31p)
|
|
- Track Real-time Page Views. [Blog](https://codebycorey.com/blog/page-views-nextjs-supabase)
|
|
- Supabase as a Sentry alternative. [Blog](http://kopi.cloud/blog/2021/sentry-supabase/)
|
|
- Using Supabase with Chartbrew. [Blog](https://chartbrew.com/blog/how-to-visualize-your-supabase-data-with-chartbrew/)
|
|
- Authentication with Supabase and React. [Blog](https://hyperfoo.io/posts/supabase-authentication-react)
|
|
- Supabase Schema Visualizer. [Blog](https://dev.to/zernonia/supabase-schema-visualizer-no-installation-login-49kg)
|
|
- Create a real-time UI using Next.js + Supabase. [Blog](https://pablopunk.com/posts/how-to-create-a-real-time-ui-with-nextjs-and-supabase)
|
|
- How to add Twitter auth quickly with Supabase to your Next.js site ⚡ [Blog](https://blog.avneesh.tech/how-to-add-twitter-auth-quickly-with-supabase-to-your-nextjs-site)
|
|
- Under the hood: Architecture and Technology Stack of Supabase ⚡ [Blog](https://www.workingsoftware.dev/tech-stack-and-architecture-of-supabase/)
|
|
|
|
### Podcasts
|
|
|
|
- [Software Engineering Daily](https://softwareengineeringdaily.com/2020/10/15/supabase-open-source-firebase-with-paul-copplestone/)
|
|
- [Heavy Bit](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-71-open-source-firebase-alternative-with-paul-copplestone-of-supabase/)
|
|
- [Log Rocket](https://podrocket.logrocket.com/9)
|
|
- [FS Jam](https://fsjam.org/episodes/episode-33-supabase-with-paul-copplestone)
|