Build Kit
Intermediate15 50 min

Kit: Vibe Coder Portfolio

Build BuildFolio: a vibe coding project gallery with filterable grid, detail pages with React Router, submit form connected to Supabase, and a dark design with amber accents.

What you'll build

Functional Vibe Coding Gallery

A Product Hunt-style gallery for AI-built projects with a filterable grid, detail pages by slug, a validated submit form, and projects stored in Supabase.

  • Grid of 12 project cards with covers and tool-based image fallbacks
  • Combined filters by tool, category, and level
  • Real-time search by name and description
  • Detail pages with React Router (/projects/:slug)
  • Submit form with React Hook Form + Zod + Supabase
  • Automatic similar projects on each detail page
Preview

Kit: Vibe Coder Portfolio

Includes 4 milestones, copy-paste prompts, step-by-step instructions

Or get all 3 kits for €29

What you build

Functional Vibe Coding Gallery

A Product Hunt-style gallery for AI-built projects with a filterable grid, detail pages by slug, a validated submit form, and projects stored in Supabase.

  • Grid of 12 project cards with covers and tool-based image fallbacks
  • Combined filters by tool, category, and level
  • Real-time search by name and description
  • Detail pages with React Router (/projects/:slug)
  • Submit form with React Hook Form + Zod + Supabase
  • Automatic similar projects on each detail page

Take it further

Challenge yourself with these extensions

Real data from Supabase

Hard

Load the project grid from Supabase with approved submissions instead of mock data

Upvote system

Medium

Add a like button on each card with a count using Supabase anonymous inserts

Review panel

Hard

A password-protected page to approve or reject submitted projects before they appear in the gallery