Building an Image Gallery with Next.js, Supabase, and Tailwind CSS

Learn how to create an image gallery with dynamic content from a PostgreSQL database, with support for content updates without needing to redeploy.
0:00 - Introduction
0:18 - Create Next App
0:37 - Running Locally
0:59 - Using Tailwind CSS (Gallery Component)
1:21 - Building an Image Component
1:51 - Aspect Ratios & Group Modifiers
2:50 - Next.js Image Component
4:50 - Blur-Up Image Placeholders
5:45 - Setting Up Supabase
6:36 - Connecting to Supabase
7:35 - Adding Data to Supabase
8:42 - Fetching Data from Supabase
10:45 - Image Gallery Demonstration
11:01 - Deploying to Vercel
12:02 - On-Demand Incremental Static Regeneration
12:38 - Supabase Function Hooks
13:51 - Revalidation API Route
14:55 - Redeploying
15:42 - On-Demand ISR Demo
16:05 - Conclusion
Links
-----
◆ Walkthrough: leerob.io/blog/image-gallery-...
◆ Code: github.com/leerob/image-galle...
◆ Demo: swag.vercel.app/
-----
◆ Blog: leerob.io/
◆ Twitter: / leeerob
◆ GitHub: github.com/leerob
◆ Theme/Gear/Setup: leerob.io/uses
#tailwind #supabase