Skip to content
Avatar of plasmicappplasmicapp/supabase-template

Plasmic Supabase

This is a template built on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform).

Framework
Use Case
Database
Plasmic Supabase Template

Plasmic+Supabase Demo

This is a demo of building a Pokedex on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform). To read more about how this works, check out our tutorial here.

Getting Started

  1. Copy .env.example to .env and populate your Supabase credentials. The tutorial above will show you how to properly set up a compatible Supabase project.

  2. Run yarn to install dependencies, fetch the schema and types from supabase.

  3. Run the development server:

yarn dev
  1. Open your browser to see the result.

  2. You can view the Plasmic-built frontend here. If you want to make edits, clone the Plasmic project and note the new project ID and token. These fields will need to be updated in .env to reflect your changes.

Learn More

With Plasmic, you can enable non-developers on your team to publish pages and content into your website or app.

To learn more about Plasmic, take a look at the following resources:

You can check out the Plasmic GitHub repository - your feedback and contributions are welcome!

Note: This Next.js project was bootstrapped with create-plasmic-app.

Plasmic Supabase Template
Avatar of plasmicappplasmicapp/supabase-template

Plasmic Supabase

This is a template built on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform).

Framework
Use Case
Database

Plasmic+Supabase Demo

This is a demo of building a Pokedex on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform). To read more about how this works, check out our tutorial here.

Getting Started

  1. Copy .env.example to .env and populate your Supabase credentials. The tutorial above will show you how to properly set up a compatible Supabase project.

  2. Run yarn to install dependencies, fetch the schema and types from supabase.

  3. Run the development server:

yarn dev
  1. Open your browser to see the result.

  2. You can view the Plasmic-built frontend here. If you want to make edits, clone the Plasmic project and note the new project ID and token. These fields will need to be updated in .env to reflect your changes.

Learn More

With Plasmic, you can enable non-developers on your team to publish pages and content into your website or app.

To learn more about Plasmic, take a look at the following resources:

You can check out the Plasmic GitHub repository - your feedback and contributions are welcome!

Note: This Next.js project was bootstrapped with create-plasmic-app.

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential