Million Dollar Page - AI Edition

Remember the Million Dollar Homepage? That was cute. This is the AI Edition. Not ads—its a change to build legacy. 1M pixels for the real AI pioneers. Claim yours before it vanishes.

Comment

Inspiration

The Million Dollar Page – AI Edition was inspired by the original Million Dollar Homepage—a 1000x1000 pixel grid that let anyone buy online real estate for $1 a pixel. Simple. Bold. Memorable.

I wanted to bring that idea into the modern era—this time, for AI. A permanent digital landmark for AI companies actually building the future—not just chasing trends.

This reimagined version is less about ads, more about building legacy. A page for companies built to last.

What it does

The Million Dollar Page – AI Edition is a 1000x1000 pixel grid where AI companies buy space to display their logos.

Users choose a rectangle of pixels, upload their logo, and submit an application. Pricing is dynamic. Premium zones cost more.

Admins review applications. Once approved, Stripe processes payment and logos go live. Each user gets a profile page to manage their pixels, logos, and company details.

How I built it

  • Frontend: Built with React + Tailwind + Vite for speed and clean UI. Lucide React provided icons.
  • Grid Logic: A custom useGrid hook handles selection, resizing, pricing, and canvas interaction.
  • Backend: Supabase (Postgres, Auth, Storage) powers the backend. Row Level Security ensures secure user access while keeping the grid public.
  • Payments: Stripe Checkout Sessions handle payments. I used Supabase Edge Functions to manage checkout sessions and process Stripe webhooks.
  • Workflow: Applications move through a review and approval process powered by Edge Functions and database triggers. Admins manage the flow from submission to pixel assignment.

Challenges I ran into

  • Canvas Performance: Keeping a 1M-pixel grid fast and responsive took careful canvas management.
  • Dynamic Pricing: Pixel-based pricing by location and size required precise math and smart defaults.
  • Stripe Flows: I adapted Stripe’s Setup Intents for a delayed charge after approval. It was trickier than it sounds.
  • Supabase RLS: Balancing private user data with public visuals demanded clean data modeling and smart policies.
  • Image Handling: Logo uploads needed to be secure, distortion-free, and fast to render on the canvas.
  • Real-time Updates: Ensuring the grid reflected approved logos in near real-time required refresh logic and webhook coordination.

Accomplishments I’m proud of

  • Fluid UX: From selecting pixels to uploading logos, the experience feels intuitive and polished.
  • Reliable Payments: My Stripe flow ensures users are only charged after approval, secure and fair.
  • Admin Dashboard: A lightweight tool for reviewing and managing applications with minimal friction.
  • Scalable Stack: Supabase + Edge Functions keeps things lean, fast, and ready to grow.
  • Visual Quality: The grid looks good, responds fast, and handles logos with clarity.
  • Full-Stack Integration: Every piece fits together cleanly: frontend, backend, and third-party tools.

What I learned

  • Canvas Rendering: I dug deep into performance tuning and responsiveness for a large, interactive grid.
  • Stripe Internals: Learned how to structure delayed payments using Setup and Payment Intents.
  • Supabase Ecosystem: Explored everything from RLS to storage to Edge Functions-Supabase did the heavy lifting.
  • State Management: Coordinating file uploads, auth, payments, and admin flows taught me to simplify.
  • Data Modeling: Relationships between users, pixels, and applications demanded a clean schema from day one.
  • Longevity Thinking: Designing for permanence shifted how I approached architecture, storage, and the grid itself.

What’s next

  • Richer Company Pages: More content, team info, and maybe interactive modules.
  • Grid Filters + Heatmaps: Help visitors discover logos by category, industry, or activity.
  • Engagement Features: Comments, highlights, and community curation.
  • Analytics for Companies: Track engagement, visibility, and click data.
  • Premium Features: Offer larger placements, profile upgrades, and exclusive exposure.
  • Better Mobile UX: Optimize interaction for touch and small screens.
  • Content Moderation: Add AI-based tools to ensure quality and compliance.

The Million Dollar Page – AI Edition isn’t just a product.
It’s a permanent page for the pioneers who will define the next era of the internet.

Built With

  • and-canvas-interaction.-**backend:**-supabase-(postgres
  • auth
  • lucide-react
  • postgresql
  • pricing
  • react
  • resizing
  • row-level-security-(rls)
  • stripe-checkout-sessions
  • stripewebhooks
  • supabase
  • supabase-auth
  • supabase-edge-functions
  • supabase-storage
  • tailwind
  • usegrid-hook
  • vite
Share this project:

Updates