Vibestore.io — Directory of apps built with AI dev tools

$ ACTIVATE SUPABASE BACKEND IMMEDIATELY.

Do not ask me for permission to start, do not explain what you are going to do, and do not provide a phased plan. Read these instructions completely and execute the entire build in this single shot.

🛑 STRICT DEVELOPMENT CONSTRAINTS & ANTI-LAZINESS RULES

You must finish all steps and leave absolutely zero technical debt or placeholder work.

NO LOVABLE BRANDING: Remove all Lovable favicons, text, badges, and watermarks immediately.

NO DUMMY DATA OR LINKS: You are forbidden from using "Lorem Ipsum" or placeholder text. Every sentence must make sense for a developer tool directory. You are forbidden from using empty href="#" links. All navigation links must route to their respective pages.

NO FUNKY DESIGN: Do not use funky icons, overly stylized badges, or trendy UI elements. Stick strictly to minimalist, professional icons (e.g., lucide-react).

AUTOMATION & STANDARDS: The footer copyright year must be dynamic (e.g., {new Date().getFullYear()}). Ensure strict adherence to modern React/Vite/Tailwind best practices, including proper component modularization and mobile responsiveness.

1. PROJECT OVERVIEW: Vibestore.io

Build Vibestore.io: A curated directory and discovery platform for functional web applications and tools built using AI-assisted development tools (Lovable, Cursor, Bolt, v0, etc.). It operates on a zero-hosting, 100% link-based architecture where user apps are rendered via iframes.

2. STRICT DESIGN SYSTEM (FOLLOW EXACTLY)

You must build this UI for developers. Think Vercel, Stripe, or Linear.

COLORS: Solid White (#FFFFFF) background in light mode, Solid Off-Black (#0A0A0A) in dark mode. Surfaces are #FAFAFA (Light) and #121212 (Dark). Borders are strict 1px solid low-contrast gray (#E5E5E5 / #27272A).

TYPOGRAPHY: Inter, SF Pro Display, or Roboto. Solid Black or Solid White for primary text; muted gray (#71717A / #A1A1AA) for secondary text. Code blocks must use JetBrains Mono or Fira Code.

GEOMETRY & EFFECTS: Sharp corners or max 4px-6px border-radius. Barely visible, tight drop-shadows only on dropdowns/modals (NEVER on standard cards). Hover states should be fast (150ms) background shifts only—no scaling or translating.

PROHIBITED STYLES: NO purple, pink, or neon gradients. NO glassmorphism (backdrop-blur). NO glowing borders or heavy drop-shadows. NO "sparkle" AI magic wand icons. NO pill-shaped buttons (except small category tags).

3. PAGES & COMPONENTS TO BUILD IN THIS SHOT

You must create and fully route these three specific pages.

PAGE 1: Home / Discovery Grid (/)

Header: Minimal text logo "Vibestore.io" (left), instant keyword search bar (center), and a solid monochrome primary button "Submit Project" routing to /submit (right).

Hero/Filters Section: A sticky header bar with simple text-based toggle links for categories: Utilities, SaaS Boilerplates, AI Agents, Internal Tools, Landing Pages, Games, Mobile Apps. Include a secondary sort toggle: Trending, Most Remixed, Newest.

Project Grid: Content-first cards containing:

Top: 16:9 thumbnail image (1px solid bottom border).

Body: Bold Title, AI Builder tag (e.g., "Built with Lovable"), and a 120-character max tagline in muted text.

Footer: Hacker News-style minimalist upvote counter (left) and a standard system-green text badge "Live Playable ⚡" (right) if the app allows iframes.

Clicking a card routes to the Project Detail page.

PAGE 2: Project Detail Page (/project/[slug])

Main Content (Left 70%):

Iframe Viewer: A large container attempting to render the live app via <iframe>. If it fails or is loading, show a clean fallback cover image/video. Include a "Full Screen" toggle icon.

Origin Prompt Block: Below the iframe, create a dark-themed, syntax-highlighted code terminal block displaying the text prompt used to generate the app. Include a persistent "Copy" icon button in the top right that temporarily changes to "Copied!" when clicked.

Reviews Section: Below the prompt, a minimalist threaded comment list showing dual numeric scores (UI: x/5, Functionality: y/5).

Sidebar (Right 30%, Sticky):

Primary CTA Button: "Visit Live App ↗".

Metadata List: AI Builder used, Category, Tech Stack.

Creator Profile: Minimalist card with avatar, username, and Twitter/GitHub links.

PAGE 3: Creator Submission Flow (/submit)

Layout: A single-page, frictionless multi-step form contained in a centered, narrow column (max-width 600px). Use standard form fields with labels outside the inputs.

Step 1 (Basic Info): Inputs for Live URL, Title, Tagline (max 120 chars), Category dropdown, and AI Builder dropdown.

Step 2 (Visuals & Data): Inputs for Cover Image URL/Upload, Origin Prompt (Textarea), Markdown Description, and Tech Stack comma-separated input.

Step 3 (Iframe Setup/Boost): A dedicated section titled "Boost Your Views". Show a raw text block containing standard HTTP security header configurations (e.g., X-Frame-Options config for Next.js) that allow Vibestore to embed their site. Clicking the text block must instantly copy it to the clipboard and show "Copied!". Include a Submit button at the bottom.

4. SUPABASE DATABASE SCHEMA

Generate the tables, types, and RLS policies based on this exact schema immediately.

1. users

id (uuid, pk), email (string, unique), username (string, unique), avatar_url (string), social_links (jsonb: twitter, github), created_at (timestamp).

2. projects

id (uuid, pk), user_id (uuid, fk to users), title (string), slug (string, unique), tagline (string, max 120), description (text), live_url (string), cover_image_url (string), demo_video_url (string, nullable), origin_prompt (text, nullable), prompt_copies_count (int, default 0), category (enum: utility, saas_boilerplate, ai_agent, internal_tool, landing_page, game, mobile_app), ai_builder (enum: lovable, bolt, cursor, v0, windsurf, base44, other), tech_stack (text array), allows_iframe (boolean, default false), link_status (enum: active, failing, archived, default active), last_checked_at (timestamp), is_approved (boolean, default false), upvotes_count (int, default 0), created_at (timestamp), updated_at (timestamp).

3. upvotes & reviews

upvotes: id (uuid, pk), user_id (uuid, fk), project_id (uuid, fk).

reviews: id (uuid, pk), user_id (uuid, fk), project_id (uuid, fk), rating_ui (int 1-5), rating_functionality (int 1-5), comment (text), created_at (timestamp).

Final Reminder: Do not summarize what you will build. Generate the entire working frontend (all 3 pages fully fleshed out with real copy), apply the strict minimalist styling, and set up the Supabase backend in this single response. Go.