Examples and Resources

We have a set of examples in our main repository to help you get started.

Featured#

Build a Twitter Clone with the Next.js App Router and Supra#

By Jon Meyers

Supra Crash Course#

By Traversy Media.

Build an App With Supra and NextJS#

By @jlengstorf and @jonmeyers_io.

Is Supra Legit#

By Fireship.

Official Examples#

Todo List#

Build a basic Todo List with Supra and your favorite frontend framework:

• Expo Todo List.
• Next.js Todo List.
• React Todo List.
• Svelte Todo List.
• Vue 3 Todo List (Typescript).
• Angular Todo List.
• Nuxt 3 Todo List.

Auth examples#

• Supra Auth with vanilla JavaScript.. Use Supra without any frontend frameworks.
• Supra Auth with Next.js.
• Supra Auth with RedwoodJS. Try out Supra authentication in the RedwoodJS Authentication Playground complete with OAuth support and code samples.

Collaborative#

• Next.js Slack Clone.

Community#

Courses#

• Build a Twitter Clone with the Next.js App Router and Supra - free egghead course
• Build a FullStack App with Next.js, Supra & Prisma by @gdangel0: Free course

Libraries#

• D (in development): GitHub
• Flutter (in development): GitHub
• Python (in development): GitHub
• C# (in development): GitHub
• Kotlin (in development): GitHub
• usesupra: Supra React Hooks. GitHub
• vue-supra: Supra Vue wrapper. GitHub
• vue-3-supra: Supra Vue 3 wrapper. GitHub
• nuxt-supra: Supra Nuxt wrapper. GitHub
• @nuxtjs/supra: Supra Nuxt 3 module. GitHub
• react-supra: Supra React Hooks. Docs GitHub
• @triniwiz/nativescript-supra: Supra NativeScript. GitHub

Guides#

• Supra Auth with Redwood. Docs
• Supra Auth with Sapper SSR. Blog
• Switch from Firebase Auth to Supra Auth. Blog
• Setting up Umami Analytics with Supra. Blog
• Creating New Supra Users In NextJS. Blog
• Creating Protected Routes In NextJS With Supra. Blog
• Migrate from Google Cloud Storage (GCS) to Supra Storage Gist
• Subscriptions with Supra and Stripe Billing Blog
• Flutter Supra Authentication Blog
• Supra in 6 minutes Video
• Supra React Auth UI Tutorial Video
• Supra React File Upload Tutorial Video
• Let's build SupaAuth - Build an Authentication System using Supra, Next.js and Typescript 6-part Blog Series
• In-depth self-hosting guide using Nginx Blog
• Build an Email and Social Auth for Next JS with Supra, Tailwind CSS 3.0 and TypeScript Blog
• Link Shortener using Supra and Ory 3-part Blog Series
• Building a CRUD API with FastAPI and Supra: A Step-by-Step Guide Blog

Example apps#

• Supra + Stripe + Next.js. GitHub
• Supra + Svelte Trello clone. GitHub
• Supra + Expo Starter. GitHub
• Supra + Nest.js. GitHub
• Supra + Cloudflare Workers. GitHub
• Supra + Cloudflare Workers + Webpack. GitHub
• Realtime chat app with Supra + React. GitHub
• Repository.surf: GitHub insights dashboard. GitHub
• Supra + React Native Instagram Clone. GitHub
• KeepLink: Simple bookmark service with tags and archive. GitHub
• Supra + Next.js (Next.js Starter Kit) GitHub
• Supra + Svelte (Svelte Starter Kit) GitHub
• Supra + SolidJS (SolidJS Starter Kit) GitHub
• Supra + Nuxt3 (Nuxt Starter Kit) GitHub
• Supra + Remix (Remix Starter Kit) GitHub
• Supra + Angular (Angular Starter Kit) GitHub
• Supra + Nuxt3 + nuxtjs/supra Github
• Supra + Ory Kratos & Ory Oathkeeper Github
• Supra + Ory Cloud Github
• Supra Auth with React Native + Next.js (Monorepo) Github
• Supra Auth with Nuxt3 Github

Blog Posts#

• Realtime Subscriptions using Vue + Supra. Blog
• Creating a microblog using Vue + Supra. Blog
• Track Real-time Page Views. Blog
• Supra as a Sentry alternative. Blog
• Using Supra with Chartbrew. Blog
• Authentication with Supra and React. Blog
• Supra Schema Visualizer. Blog
• Create a real-time UI using Next.js + Supra. Blog
• How to add Twitter auth quickly with Supra to your Next.js site ⚡ Blog
• Under the hood: Architecture and Technology Stack of Supra ⚡ Blog

Podcasts#

• Software Engineering Daily
• Heavy Bit
• Log Rocket
• FS Jam