Supabase Partner Gallery Example is a Next.js starter template that demonstrates Postgres Full Text Search, Supabase Storage for images, and automated email notifications triggered by database inserts via Supabase Edge Functions.
What is Supabase Partner Gallery Example?
Supabase Partner Gallery Example is an open-source example website from the supabase-community GitHub organization. It is built with Next.js and uses Supabase as its backend, tying together three specific Supabase features: Postgres full-text search on a partners table, image optimization through next-image with images hosted in Supabase Storage, and an insert trigger on a partner_contacts table that calls a Supabase Edge Function to send email notifications. The template ships with a Supabase migration file that creates the initial database schema, and it is configured for one-click deployment to Vercel through a provided deploy button.
Key Features
- Postgres Full Text Search — searches partner records using Postgres's native full-text capabilities, so search filtering happens in the database rather than in application code.
- next-image with Supabase Storage — uses the Next.js Image component to serve and optimize partner images that are stored in Supabase Storage buckets.
- Edge Function email notifications — a deployable contact-notification Edge Function sends SMTP email when a new row appears in partner_contacts, using a Function Hook trigger.
- One-click Vercel deployment — the Vercel deploy button clones the repository, sets Supabase environment variables, and runs the migrations automatically, so you can get a live site quickly.
- Supabase schema migration — the repository includes supabase/migrations/20230712074829_init.sql, which creates the initial partners and partner_contacts tables.
- SMTP port guidance — the setup notes that SMTP ports 25, 465, and 587 are not supported for outgoing connections from Deno Deploy, and recommends AWS SES port 2587 instead.
Who is it for?
- Supabase learners — developers who want to see how full-text search, storage, and Edge Functions work together in a single Next.js project can use this example as a reference.
- Community and partner programs — teams that need a public directory of partners or members with a search box and a contact form can fork the template and replace the sample data with their own.
- Next.js + Vercel users — anyone deploying a Next.js app to Vercel can use the provided deploy button and configuration steps to avoid manual wiring.
What can you do with it?
- Launch a partner directory: add partner rows to the partners table and the Gallery page displays them in a searchable interface entirely driven by Postgres full-text search.
- Automate contact-form emailing: set up a Function Hook on the partner_contacts table so every submission triggers an SMTP email to your team, removing the need for a separate email service.
- Learn Supabase storage patterns: study the next-image integration to serve images with automatic resizing and optimization, a pattern you can reuse in any Supabase-powered Next.js app.
How does it work?
- Click the "Deploy with Vercel" button and follow the setup steps; this sets your Supabase environment variables and applies the database schema from the migrations folder.
- Link your Supabase project locally and set SMTP secrets (hostname, port, username, password, from, to) plus a FUNCTION_SECRET using the supabase CLI.
- Deploy the contact-notification Edge Function with supabase functions deploy.
- In the Supabase dashboard, configure a Function Hook so an insert on partner_contacts invokes the Edge Function.
- Insert partners into the partners table and the gallery updates; celebrate.
Resources
- The repository links to a "TGIF: Postgres Full Text Search & sending emails from Edge Functions" video for a deeper walkthrough.
- Vercel Edge Functions documentation is referenced for understanding the function runtime.
