Vibe Coding Template · React + Tailwind · Claude Code, Cursor, Lovable
Creator Dashboard and Store Coding Template
A production-ready creator platform template for Lovable, Replit, and Bolt.new. Build a Linktree plus Gumroad-style creator hub with a public profile page, digital product store, sales analytics, subscriber list management, content scheduler, and checkout flow. App name: Fanlink. Ships as a single copy-paste multi-file code optimised for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Preview (main screen)
Copy the full multi-file code. Files are separated by // === filename === headers so Cursor and Claude Code split them automatically. Next.js 14+ App Router, Tailwind CSS v3+, Switzer font.
Vibe code the whole app with a prompt
Paste the prompt into your AI coding tool and it builds the entire Creator Dashboard and Store Coding Template in a single conversation. Each version is written specifically for that tool.
Build me a complete creator platform app called Fanlink. It needs: a public profile page (link-in-bio) that looks like a premium magazine with a soft gradient hero, creator avatar, social stats, a featured product card, a 2-column product grid, and a links section; a store management admin page with a product table showing name, type, price, sales count, revenue, and status toggle; an analytics dashboard with 4 KPI cards (profile views, link clicks, revenue, new subscribers), a 30-day bar chart, a top links table, and a revenue breakdown table; an audience page with subscriber stats, a searchable filtered subscriber table, and export button; a content scheduler with a horizontal week calendar strip, an upcoming posts queue with platform icons, and a new post form with platform selector; a checkout page centered at max 600px wide with order summary, email input, card inputs, coupon code, total breakdown, and Stripe CTA; a product detail sales page with a full-width gradient hero, checklist of included items, sticky purchase card, and creator bio; and a settings page with profile form, store settings, payout history table, integration toggles (ConvertKit, Mailchimp, Beehiiv), notification toggles, and a danger zone. Add a left sidebar nav with: Profile, Store, Analytics, Audience, Scheduler, Settings. Design should be very minimal: white background, black text, small font sizes (like Apple or OpenAI), and blue only on the main call-to-action buttons. Use Supabase for the database and Stripe for payments.
How to use this Creator Dashboard and Store Coding Template as a prompt
- Paste the prompt into Lovable, Replit, or Claude Code to build a complete Next.js creator platform with a public link-in-bio profile, digital product store, analytics, audience list, content scheduler, and checkout.
- Best for independent creators, educators, and designers who sell digital products and want a single platform to manage their audience, content calendar, and storefront.
- Ask Claude Code or Cursor to wire in Stripe for real payments, Supabase for the subscriber list and product database, or ConvertKit for email delivery without rebuilding the UI.
How to use this Creator Dashboard and Store Coding Template as code
- Copy the full multi-file code and paste it into a fresh Next.js 14+ project. Cursor and Claude Code split the file automatically using the // === filename === headers.
- Built on Next.js App Router plus Tailwind CSS v3 plus Switzer font. Stripe for checkout, Supabase for product and subscriber storage, ConvertKit or Beehiiv for email. No motion libraries required.
- Compatible with Vercel for hosting, Stripe for payments, and any email platform (ConvertKit, Mailchimp, Beehiiv) for the audience list. Swap the email provider in a single config file.
Sections inside the Creator Dashboard and Store Coding Template
Each section is its own page with a live preview, section-only code, and vibe coding prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Public Profile and Link-in-Bio Section
Creator link-in-bio profile page for Lovable and Claude Code: gradient hero, featured product card, 2-column product grid, and customisable links list on a white editorial layout.
Creator Analytics Dashboard Section
Creator analytics dashboard section for Lovable and Claude Code: 4 KPI cards, a 30-day CSS bar chart, a top links table, and a revenue breakdown on a minimal white layout.
Product Store Management Section
Creator store management section for Lovable and Claude Code: product table with gradient thumbnails, filter tabs, status badges, stats row, and edit controls on a minimal white layout.
Product Detail Sales Page Section
Creator product detail sales page for Lovable and Claude Code: gradient hero, included items checklist, sticky purchase card with guarantee badges, and creator bio strip on a premium white layout.
Checkout Purchase Flow Section
Creator platform checkout section for Lovable and Claude Code: order summary, email input, card fields, coupon toggle, total breakdown, and Stripe CTA centered at max 600px on a light grey background.
Audience Subscriber Management Section
Creator audience management section for Lovable and Claude Code: subscriber stats, search, source and tag filters, a 12-row subscriber table with badges, and export controls on a white layout.
Content Scheduler Section
Creator content scheduler section for Lovable and Claude Code: horizontal week calendar strip with post count dots, upcoming post queue with platform badges, and a schedule new post form on a white layout.
Creator Account Settings Section
Creator platform settings section for Lovable and Claude Code: profile form, store settings, payout history, integration toggles, notification toggles, and danger zone on a white layout.
Vibe coding guides
FAQ
How do I build a creator dashboard app with Lovable or Claude Code?+
Copy the prompt on this page into Lovable, Claude Code, Cursor, Codex, Replit, or Google Stitch. The prompt generates the complete Fanlink creator platform: a public profile page, digital product store, analytics dashboard, subscriber list, content scheduler, checkout flow, product detail page, and settings. Lovable produces a visual live preview in seconds. Claude Code and Cursor write the full Next.js App Router file tree directly into your repo.
What is a link-in-bio creator platform template?+
A link-in-bio creator platform template is a pre-built app scaffold that combines a Linktree-style public profile page with a Gumroad-style digital product store, an analytics dashboard, and an email subscriber list in a single codebase. The Fanlink template ships all of these as a Next.js App Router app you can deploy to Vercel in under 30 minutes using Lovable, Claude Code, or Cursor.
What AI coding tool is best for building a creator dashboard?+
Lovable for a visual live preview without local setup. Claude Code for writing the full Next.js file tree directly into your repo with type checks. Cursor for pair-programming the build file by file with autocomplete. Replit for a hosted environment without local Node.js setup. Codex for autonomous multi-step builds. Google Stitch for designing each screen visually before exporting React plus Tailwind code.
Can I use Stripe with this creator dashboard template?+
Yes. The checkout page includes styled card input fields ready for Stripe Elements. Ask Claude Code or Cursor via the prompt to wire the buy now button to a Stripe Checkout session in a Next.js API route, add a Stripe webhook handler that unlocks product delivery on payment success, and connect the payout history table to Stripe Transfers API. The Stripe Connect integration in settings can also be wired to a real OAuth flow.
How do I add a real email subscriber list to the Fanlink template?+
The audience page includes a styled subscriber table ready to be wired to a Supabase subscribers table. Ask Claude Code or Cursor to add a Supabase insert on newsletter signup, a ConvertKit or Beehiiv API integration for the send email button, and a CSV export endpoint at /api/export-subscribers that streams a text/csv response from a Supabase query. The integration toggles in settings are pre-labelled for ConvertKit, Mailchimp, and Beehiiv.
Does this creator dashboard template work with Supabase?+
Yes. The template is designed to pair with Supabase for all persistent data: a creators table for profile data, a products table for the store, a subscribers table for the audience list, a scheduled_posts table for the content scheduler, and a creator_settings table for integration toggles and notification preferences. Ask Claude Code or Cursor to scaffold the Supabase schema and Row Level Security policies in the same conversation.
What screens are included in the Creator Dashboard and Store template?+
Eight screens: a public profile page (link-in-bio with featured product, product grid, and links), a digital product store admin (product table with filter tabs and stats), an analytics dashboard (KPI cards, 30-day bar chart, top links, and revenue breakdown), an audience subscriber manager (stats, search, filters, and subscriber table), a content scheduler (week calendar strip, post queue, and schedule form), a product detail sales page (gradient hero, checklist, and sticky purchase card), a checkout page (order summary, card inputs, coupon, and total), and a settings page (profile, store, payouts, integrations, notifications, and danger zone).
Can I deploy this creator platform template to Vercel?+
Yes. The template is a standard Next.js 14+ App Router app. Run npm run build locally or push to a GitHub repo linked to a Vercel project. Add NEXT_PUBLIC_SUPABASE_URL, SUPABASE_ANON_KEY, and STRIPE_SECRET_KEY as Vercel environment variables. The public profile route at /[username] uses Next.js dynamic routing and is compatible with Vercel Edge Functions for low-latency creator page loads.