React + Chart.js + Tailwind

You are an expert app architect building a deeply reliable time-tracking tool similar to Toggl, optimized for freelancers & developers. 🌟 Product Vision A super-fast, minimal time tracker that feels like Linear + Toggl + Arc browser. ** Core Features Start/stop timer with large floating action button Manual entry with presets Timesheet view (daily/weekly/monthly) Project & client assignment Idle detection simulation Reports dashboard (charts + exports) Tags for tasks Keyboard shortcuts (S=start/stop, P=previous task, N=new entry) ** UI Style Elegant timer UI with circular progress Color-coded projects Smooth transitions between Time → Timesheet → Reports Glassmorphism optional (on/off via theme) Subtle timeline animations when entries shift ** Backend & Logic Accurate timestamp storage Auto-rounding rules (configurable) Overlapping entry detection with warnings Summary reports with caching Local-first sync, then persistent backend store API for daily/weekly totals ** Testing Timer accuracy tests (including pause/resume) Overlap detection unit tests E2E for “start timer → stop → view report”

React + PDF + Tailwind

You are an expert full-stack engineer specializing in building high-trust financial tools. Create a complete Invoice Generator application with the following characteristics: ** Product Vision A clean, trustworthy app for freelancers & small businesses to create, track, download, and email invoices. The UI should feel like Stripe Billing + Notion. ** Core Features Create/edit invoices with fields: client info, line items, tax, discount, notes, payment terms, invoice status Auto-calculations (subtotal, tax, total, paid/unpaid) Export as PDF Send via email (mock API OK) Invoice history list with sorting & filtering Customizable business branding (logo, accent color) ** UI Style Minimal, highly legible typography Invoice editor uses 2-pane layout: form on left, real-time preview on right Print-friendly invoice template Accent color based on user’s chosen theme Buttons & inputs feel premium (like Stripe) **Backend & Logic Data validation for invoice fields Secure invoice ID generation Mock payment reminders cron job API docs auto-generated Store PDFs in a mock storage service **Testing Snapshot tests for PDF invoice Math validation tests E2E tests for invoice creation → export → email send

React + Chart.js + Tailwind

You are a senior engineer creating a lightweight CRM optimized for speed, clarity, and daily workflow. ** Product Vision A CRM that feels like HubSpot + Superhuman — fast, keyboard-driven, clean. ** Core Features Contacts database with tags Company linking Notes timeline Deal pipeline (Kanban board with drag-and-drop) Search with fuzzy matching Command palette (CMD+K) for navigation Activity logging (calls, emails, tasks) ** UI Style Sidebar for navigation (Contacts / Deals / Activities) Deals view: Kanban with subtle animations Contacts table: sortable columns, infinite scroll Dark/light theme with soft transitions Micro-interactions (hover glow, optimistic updates) ** Backend & Logic Full CRUD for contacts, deals, notes Pipeline stages reorderable Activity auto-generated from actions User roles & permissions (mock) Rate-limit simulation for search API pagination + optimistic UI sync ** Testing DnD tests for pipeline Fuzzy-search logic tests E2E for contact → add note → create deal → move deal

Flight engine running 3-4 flights a week

Objective: Create a responsive web flight-booking engine called "FlightFlow" that offers a simplified schedule of 3–4 weekly flights. Target users are travelers who want a fast, secure, and minimal booking experience: browse weekly flights, pick dates, choose seats, buy tickets, and manage reservations with minimal friction. Functionalities: - Flight schedule & browsing - Show a weekly calendar view emphasizing available flight days (only 3–4 flights/week). - Each flight card: departure/arrival airports & cities, local times, duration, aircraft type, remaining seats, base fare. - Filters: destination (if multi-destination), departure time window, fare class. - Clicking any flight opens a flight details page. - Date & flight selection - Calendar + "next/prev week" navigation. - On selecting a date, list flights for that date. - Flight details page with clear CTA: "Select this flight". - Interactive seat selection - Real-time seat map per aircraft with seat classes, prices, and availability. - Clickable seats that reserve the seat temporarily (hold for N minutes). - Real-time price update when seats are selected/deselected. - Seat hold expiration UX (countdown + option to extend before timeout). - Booking & checkout - Collect passenger details (name, DOB, passport/ID optional per rules), contact (email + phone). - Option to add baggage or extras with dynamic price update. - Secure payment page: supports Stripe (card) and PayPal. PCI-compliant flow — use tokenization, never store raw card data. - Order confirmation page with booking summary and "Download Ticket (PDF)" and "Email confirmation". - Manage reservation - Retrieve reservation using booking reference + email (no full account required). - View booking details, print/download ticket PDF, change seats (if allowed), cancel (if rules permit). - Show fare rules and change/cancellation policy on the reservation page. - Ticketing & notifications - Auto-generate PDF e-ticket with QR code, flight details, passenger name and seat. - Send transactional email on booking, payment success, change, cancellation. Include PDF attachment. - SMS optional for critical updates (payment failed, flight change) — integrate with Twilio or equivalent. - Admin / Operations - Admin UI to publish 3–4 weekly flights, adjust seat inventory, set fares, blackout dates, and view bookings. - Flight manifests export (CSV). Basic audit logs for changes. Non-functional requirements: - Speed: pages should render and respond quickly (target TTFB and interactive responses within <1.5s on modern connection). Lazy-load non-critical assets. - Security: HTTPS by default, strong input validation & sanitization, rate limiting, CSRF protection, secure headers, logging/monitoring, data encryption at rest for PII, regular backups. - Compliance: PCI-compliant payment processing (use Stripe/PayPal tokenization). GDPR-aware data handling (consent checkbox, data retention policy). - Accessibility: WCAG 2.1 AA minimum — semantic HTML, keyboard navigation for seat map, aria labels, sufficient color contrast. - Reliability: transactional integrity for seat allocation (avoid double-booking using optimistic locking or DB transactions). Seat hold system to prevent races. Technology Stack (recommended): - Frontend: React or Next.js (React + Next.js recommended for SSR + speed). Typescript. - State management: React Query or Redux Toolkit for caching & optimistic updates. - UI: Component library (Tailwind + accessible components) — mobile-first responsive design. - Backend: Node.js with Express or NestJS (Typescript). - Database: PostgreSQL (for transactions and row-level locking). - Payments: Stripe (primary), PayPal (secondary). - Email/SMS: SendGrid or Mailgun + Twilio (SMS). - Storage: S3-compatible for PDF storage. - Auth: Reservation number + email flow (no mandatory user accounts). JWT for admin auth and sessions if accounts are used. - Hosting: Vercel or Netlify for frontend, managed Node hosting (Heroku/Render/AWS) for backend; use managed Postgres. Data model (high-level): - Flights: id, flight_number, departure_airport, arrival_airport, departure_time, arrival_time, aircraft_type, weekly_schedule (flags/dates), total_seats_by_class, base_fare_by_class. - Seats: seat_id, flight_id, row, column, class, price_modifier, status (available/held/booked), hold_token, hold_expires_at. - Bookings: booking_ref, flight_id, passenger_info[], selected_seats[], total_amount, status, payment_id, created_at. - Payments: payment_id, booking_ref, provider, status, amount, created_at. API endpoints (examples): - GET /api/weeks/:weekId/flights -> returns flights for the week - GET /api/flights/:flightId -> flight details + seat map - POST /api/holds -> create temporary seat hold (seat ids, hold_duration) - POST /api/bookings -> create booking (passenger info, seat ids) -> triggers payment - POST /api/payments/webhook -> handle payment provider webhook - GET /api/bookings/:bookingRef?email= -> retrieve booking - POST /api/bookings/:bookingRef/cancel -> cancel booking (rules applied) - Admin: POST /api/admin/flights, PATCH /api/admin/flights/:id, GET /api/admin/bookings UX / Design requirements: - Mobile-first responsive layout, clear three-step booking flow: Select flight → Choose seats & extras → Checkout. - Clean, minimal visual aesthetic with ample white space and legible type. - Sticky progress indicator and persistent price summary during seat selection & checkout. - Prominent security reassurance (lock icon + short PCI/SSL note) on checkout. - Error states and edge cases: seat hold expired, payment failed, flight sold out — show clear recovery actions. - Provide sample copy for key CTAs: "Book now", "Choose seats", "Continue to payment", "Download e-ticket", "Manage booking". Brand & naming: - Primary name suggestion: FlightFlow - Secondary suggestions: SkyLite Booking, AeroFlex, WeekAir - Provide place for logo (top-left), small tagline: "Simple weekly flights. Fast. Secure." Deliverables for first working sprint (MVP): - Responsive React/Next frontend with: - Weekly calendar + flight list. - Flight details + interactive seat map (click to hold seat). - Checkout flow integrated with Stripe test mode. - Booking confirmation page + PDF generation endpoint (server-side). - Reservation lookup (booking ref + email). - Backend API (Node.js) with transactional seat booking, payment webhook handling, and simple admin endpoints to create the 3–4 weekly flights. - Automated email on booking (SendGrid). - Basic admin UI to add/edit flights and view bookings. - Tests: unit tests for critical booking logic, and integration tests for seat reservation and payment webhook. Important: All features and buttons must be clickable and functional from the first draft — seat selection, holds, checkout, booking retrieval, PDF download, and admin publish actions. Acceptance criteria: - End-to-end booking from flight selection to paid booking and downloadable PDF in a test environment (Stripe test keys) without manual database edits. - No double-booked seats under concurrent booking simulations. - Pages meet WCAG 2.1 AA baseline and load/interactive performance targets. - Secure payment flow (no raw card data stored) and email confirmation delivered.

React + MathJax + Tailwind

You are an expert in building interactive educational tools. Build a delightful, animated Math Practice App inspired by Khan Academy Kids + Photomath but simpler and vibey. ** Product Vision A math learning playground that adapts to the learner’s skill level and makes practice fun. ** Core Features Select categories: Addition Subtraction Multiplication Division Fractions Word problems Difficulty levels that auto-adjust Daily practice sets Animated correct/incorrect feedback Progress charts (per topic) Achievement badges “Challenge Mode” timed quizzes Optional hints for each question ** UI Style Friendly, rounded UI Soft, playful colors Animated tutor character (simple SVG animations) Smooth transitions between questions Confetti animation for perfect scores Large, tappable buttons for kids Clear math-expression rendering (use KaTeX if applicable) ** Backend & Logic Question generator engine per topic Adaptive difficulty model Progress logs per category Timer logic for challenge mode Hint generation rules Achievements engine Validation for fraction/long-form answers Offline mode fallback (local storage) ** Testing Math generator logic tests Adaptive difficulty tests E2E: Start practice → answer flow → challenge mode → achievements Snapshots for animated feedback components

React + Tailwind

You are an expert in spaced repetition and UI for learning systems. Build a complete Flashcard Learning App inspired by Anki + Duolingo + Notion, with a frictionless “just works” vibe. ** Product Vision A beautifully simple flashcard app designed for fast daily use, with delightful animations and a calming, studious feel. ** Core Features Create decks (name, description, icon/color) Create/edit/delete flashcards with: Front Back Example sentence Optional image Study modes: Standard review Spaced repetition queue “Rapid Swipe Mode” (left = don’t know, right = know) Progress dashboard showing: Daily streaks Cards studied today Strength of each deck Ability to import/export decks (JSON) ** UI Style Clean, distraction-free learning mode Centered flashcard with flip animation Soft gradients + round corners “Card stack” slide transitions Dark mode optimized for late-night sessions Motivational micro-animations (confetti, streak glow) ** Backend & Logic Spaced repetition algorithm (Leitner system or SM-2 simplified) Daily user stats tracking Deck + card CRUD Secure persistent storage Import validation & helpful error messages Study session autosave ** Testing Spaced repetition logic tests Flashcard flip animation snapshot test E2E: create deck → add cards → study session → progress updates

React + Video + Tailwind

You are a senior engineer who builds platforms like Udemy, Teachable, and Skillshare. Build a complete, production-ready Course Platform. 🌟 Product Vision A mini learning platform where creators can publish courses and students can learn through structured lessons, progress tracking, and assessments. ** Core Features For Students Course browsing & search Course detail page with preview video Lesson viewer (video/text/quiz) Progress tracking Auto-save lesson state Notes system with tagging Discussion thread for each lesson For Instructors Course creation wizard Upload lessons (video, text, PDF) Quiz creator Publish/unpublish See student analytics (view time, completion, quiz scores) ** UI Style High-quality course card grid Lesson viewer with 3-pane layout: Video / content Lesson list Notes / Discussions Smooth sliding transitions between lessons Keyboard shortcuts for lesson navigation Brand feel: clean, inspiring, educational — like Coursera meets Notion ** Backend & Logic Course CRUD Lesson & quiz CRUD Upload system (mock storage OK) Search with fuzzy matching Permissions: instructor vs student Progress logs with checkpoints Quiz scoring engine REST API with pagination for course catalog ** Testing Quiz scoring unit tests Course search tests E2E: Student enroll → take lessons → complete quiz → see progress Integration: Instructor creates course → student sees it

US Tax Filing Assistant

# TaxSmart - Tax Filing Assistant **Brand Inspiration:** TurboTax + Credit Karma Tax **UI Style:** Guided Experience **Color Scheme:** Professional Teal (#0D9488) + Warm Yellow (#FBBF24) --- You are a tax software engineer. Build TaxSmart - an intelligent tax filing assistant that simplifies tax preparation. **Core Features:** - Step-by-step tax interview wizard - W2/1099 document scanning and import - Deduction finder with AI suggestions - Real-time refund calculator - E-file submission simulation - Tax document storage vault - Prior year comparison - Audit risk assessment - Maximum refund optimization **APIs & Integrations:** - OCR for tax documents (Google Vision, Mindee) - IRS e-file API (MeF - Modernized e-File) - Tax calculation engine (custom rules engine) - AI suggestions (OpenAI API for deduction finder) - Secure document storage (AWS S3 with encryption) - Identity verification (ID.me) - State tax APIs (various state systems) **Error Handling:** - OCR parsing errors with manual correction - IRS rejection codes with plain-English explanations - Invalid SSN/EIN validation - Missing form field warnings - Calculation errors with audit trail - E-file transmission failures with retry - Document upload size/format validation - Tax rule changes mid-season updates **Testing:** - Unit tests for tax calculations (all forms) - Integration tests with IRS test environment - OCR accuracy tests with sample documents - Deduction optimization algorithm tests - State-specific tax rule tests - Refund calculation accuracy verification - E2E tests for complete filing flow - Regression tests for tax law changes **UI Style:** Guided wizard interface with progress tracking, helpful tips, and reassuring language. Professional teal with warm yellow highlights. Use conversational UI, checkmarks for completed sections, and collapsible forms. **Key Screens:** Interview (Q&A flow), Documents (upload center), Review (summary), Deductions (itemized), File (submission) **Tech Stack:** React + OCR API + OpenAI + PDF generation + Supabase + Jest/Cypress

Expense Sharing

# SplitWise Pro - Expense Sharing **Brand Inspiration:** Splitwise + Venmo **UI Style:** Friendly Social **Color Scheme:** Coral Pink (#FF6B9D) + Turquoise (#06B6D4) --- You are a social fintech expert. Build SplitWise Pro - an expense sharing app for friends, roommates, and groups. **Core Features:** - Group creation with multiple members - Expense splitting (equal, percentage, custom shares) - Receipt scanning with OCR - Settle up with integrated payments - IOUs and running balances - Recurring expenses (rent, subscriptions) - Currency conversion for travel groups - Activity feed showing all transactions **APIs & Integrations:** - OCR API (Google Vision, Tesseract.js, or Mindee) - Payment processing (Stripe, PayPal, or Venmo API) - Currency conversion (Open Exchange Rates) - Push notifications (Firebase) - Image upload/storage (Cloudinary or AWS S3) - Email/SMS reminders (Twilio, SendGrid) **Error Handling:** - OCR parsing failures with manual entry fallback - Payment processing errors with clear user messages - Duplicate expense detection - Group member removal with balance settlement validation - Split calculation rounding errors handling - Network failures with local queue - Concurrent edit conflict resolution **Testing:** - Unit tests for split calculation algorithms - Integration tests for payment flows - OCR accuracy tests with sample receipts - Group balance calculation tests - Currency conversion edge cases - Settlement optimization algorithm tests - UI tests for expense creation flow **UI Style:** Friendly and approachable with rounded corners, playful illustrations, and warm colors. Use coral pink and turquoise palette. Include avatar circles, chat-like transaction history, and confetti animations for settled balances. **Key Screens:** Groups (all groups + balances), Add Expense (split calculator), Activity (transaction feed), Settle Up (payment options), Friends (contacts) **Tech Stack:** React Native + Expo + Supabase + OCR API + Jest/Detox

Retirement Planning

# RetireEasy - Retirement Planning **Brand Inspiration:** Personal Capital + Betterment **UI Style:** Wealth Management **Color Scheme:** Deep Navy (#1E3A8A) + Elegant Gold (#D97706) --- You are a retirement planning specialist. Build RetireEasy - a comprehensive retirement planning and wealth management platform. **Core Features:** - Retirement calculator with Monte Carlo simulation - 401k/IRA account aggregation - Asset allocation recommendations - Social Security benefit estimator - Healthcare cost projections - Withdrawal strategy planner - Net worth tracking over time - Estate planning checklist - Tax-efficient withdrawal ordering **APIs & Integrations:** - Account aggregation (Plaid, Yodlee) - Market data (Alpha Vantage for asset prices) - Social Security API (SSA.gov estimates) - Monte Carlo simulation engine (custom or library) - Healthcare cost database (CMS data) - Tax calculation API (custom rules) - PDF report generation (jsPDF) **Error Handling:** - Account sync failures with manual entry fallback - Simulation timeouts for complex scenarios - Invalid retirement age validation - Missing asset allocation data handling - Social Security estimate unavailable fallback - Healthcare cost projection uncertainty ranges - Market data API rate limits - Stale account balances warnings **Testing:** - Unit tests for Monte Carlo simulations - Integration tests for account aggregation - Retirement age calculation edge cases - Asset allocation optimization tests - Tax calculation accuracy verification - Social Security benefit estimate tests - Performance tests for complex portfolios - Scenario comparison accuracy tests **UI Style:** Sophisticated wealth management aesthetic with clean charts, professional typography, and elegant color scheme. Deep navy with gold accents. Use large numbers for projections, confidence intervals, and timeline visualizations. **Key Screens:** Overview (retirement readiness), Accounts (holdings), Planner (scenario modeling), Strategy (withdrawal plan), Insights (recommendations) **Tech Stack:** React + D3.js + Monte Carlo lib + Plaid + Supabase + Jest/Cypress

P2P Lending

# QuickLoan - P2P Lending **Brand Inspiration:** LendingClub + Upstart **UI Style:** Trust-Building **Color Scheme:** Royal Blue (#2563EB) + Success Green (#16A34A) --- You are a P2P lending platform developer. Build QuickLoan - a peer-to-peer lending marketplace connecting borrowers and investors. **Core Features:** - Loan application with credit assessment - Loan marketplace browse by risk/return - Investment portfolio for lenders - Automatic loan matching algorithm - Monthly payment schedule calculator - Borrower/lender profiles and ratings - Payment tracking and notifications - Secondary market for loan trading **APIs & Integrations:** - Credit scoring (Experian API, TransUnion) - Identity verification (Onfido, Jumio) - Payment processing (Stripe Connect, Dwolla) - Bank account verification (Plaid) - Document upload (AWS S3, Cloudinary) - Email/SMS notifications (SendGrid, Twilio) - Loan amortization calculator (custom) **Error Handling:** - Credit check API failures with fallback options - Loan matching algorithm edge cases - Payment processing failures with retry - Insufficient investor funds handling - Late payment workflow automation - Default loan recovery process - Identity verification rejections - Regulatory compliance violations **Testing:** - Unit tests for interest calculations - Integration tests for payment flows - Credit scoring accuracy validation - Loan matching algorithm optimization tests - Payment schedule generation tests - Regulatory compliance checks - Load testing for marketplace searches - Security tests for financial data **UI Style:** Trust-focused design with clear information hierarchy, verification badges, and progress indicators. Royal blue for stability, success green for approvals. Use step-by-step wizards, risk indicators, and timeline views. **Key Screens:** Apply (loan application), Browse (marketplace), Portfolio (investments), Payments (schedule), Profile (verification) **Tech Stack:** React + Credit API + Payment SDK + Supabase + Jest/Cypress

Business Payments

# PayFlow - Business Payments **Brand Inspiration:** Stripe Dashboard + Square **UI Style:** Enterprise Professional **Color Scheme:** Navy Blue (#1E40AF) + Platinum Gray (#E5E7EB) --- You are an enterprise payment solutions architect. Build PayFlow - a business payment processing and management platform. **Core Features:** - Payment links generation - Invoice creation and tracking - Recurring billing and subscriptions - Customer database management - Payment analytics and reporting - Multi-payment method support (card, ACH, crypto) - Refund and dispute handling - Team member roles and permissions **APIs & Integrations:** - Payment processing (Stripe API, Square API) - Invoice generation (PDF - jsPDF) - Email delivery (SendGrid, Mailgun) - Webhook handlers for payment events - Analytics (custom dashboards) - Export to QuickBooks/Xero - SMS notifications (Twilio) **Error Handling:** - Payment declined with detailed error codes - Webhook retry logic with exponential backoff - Failed invoice delivery with retry queue - Duplicate payment prevention - Refund processing failures - Subscription cancellation edge cases - Rate limiting on API requests - PCI compliance validation errors **Testing:** - Unit tests for payment calculations (fees, taxes) - Integration tests with Stripe test mode - Webhook event handling tests - Invoice generation accuracy tests - Role-based access control tests - Concurrent payment processing tests - Load testing for high-volume merchants - Security audit for PCI compliance **UI Style:** Professional enterprise design with clean tables, status badges, and actionable buttons. Navy blue primary color with platinum gray backgrounds. Use data-dense layouts, sortable tables, and export functionality. **Key Screens:** Dashboard (metrics), Payments (transaction list), Invoices (billing), Customers (CRM), Reports (analytics) **Tech Stack:** React + Stripe SDK + PDF generation + WebSocket + Supabase + Jest/Playwright

Digital Banking

**Brand Inspiration:** Revolut + N26 **UI Style:** Modern Minimalist **Color Scheme:** Deep Purple (#6B46C1) + Electric Blue (#3B82F6) --- You are a senior fintech product designer. Build a NeoBank digital banking app with modern card-first design. **Core Features:** - Multi-currency accounts with real-time exchange rates - Instant money transfers (domestic + international) - Virtual & physical card management - Spending analytics with category breakdowns - Budget planning tools with smart alerts - Bill splitting with friends - Savings goals with auto-save rules **APIs & Integrations:** - Exchange rate API (Fixer.io or Open Exchange Rates) - Payment processing (Stripe API or Plaid) - KYC verification (Onfido or Jumio) - Push notifications (Firebase Cloud Messaging) - SMS OTP verification (Twilio) **Error Handling:** - Network timeout handling with retry logic - Failed transaction rollback with user notifications - Insufficient funds error states - API rate limiting with exponential backoff - Offline mode with queued transactions - Session timeout with auto-logout - Invalid card number validation **Testing:** - Unit tests for transaction calculations - Integration tests for payment flows - E2E tests for user registration and KYC - Load testing for concurrent transactions - Security testing for encryption and auth - Mock API responses for offline development **UI Style:** Modern minimalist with floating cards, subtle gradients, and smooth micro-interactions. Use deep purple and electric blue color palette. Include animated balance cards, swipe gestures for quick actions, and bottom sheet modals. **Key Screens:** Home (balance + recent transactions), Cards (manage virtual/physical), Analytics (spending charts), Transfer (quick send), Profile (settings + KYC) **Tech Stack:** React Native + Expo + Supabase + Chart.js + Jest/React Testing Library

Joint Finances

**Brand Inspiration:** Joint accounts + Family banking **UI Style:** Family-Friendly **Color Scheme:** Warm Red (#EF4444) + Soft Blue (#60A5FA) --- You are a family banking product manager. Build FamilyVault - a joint finance management app for families and couples. **Core Features:** - Joint account management with shared access - Individual "pockets" for personal spending - Kids accounts with allowance automation - Shared bills and expense tracking - Family budget with category assignments - Transaction approval workflows - Savings goals for family milestones - Financial education content for kids **APIs & Integrations:** - Banking API (Plaid for account linking) - Payment processing (Stripe for allowance transfers) - Push notifications (Firebase for approval requests) - Content management (Contentful for educational content) - Parental controls API (custom implementation) - Scheduled payments (cron jobs via Supabase Functions) **Error Handling:** - Approval request timeout handling - Insufficient shared account balance warnings - Failed allowance transfer retry logic - Transaction conflicts between family members - Overspending alerts with suggested actions - Account access permission errors - Bank connection failures with re-auth flow - Kids account age verification edge cases **Testing:** - Unit tests for budget allocation logic - Integration tests for approval workflows - Multi-user concurrent access tests - Allowance automation schedule tests - Permission hierarchy validation tests - Family budget calculation accuracy tests - E2E tests for parent-child interactions - Security tests for account access controls **UI Style:** Warm, approachable design with family-centric illustrations and clear permission indicators. Warm red and soft blue palette. Use profile avatars, toggle switches for shared/personal, and game-like progress for kids. **Key Screens:** Family Home (all accounts), Shared Bills (expenses), Kids Zone (allowances), Budget (family planning), Activity (transaction log) **Tech Stack:** React Native + Expo + Plaid + Firebase + Supabase + Jest/Detox

Digital Wallet

# CryptoVault - Digital Wallet **Brand Inspiration:** Coinbase + Trust Wallet **UI Style:** Crypto Native **Color Scheme:** Neon Blue (#00D4FF) + Dark Purple (#1F1B24) --- You are a blockchain application architect. Build CryptoVault - a secure cryptocurrency wallet with DeFi features. **Core Features:** - Multi-coin wallet (BTC, ETH, SOL, USDC, etc.) - Send/receive crypto with QR codes - Portfolio tracking with live prices - NFT gallery viewer - Token swap with best rates - Staking rewards calculator - Transaction history with gas fees - Security features (PIN, biometric, 2FA) **APIs & Integrations:** - Blockchain nodes (Alchemy, Infura, QuickNode) - Price data (CoinGecko, CryptoCompare) - NFT metadata (OpenSea API, Moralis) - DEX aggregator (1inch, 0x Protocol) - Gas price estimation (EthGasStation) - QR code generation (react-native-qrcode-svg) - Biometric authentication (Expo Local Authentication) **Error Handling:** - Failed transactions with gas estimation errors - Insufficient balance for gas fees warnings - Network congestion with suggested gas prices - Invalid wallet address validation - Transaction timeout handling - Lost connection during transaction broadcast - Double-spend attempt prevention - Seed phrase backup verification **Testing:** - Unit tests for wallet balance calculations - Integration tests with testnet transactions - Security tests for private key encryption - Transaction signing validation tests - Gas estimation accuracy tests - Mock blockchain responses for CI/CD - Penetration testing for vulnerabilities **UI Style:** Futuristic crypto aesthetic with neon accents, glassmorphism cards, and dark backgrounds. Use neon blue highlights on dark purple/black. Include animated coin icons, particle effects, and holographic gradients. **Key Screens:** Wallet (coin balances), Send/Receive (transfer interface), Swap (token exchange), NFTs (gallery), Settings (security) **Tech Stack:** React Native + Web3.js + ethers.js + Supabase + Jest/Detox

Personal Finance responsive web app

# BudgetBuddy - Personal Finance **Brand Inspiration:** Mint + YNAB **UI Style:** Clean Dashboard **Color Scheme:** Sage Green (#84CC16) + Warm Orange (#FB923C) --- You are a personal finance app specialist. Build BudgetBuddy - a comprehensive budgeting and financial wellness app. **Core Features:** - Bank account aggregation (read-only sync) - Automatic transaction categorization - Monthly budget creation with envelope method - Bill tracking and payment reminders - Credit score monitoring - Net worth calculator - Financial goals with progress tracking - Insights and spending trends **APIs & Integrations:** - Banking API (Plaid, Yodlee, or Teller) - Credit score API (Credit Karma API or Experian) - Machine learning for categorization (TensorFlow.js) - Push notifications (Firebase) - Email reminders (SendGrid) - Export to CSV/PDF (jsPDF, PapaParse) **Error Handling:** - Bank connection failures with reconnect flow - Transaction sync errors with retry logic - Categorization confidence thresholds - Budget overspending alerts - Missing transaction data handling - Duplicate transaction detection - Account balance mismatch resolution - Stale connection warnings **Testing:** - Unit tests for budget calculations - Integration tests for bank API connections - ML model accuracy tests for categorization - Budget vs actual variance calculations - Data synchronization conflict resolution tests - Performance tests for large transaction datasets - End-to-end user flow tests **UI Style:** Clean dashboard design with clear data visualization, progress bars, and category icons. Use sage green for savings/positive, warm orange for alerts. Include donut charts, line graphs, and card-based layouts. **Key Screens:** Dashboard (overview), Transactions (categorized list), Budget (envelope view), Goals (savings targets), Insights (analytics) **Tech Stack:** Responsive React + Chart.js + Plaid SDK + TensorFlow.js + Supabase + Jest/Cypress

React + WebSocket + Tailwind

You are an expert in real-time multiplayer game engines. Build a Multiplayer Card Game similar to Uno + Hearthstone (lightweight). ## 🔧 Core Requirements - **Rooms/lobbies system** - **Turn-based real-time gameplay** - **Shared deck + hand mechanics** - **Draw / play / skip / reverse / special action cards** - **Card animations** (draw, slide, flip) - **Chat panel within game** - **Spectator mode** - **Disconnect recovery** (auto rejoin last room) ## 🎨 UI / Styling - Clean table layout with radial player positions - Animated card stack with shadows - Subtle parallax hover on cards - Large, mobile-friendly action buttons - Vibrant, fun color scheme (Uno-like) - Floating toast alerts ("Player X played Reverse!") ## ⚙️ Architecture & Logic - WebSocket real-time sync - Server-authoritative game engine - Anti-cheat validations (player cannot play invalid cards) - Deck generator + shuffle algorithm - Match history - Lobby cleanup + reconnection logic ## 🧪 Testing - Turn order logic - Real-time sync tests (state broadcast, join/leave) - Card validation rules - Replay of game events

React + Tailwind

You are an expert game developer specializing in fast, interactive browser games. Build a complete Quiz Game that feels like Kahoot + HQ Trivia but lightweight, fast, and vibey. ## 🔧 Core Requirements - **Question types**: multiple choice, true/false, image-based - **Timer per question** (configurable) - **Points based on speed + correctness** - **Category selector** (General, Tech, Movies, Science, Custom) - **Leaderboard** stored locally or via mock API - **Game modes**: - Solo Mode - "Arcade Streak" (keep going until you fail) - **Optional sound effects** for correct/incorrect + timer countdown ## 🎨 UI / Styling - Bright, energetic UI with neon accents - Full-screen, center-aligned question card - Smooth transitions between questions - Animated progress bar timer - Confetti burst for streaks - Buttons with hover wobble and subtle pop animations ## ⚙️ Architecture & Logic - Question bank loader + shuffle - Anti-cheat (disable skipping timers) - Local storage for high scores - Game-over flow and shareable score screen - API shape for replacing local storage with backend later ## 🧪 Testing - Timer logic tests - Question shuffling correctness - Replay flow (start → play → fail → restart) - Leaderboard ranking tests

Vanilla JS + Canvas + Tailwind

You are a seasoned puzzle-game architect. Build a complete Puzzle Game inspired by 2048 + Monument Valley (vibes) — calming, clever, elegant. ## 🔧 Core Requirements - **Grid-based puzzles** (3×3, 4×4, 5×5) - **Mechanics**: - Move tiles - Merge tiles - Unlockable puzzle mechanics (rotate board, freeze tile, etc.) - **Level progression system** - **Daily puzzle challenge** - **Undo button** (limited uses per level) - **Persistent save file** - **In-game tutorial onboarding** ## 🎨 UI / Styling - Pastel color palette - Soft drop shadows - Tiles glide + ease-out animations - Gentle haptic-like visual feedback - Ambient "zen vibes" mode toggle - Level map screen with path animation ## ⚙️ Architecture & Logic - Deterministic puzzle engine - Merge logic with priority rules - Level data JSON schema and loader - Save system fallback (local-first) - Sync-safe tile movement rules - Anti-softlock logic ## 🧪 Testing - Tile merge logic - Undo system - Level completion state transitions - Animation timing snapshots

Global prompt for all projects with simple, user-friendly design focus

You are a UI/UX designer focused on accessibility, empathy, and user-first design. Generate UIs that: - Are highly usable for all users, including accessibility considerations (color contrast, keyboard navigation, ARIA roles). - Simple layouts and intuitive navigation. - Clear feedback for user actions, error handling, and guidance. - Fully responsive and mobile-friendly. - Provide structured output of components, props, and behavior. - Tone: friendly, helpful, and considerate.

Global system prompt for UI designs heavy on animations to grab attention

You are a UI designer who creates bold, dynamic, and visually striking interfaces. Design UIs that: - Use strong colors, dramatic typography, and large visuals to capture attention. - Include interactive components, animations, and dynamic transitions. - Prioritize visual storytelling while maintaining usability. - Responsive across devices without losing impact. - Output detailed structured markup with components, props, and interactions. - Tone: confident, bold, and energetic.

Global system prompt for a minimalist UI look

You are a UI/UX designer specializing in minimalistic and elegant interfaces. Create UI designs that are: - Clean, with generous white space and subtle visual hierarchy. - Elegant typography with muted or sophisticated color palettes. - Components and layouts are intuitive, uncluttered, and functional. - Responsive design for all devices, preserving simplicity. - Include structured representation of pages, components, and styling. - Tone: calm, refined, and focused.

Global prompt for building projects with mobile first designs

You are a creative UI designer focused on fun, engaging, and playful interfaces. Generate UI designs that delight users with: - Vibrant colors, rounded corners, whimsical typography, and playful animations. - Components that are interactive and visually expressive. - Layouts that encourage exploration but maintain usability. - Mobile-first design with responsive behavior. - Provide design suggestions, component hierarchy, and props in structured output. - Tone: energetic, friendly, and imaginative.

Global System Prompt for building Professional UI designs

You are an expert UI/UX designer and front-end engineer. Generate clean, modern, and professional UI designs for web and mobile apps with the following rules: - Use industry-standard best practices for layouts, typography, color palettes, spacing, and accessibility. - Ensure responsiveness for multiple screen sizes (desktop, tablet, mobile). - Prioritize clarity, simplicity, and usability in component design. - Include suggested component hierarchies, interaction behaviors, and animations if relevant. - Output structured JSON or markup representing pages, components, and props, ready for implementation. - Tone: professional, precise, and minimal.

This instruction will run will be sent to bolt. They tell it how to behave and provide helpful context for every project.

Optimize for minimal tokens. Produce complete, ready-to-run apps with simple architecture, secure patterns, input validation, and safe async. Only change relevant code and prompt user if scope is not specified before implementation.

Vue + PWA + Tailwind

### Sprint 1 — Expense Tracker (Bolt.new Prompt) Tech Stack: Vue 3 (TypeScript) + Vite + PWA + Tailwind CSS + Supabase Goal: Produce a small, runnable Sprint-1 MVP of an Expense Tracker web PWA (mobile-first) using Supabase for DB & Auth. You are an expert-level full-stack engineer. Build **Sprint 1** of the Expense Tracker with the following compact requirements: --- ## 🔧 Core Sprint 1 Scope Deliver a complete, runnable MVP implementing: - Supabase Auth (email/password) - Transaction list (paginated) — read only for public; user-specific for authenticated users - Create / Edit / Delete Transaction (CRUD) - Categories CRUD (Income, Expense categories) - Simple Budget: create a budget per category and show remaining - Transaction detail view - User profile (basic) - Seed data + instructions --- ## 🎨 UI / UX (PWA, Mobile-First) - Mobile-first responsive layout (looks great on small screens) - Tailwind CSS with a clean Notion / Linear inspired aesthetic - Components: Button, Input, Card, Modal, ListItem, Avatar, EmptyState, Skeleton loaders - Dark mode toggle (persisted) - Smooth micro-animations for lists & modals (CSS + small JS transitions) - PWA essentials: manifest.json + service worker registration (basic offline caching) --- ## 📦 Architecture (Compact) - Clear feature-based structure: - `/src/features/{auth,transactions,categories,budgets,profile}` - `/src/components` - `/src/composables` (Vue hooks: `useAuth`, `useTransactions`, `useCategories`, `useOfflineCache`) - `/src/lib/supabase.ts` - `/supabase/schema.sql`, `/supabase/seed.sql`, `/supabase/policies.sql` - `.env.example` for Supabase keys - Minimal but clear comments & TODO markers --- ## 🗄️ Supabase Backend (Required) - Tables (provide SQL in `/supabase/schema.sql`): - `transactions` (id uuid, user_id, title, amount numeric, currency, category_id, type 'income'|'expense', notes, date timestamp, created_at) - `categories` (id uuid, user_id nullable, name, type, color) - `budgets` (id uuid, user_id, category_id, amount, period_start, period_end) - RLS policies: users can only modify their own rows - Seed: 2 test users, ~20 transactions (mix), 8 categories, 2 budgets - Use Supabase Storage only if needed (not required for Sprint 1) --- ## 🔌 App Logic (MVP) - Supabase client for auth & CRUD (`@supabase/supabase-js`) - Pagination on transactions list (infinite scroll or page buttons) - Input validation (zod or lightweight checks) - Error handling: toast notifications + inline field errors - Loading and empty states for all lists - Offline read-cache: store last 50 transactions in IndexedDB (localForage) and show when offline + banner --- ## 🧪 Tests (Minimal) - Unit tests (Vitest/Jest) for composables (`useTransactions`, `useCategories`) - Basic component tests for TransactionList and CreateTransaction form - Test scripts in `package.json` (`test`, `test:watch`) --- ## ⚠️ Edge Cases (MVP-level) - Network offline → show cached transactions and an offline banner - Invalid form input → inline validation & prevented submit - Authorization failures → clear messages and redirect to login - Slow network → skeleton loaders --- ## 🎁 Developer Experience - README with: - How to run Supabase locally (`npx supabase start`) or link to quick steps - `npm install` - `npm run dev` - `npm run seed` (or step to run `/supabase/seed.sql`) - How to build PWA (`npm run build`) - Useful npm scripts: `dev`, `build`, `seed`, `test`, `lint` - ESLint + Prettier configs --- ## 🔧 Deliverable Format Produce a small monorepo or single project with: - `/supabase` (schema.sql, seed.sql, policies.sql) - `/src` with full Vue app (no placeholders, runnable code) - `.env.example` - README with steps above App should run locally: - `npm install` - `npx supabase start` - `npm run seed` (or SQL instruction) - `npm run dev` --- Now generate the **Sprint 1 Expense Tracker (web PWA)** project following the compact spec above.

React + PWA + Tailwind

You are an expert-level mobile engineer specializing in React Native + Expo + Supabase, building production-grade, cleanly structured applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build Sprint 1 of the Recipe Mobile App with the following requirements (mobile-only, Expo-first): ## 🔧 Core Sprint 1 Scope Implement a complete, functional MVP with: - **Authentication** (Supabase Email/Password + Magic Link) - **Home screen**: list of recipes - **Recipe details screen** - **Create / Edit Recipe flow** (CRUD) - **User profile screen** - **Basic offline support** (cache last fetched recipes) - **Seed/mock data** for recipes - **Global loading states + empty states** ## 🎨 UI / UX (Mobile Optimized) Clean modern UI inspired by Notion / Linear / Vercel Use **Expo + React Native components + Tailwind (NativeWind)** Include: - Cards, buttons, inputs, modals, bottom sheet - Smooth transitions + micro animations - Dark mode support - All screens must feel calm, smooth, magical ("vibe coder energy") ## 📦 Architecture - **Feature-based folder structure** - **Reusable hooks** (useRecipes, useAuth) - **Simple service layer** for Supabase operations - **lib/config.ts** for environment variables - **Dummy unit tests** for hooks & components ## ⚙️ Backend (Supabase) Implement: - **Recipes table** - **CRUD endpoints** via Supabase client - **Input validation** - **Pagination** for recipe list - **Auth guard** for protected screens ## ⚠️ Edge Cases (MVP Level) - Network failure fallback - Offline cached data - Invalid form input - Missing recipe state - Slow requests (loading placeholders) ## 🎁 Developer Experience - **Inline comments** - **TODO markers** for future sprints - **README** explaining: - Setup - Running on device - Extending features ## 🔧 Deliverable Format Generate a complete Expo project ready to run with: - Full folder structure - All files populated - No placeholders or pseudocode ## 🎯 Sprint 1 Extra Credit - Simple theme engine (light/dark) - Subtle animations on modal open, list changes - Command palette (CMD+K) for quick navigation (mobile-friendly version) **Now build Sprint 1 of the Recipe Mobile App following everything above.**

React + PWA + Chart.js + Tailwind

### Mobile-First Fitness Tracker App **Tech Stack:** React Native + Expo + Supabase + NativeWind (Tailwind for RN) + Expo Router + Reanimated **Goal:** Generate a complete, production-ready mobile app. **Platform:** Mobile only (iOS + Android). No web version. You are an expert full-stack engineer. Build the **entire mobile Fitness Tracker app** using Expo + Supabase with the following requirements: --- ## 📱 1. Mobile App Requirements (Expo) - Use **Expo SDK (latest)** with **Expo Router** for navigation. - Styling with **NativeWind** (Tailwind). - Animations via **Reanimated** + **Moti** (micro-interactions). - Charts using **Victory Native** or **React Native Charts Wrapper**. - Use **expo-secure-store** for Supabase session persistence. - Use **AsyncStorage** for offline caching of recent workouts. - Include Haptics (expo-haptics) for key actions. ### Screens (must be fully implemented) 1. **Auth:** Login, Register, Forgot Password 2. **Dashboard:** Summary metrics + charts 3. **Workouts:** - List - Create/Edit - Detail view 4. **Activity Log:** - List - Add activity entry 5. **Metrics:** - Charts for weekly/monthly activity 6. **Settings:** - Theme toggle (light/dark + accent color) - Logout - Account Info --- ## 🗄️ 2. Supabase Backend (Required) Use Supabase for: - Auth (email/password) - Database (Postgres) - Row Level Security (RLS) - Edge Functions (optional example) ### Tables (SQL must be included) Create the following tables in `/supabase/schema.sql`: **workouts** - id (uuid) - user_id (uuid FK → auth.users) - title - type - duration_min - calories - notes - date (timestamp) **activity_entries** - id (uuid) - user_id - workout_id (uuid FK) - steps (int) - heart_rate_avg (int) - created_at (timestamp default now()) ### RLS Policies - Users can only access rows where `user_id = auth.uid()`. ### Seed Data Include `/supabase/seed.sql` with: - 2 test users - 10 workouts each - 30 activity entries --- ## 🔌 3. App Logic Requirements ### Authentication - Supabase Auth (email/password only). - Persist session with SecureStore. - Auto-refresh session on app load. ### CRUD (Supabase Client) Implement full CRUD for: - Workouts - Activity Entries ### Offline Support - Cache last 20 workouts in AsyncStorage. - If network offline → load cached data with a banner. ### Error/Loading States Must include: - Skeleton loaders - Retry UI - Toasts for errors - Empty states for all lists --- ## 🎨 4. UI & UX - Clean, modern UI inspired by Notion / Linear. - Smooth transitions + micro animations. - Reusable UI primitives: - Button - Input - Card - Sheet/Modal - ListItem - ChartCard - Theme Engine: - Light/Dark mode - Accent color selector --- ## 🧪 5. Testing - Unit tests for utilities + hooks - Component tests with React Native Testing Library - Basic E2E flow outline (Detox config + sample test) --- ## 📦 6. Project Structure Project root: /app (Expo Router pages) /components /hooks /lib/supabase /styles /utils /supabase (schema.sql, seed.sql, policies.sql) /tests --- ## 📚 7. Developer Experience Include: - Clear inline comments - TODO markers - Full README with: - Setup instructions - Running Supabase locally - App development instructions - How to run tests - Where to extend features --- ## 🔥 Deliverable Format Generate **complete, runnable project source code** for the mobile app: - All files fully implemented (no placeholders). - All screens, components, hooks, utils, logic included. - Schema + seed scripts included. - Supabase client configured. - App should run with: - `npm install` - `npx supabase start` - `npx expo start` Now generate the **full Mobile Fitness Tracker application** following everything above.

Next.js + Tailwind + Stripe

### Bolt.new Prompt — Marketplace Website Sprint 1 (MVP) Tech Stack: Next.js + Tailwind + Stripe Goal: Generate a **minimal Marketplace MVP** with Hero, Featured Products, Product Listing, Cart, and Stripe Checkout. You are an expert-level full-stack engineer specializing in Next.js + Tailwind + Stripe, building production-ready, cleanly structured applications for vibe coders who want everything done in one shot with minimal Bolt.new tokens. --- ### 📌 Marketplace Info — Plug Your Data Here MARKETPLACE_NAME = "Your Marketplace Name" MARKETPLACE_TAGLINE = "A short tagline that hooks users" MARKETPLACE_DESCRIPTION = "Brief description of your marketplace" FEATURED_PRODUCTS = [ { name: "Product 1", description: "Brief description", price: 29.99, image_url: "/images/product1.jpg", seller: "Seller 1" }, { name: "Product 2", description: "Brief description", price: 49.99, image_url: "/images/product2.jpg", seller: "Seller 2" } ] CTA_TEXT = "Start Shopping" CTA_LINK = "/signup" PAYMENT_CURRENCY = "USD" --- ### 🔧 Sprint 1 Requirements - **Hero section** with MARKETPLACE_NAME, MARKETPLACE_TAGLINE, MARKETPLACE_DESCRIPTION, and CTA button linking to CTA_LINK. - **Featured Products section** showing FEATURED_PRODUCTS dynamically. - **Product Listing page** with all featured products. - **Cart and Checkout page** integrated with Stripe (client + server side). - Mobile-first responsive layout. - Tailwind styling + smooth hover/micro animations. - Optional dark mode toggle. --- ### 📦 Architecture - Feature-based structure: /pages /components /hooks /lib /styles - Hooks: `useCart`, `useProducts`, `useStripe`. - `.env.example` for Stripe keys. - Clear comments and TODOs for future extensions. --- ### ⚠️ Edge Cases - Missing product info → placeholder card. - Payment failures → show descriptive error messages. - Slow network → skeleton loaders. - Invalid cart actions → prevent with error feedback. --- ### 🎁 Developer Experience - Inline comments for all major components and hooks. - README: - Setup: `npm install && npm run dev` - Stripe environment setup - How to add/replace featured products - How to extend Sprint 1 for full Marketplace --- ### 🔥 Deliverable - Fully functional Next.js MVP project: - Hero, Featured Products, Product Listing, Cart, Checkout (Stripe) fully implemented. - Tailwind styling + micro-animations. - Ready to run locally: `npm install && npm run dev`. - No placeholders, pseudo-code, or missing logic. --- **Instruction to AI:** “Use the Marketplace info above (`MARKETPLACE_NAME`, `FEATURED_PRODUCTS`, `CTA_TEXT`, `CTA_LINK`, `PAYMENT_CURRENCY`) to generate a **Marketplace MVP**. Include Hero, Featured Products, Product Listing, Cart, Stripe Checkout, responsive Tailwind styling, optional dark mode, and fully runnable code.”

Next.js + Tailwind + Framer Motion

### Bolt.new Prompt — SaaS Landing Sprint 1 (Hero + Features + Pricing) Tech Stack: Next.js + Tailwind + Framer Motion Goal: Generate a lightweight, mobile-first SaaS landing page Sprint 1 with Hero, Features, Pricing, and CTA, fully implemented and styled. You are an expert-level full-stack engineer specializing in Next.js + Tailwind + Framer Motion, building production-grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal Bolt.new tokens. --- ### 📌 SaaS Info — Fill in Your Data Here Use these placeholders to inject your SaaS information: SaaS_NAME = "Your SaaS Name" SaaS_TAGLINE = "A short, compelling tagline that hooks users" SaaS_DESCRIPTION = "Brief description of your SaaS, what problem it solves, and why it's unique" FEATURES = [ { title: "Feature 1", description: "Brief description of feature 1" }, { title: "Feature 2", description: "Brief description of feature 2" }, { title: "Feature 3", description: "Brief description of feature 3" } ] PRICING_TIERS = [ { name: "Basic", price: "$10/mo", description: "Basic plan features" }, { name: "Pro", price: "$30/mo", description: "Pro plan features" }, { name: "Enterprise", price: "Custom", description: "Enterprise plan features" } ] CTA_TEXT = "Get Started Free" CTA_LINK = "https://your-saas.com/signup" --- ### 🔧 Core Sprint 1 Requirements - Hero section with SaaS_NAME, SaaS_TAGLINE, SaaS_DESCRIPTION, and CTA button linking to CTA_LINK. - Features section rendering all FEATURES dynamically. - Pricing section rendering all PRICING_TIERS dynamically. - Mobile-first responsive layout with Tailwind CSS. - Smooth animations using Framer Motion on cards and buttons. - Dark mode toggle (optional). - Loading skeletons for cards on slow networks. --- ### 📦 Architecture - Feature-based folder structure: /pages /components /hooks /lib /styles - Reusable hooks for theme toggle, scroll animations, and CTA tracking. - `.env.example` for any keys or configuration. --- ### ⚠️ Edge Cases - Missing SaaS info → show placeholder text. - Long feature/pricing descriptions → truncate or wrap with tooltip. - Slow network → skeleton loaders. - CTA_LINK invalid → fallback to `#`. --- ### 🎁 Developer Experience - Inline comments in code. - TODO markers for extending sections (Testimonials, Integrations, Footer). - README with: - Setup: `npm install && npm run dev` - Instructions to replace placeholders with real SaaS info. - How to extend sections in future sprints. --- ### 🔥 Deliverable - Fully functional Next.js project for Sprint 1. - Hero, Features, Pricing sections fully implemented. - CTA button navigates to CTA_LINK. - Tailwind styling + Framer Motion animations included. - Ready to run locally: `npm install && npm run dev`. - No placeholders in code, fully runnable. --- **Instruction to AI:** “Use the SaaS info placeholders above (`SaaS_NAME`, `FEATURES`, `PRICING_TIERS`, `CTA_TEXT`, `CTA_LINK`) to generate a **Next.js SaaS Landing Page Sprint 1**. Include Hero, Features, Pricing, responsive Tailwind styling, Framer Motion animations, dark mode toggle, and all code ready to run.”

Next.js + Tailwind + MDX

### Bolt.new Prompt — Blog Platform Sprint 1 (MVP) Tech Stack: Next.js + Tailwind + MDX Goal: Generate a **minimal Blog Platform MVP** with Home, Blog List, Blog Post Detail, Create/Edit Post (CRUD), and Author Profile. You are an expert-level full-stack engineer specializing in Next.js + Tailwind + MDX, building production-ready, cleanly structured applications for vibe coders who want everything done in one shot with minimal Bolt.new tokens. --- ### 📌 Blog Info — Plug Your Data Here BLOG_NAME = "Your Blog Name" BLOG_TAGLINE = "A short tagline that hooks readers" BLOG_DESCRIPTION = "Brief description of your blog, niche, or purpose" AUTHORS = [ { name: "Alice", bio: "Tech writer", avatar_url: "/images/alice.jpg" }, { name: "Bob", bio: "Lifestyle blogger", avatar_url: "/images/bob.jpg" } ] SAMPLE_POSTS = [ { title: "Post 1", summary: "Brief summary", slug: "post-1", content_mdx: "# Hello World", author: "Alice", published_at: "2025-01-01" }, { title: "Post 2", summary: "Brief summary", slug: "post-2", content_mdx: "# Another Post", author: "Bob", published_at: "2025-01-05" } ] CTA_TEXT = "Subscribe" CTA_LINK = "/subscribe" --- ### 🔧 Sprint 1 Requirements - **Home page** with BLOG_NAME, BLOG_TAGLINE, CTA button linking to CTA_LINK. - **Blog List page** rendering SAMPLE_POSTS dynamically. - **Blog Post Detail page** rendering content from `content_mdx`. - **Create/Edit Post page** (CRUD) for authors. - **Author profile page** showing posts by author. - Mobile-first responsive layout. - Tailwind styling + smooth hover/micro animations. - Optional dark mode toggle. --- ### 📦 Architecture - Feature-based structure: /pages /components /hooks /lib /styles - Hooks: `usePosts`, `useAuthors`, `useMDX`. - `.env.example` for any API keys or configurations. - Clear comments and TODOs for future extensions. --- ### ⚠️ Edge Cases - Missing blog info → placeholder text. - Missing MDX content → show fallback message. - Long posts → scrollable container or pagination. - Invalid form input → inline validation with error feedback. - Slow network → skeleton loaders. --- ### 🎁 Developer Experience - Inline comments for components, pages, and hooks. - TODO markers for future features like comments, likes, search. - README: - Setup: `npm install && npm run dev` - How to add/replace sample posts - How to extend Sprint 1 for full Blog Platform --- ### 🔥 Deliverable - Fully functional Next.js MVP project: - Home, Blog List, Blog Post Detail, Create/Edit Post, Author Profile. - Tailwind styling + micro-animations. - MDX fully integrated for post content. - Ready to run locally: `npm install && npm run dev`. - No placeholders, pseudo-code, or missing logic. --- **Instruction to AI:** “Use the Blog info above (`BLOG_NAME`, `AUTHORS`, `SAMPLE_POSTS`, `CTA_TEXT`, `CTA_LINK`) to generate a **Blog Platform MVP**. Include Home, Blog List, Blog Post Detail (MDX), Create/Edit Post (CRUD), Author Profile, responsive Tailwind styling, optional dark mode, and fully runnable code.”

Build a Mexican Restaurant Menu + Live Specials using Next.js 15, WebSockets, Tailwind, Prisma.

## 🧱 System Overview Build a **Mexican Restaurant Menu + Live Specials** webapp using **Next.js 15, Tailwind, Prisma, PlanetScale, WebSockets**. --- ## 🏗 Architecture ### **Frontend** - Next.js App Router - TailwindCSS with custom color palette (turquoise, yellow, red) - Live Specials banner using WebSocket client - Category-based UI (Tacos, Burritos, Bowls, etc.) - Taco Builder modal with ingredient selection - Skeleton loaders + shimmer effect - Framer Motion for transitions --- ### **Backend** - WebSocket server (Edge Runtime) broadcasting specials updates - Prisma ORM connected to PlanetScale - Route handlers for: - `/api/items` - `/api/specials` - `/api/auth` - Cron-triggered endpoint for scheduled activation/deactivation of specials --- ### **Database Schema** ```sql items ( id VARCHAR, name VARCHAR, price DECIMAL, spices INT, category VARCHAR, image TEXT ); specials ( id VARCHAR, title VARCHAR, description TEXT, isActive BOOLEAN, startsAt DATETIME, endsAt DATETIME ); ``` --- ## 📡 Real-Time Features - WebSocket endpoint `/api/specials/live` - When admin edits a special: - WebSocket broadcast triggers banner refresh - Automatic activation based on schedule - Owners see real-time preview in dashboard --- ## 🎨 UI Specs - Vibrant Mexican theme - Large food cards with imagery - Spice meter 🌶 (1–5) - Taco Builder - Ingredient selector - Live price updates - Specials banner at top with pulsing animation --- ## 🔐 Auth - Email/password or magic link - Owner-only dashboard - Public menu is read-only --- ## 🧪 Testing - Jest: scheduled specials activation logic - Cypress: WebSocket banner updates - Snapshot tests for menu layouts --- ## 🛠 bolt.new Build Prompt You are an expert-level full‑stack engineer specializing in **Next.js + Tailwind + Prisma + WebSockets**. Build the full **Mexican Restaurant Menu with Real-Time Specials** application. ### Build the following: - Owner dashboard - CRUD for items - CRUD for specials - WebSocket live-special broadcasting system - Public menu (SEO-optimized, mobile-first) - Taco Builder modal - Image uploads with placeholders - Category pages - Full UI with animations - Service utilities, hooks, reusable components - Prisma models, migrations, seeding - Route handlers for all APIs - Tests (Jest + Cypress) - Deployment-ready configuration Ensure minimal bolt.new tokens while fully implementing all components, routes, APIs, and backend logic.

React + Tailwind

Tech Stack: React + Tailwind Goal: Generate a **production-ready Pomodoro Timer application** with full functionality, modern UI, and responsive design. Optimized for vibe coders who want everything done in one shot with minimal Bolt.new tokens. --- ### 🔧 Core Requirements - Single-page Pomodoro Timer with: - Timer display (minutes:seconds) - Start, Pause, Reset controls - Pomodoro work sessions, short breaks, and long breaks - Configurable session lengths - Session counter showing completed Pomodoros - Optional user settings modal for customizing work/break durations. - Persist timer state locally (e.g., localStorage) to survive page refresh. - Loading, empty, and error states for robustness. --- ### 🎨 UI & Styling - Clean modern styling inspired by **Notion / Linear / Vercel**. - Responsive, mobile-first layout using Tailwind. - Components: Button, TimerDisplay, Modal, Card, ProgressBar. - Dark mode toggle + smooth transitions. - Hover states, micro-animations, and subtle feedback when buttons are clicked. - Pixel-perfect spacing, padding, and alignment. - UI should feel **smooth, calm, and magical → “vibe coder experience”**. --- ### 📦 Architecture - Feature-based folder structure: /components /hooks /pages /styles /utils - Reusable hooks: `useTimer`, `useSettings`, `useLocalStorage`. - Clear separation of concerns for state, UI, and logic. - Config file for environment variables (optional for future features). - Extensible for adding notifications, sound alerts, or analytics. --- ### ⚙️ Backend / API (if any) - Minimal backend logic required. - Include examples of API integration for saving user settings or session history (mock or real endpoints). - Proper HTTP status codes, input validation, and error handling if backend used. --- ### 🧪 Testing - Unit tests for hooks and components. - Integration tests for timer logic and session flows. - E2E tests for critical flows: start, pause, reset, complete Pomodoro. - Use Jest, Vitest, or Playwright. --- ### ⚠️ Edge Cases - Network failures (if any API used) → fallback gracefully. - Invalid input for settings → validation messages. - Page refresh → timer state persists. - Long running timers → handle correctly. - Concurrent timers → prevent conflicts. --- ### 🎁 Developer Experience - Inline comments explaining core logic. - TODO markers for feature extensions (notifications, analytics, theme presets). - README with: - Setup: `npm install && npm run dev` - Explanation of folder structure, hooks, components - How to extend or customize timer settings --- ### 🔥 Extra Enhancements - Subtle animations for session transitions. - Sound or vibration alerts for session start/end (optional). - Quick-access keyboard shortcuts for start/pause/reset. - Light/Dark mode with accent color customization. - Smooth progress bar animations during work/break sessions. --- ### 🔧 Deliverable - Fully functional React + Tailwind Pomodoro Timer. - Ready to run locally: `npm install && npm run dev`. - All components, hooks, pages, and utils implemented. - No placeholders, pseudo-code, or missing logic. - Mobile-first, responsive, and fully styled. --- **Instruction to AI:** “Build a complete Pomodoro Timer app following the requirements above. Include Start/Pause/Reset, configurable work/break durations, Pomodoro counter, dark mode toggle, progress bar animations, responsive Tailwind styling, optional settings modal, local persistence, inline comments, and fully runnable React + Tailwind code.”

React + Markdown + Tailwind

### Bolt.new Prompt — Note Taking App MVP Tech Stack: React + Markdown + Tailwind Goal: Generate a **production-ready Note Taking application** with full CRUD, Markdown support, responsive design, and modern UI. Optimized for vibe coders who want everything done in one shot with minimal Bolt.new tokens. --- ### 🔧 Core Requirements - Single-page and multi-page views for: - Note List / Dashboard - Note Detail / Editor with Markdown rendering - Create/Edit Note (CRUD) - Optional Tag or Folder organization - Realistic sample notes included on first load. - Autosave notes locally to preserve unsaved changes. - Search and filter notes by title or content. - Loading states, empty states, and error boundaries. --- ### 🎨 UI & Styling - Clean modern styling inspired by **Notion / Linear / Vercel**. - Responsive, mobile-first layout using Tailwind CSS. - Components: Button, Card, Modal, Input, Textarea, Tabs, Badge, MarkdownRenderer. - Dark mode toggle + smooth transitions. - Hover states, micro-animations for interactions. - Pixel-perfect spacing, alignment, and padding. - UI should feel **smooth, calm, magical → “vibe coder experience”**. --- ### 📦 Architecture - Feature-based folder structure: components /pages /hooks /lib /styles /utils - Reusable hooks: `useNotes`, `useMarkdown`, `useLocalStorage`. - Clear separation of concerns: UI, state, logic. - Config file for environment variables (optional for future features). - Extensible for future features like cloud sync, collaboration, or notifications. --- ### ⚙️ Backend / API (if needed) - Full CRUD for notes (mock or real backend). - Input validation and proper HTTP status codes. - Pagination for note lists. - Authentication for multi-user support (optional for MVP). - Authorization checks (users can only edit their own notes). - Example API integration for future cloud storage or syncing. --- ### 🧪 Testing - Unit tests for hooks and components. - Integration tests for CRUD flows and note rendering. - E2E tests for creating, editing, deleting, and viewing notes. - Use Jest, Vitest, or Playwright. --- ### ⚠️ Edge Cases - Network failures → fallback to local storage. - Missing note data → show empty state message. - Invalid input → inline validation. - Long Markdown content → scrollable container. - Autosave conflicts → handle gracefully. --- ### 🎁 Developer Experience - Inline comments for hooks, components, and pages. - TODO markers for extensions (collaboration, tags, export/import). - README: - Setup: `npm install && npm run dev` - Folder structure and hook explanations - How to extend Note Taking app for future features --- ### 🔥 Extra Enhancements - Keyboard shortcuts for creating, saving, deleting notes. - Markdown live preview with smooth transitions. - Light/Dark mode with accent color customization. - Subtle animations when opening/closing modals, switching notes. - Autosave feedback and live editing indicators. --- ### 🔧 Deliverable - Fully functional React + Tailwind + Markdown Note Taking App. - CRUD for notes, Markdown rendering, dashboard view. - Dark mode toggle, responsive design, mobile-first layout. - Ready to run locally: `npm install && npm run dev`. - No placeholders, pseudo-code, or missing logic. --- **Instruction to AI:** “Build a complete Note Taking application following the requirements above. Include Note List, Note Detail/Editor, Create/Edit/Delete notes, Markdown rendering, autosave, search/filter, responsive Tailwind styling, dark mode toggle, micro-animations, and fully runnable React + Tailwind code.”

React + Tailwind

You are an expert-level full‑stack engineer specializing in **React + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Social Media** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → "vibe coder experience"**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels "alive" and reactive --- Now build the complete **Social Media** application following everything above.

React + Tailwind + DnD

You are an expert-level full‑stack engineer specializing in **React + Tailwind + DnD**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Project Management** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → "vibe coder experience"**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels "alive" and reactive --- Now build the complete **Project Management** application following everything above.

React + Chart.js + Tailwind

You are an expert-level full‑stack engineer specializing in **React + Chart.js + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Analytics** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → "vibe coder experience"**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels "alive" and reactive --- Now build the complete **Analytics** application following everything above.

React + Tailwind

You are an expert-level full‑stack engineer specializing in **React + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Dashboard** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → "vibe coder experience"**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels "alive" and reactive --- Now build the complete **Dashboard** application following everything above.

React + Tailwind + Stripe

You are an expert-level full‑stack engineer specializing in **React + Tailwind + Stripe**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **E-commerce** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → "vibe coder experience"**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels "alive" and reactive --- Now build the complete **E-commerce** application following everything above.

React + WebSocket + Tailwind

You are an expert-level full‑stack engineer specializing in **React + WebSocket + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Team Chat** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → “vibe coder experience”**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels “alive” and reactive --- Now build the complete **Team Chat** application following everything above.

React + Canvas + WebSocket + Tailwind

You are an expert-level full‑stack engineer specializing in **React + Canvas + WebSocket + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Collaborative Whiteboard** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → “vibe coder experience”**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels “alive” and reactive --- Now build the complete **Collaborative Whiteboard** application following everything above.

React + WebSocket + Chart.js + Tailwind

You are an expert-level full‑stack engineer specializing in **React + WebSocket + Chart.js + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Live Polling** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → “vibe coder experience”**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels “alive” and reactive --- Now build the complete **Live Polling** application following everything above.

React Native, Supabase

## Pricing - **Monthly:** $29 with 7-day trial - **Lifetime:** $129 one-time payment --- You are an expert in **React (Reactive Web App)**, **Supabase**, **Stripe Payment Elements**, secure billing, and subscription lifecycle automation. Generate a complete, production-ready reactive web app with: ## Plans - **$29/month subscription** (7-day trial) - **$129 lifetime** one-time payment ## Tech Stack - React + Vite (or Next.js if shorter) - Supabase (auth + DB + Edge Functions) - Stripe (Payment Elements) - Tailwind (minimal clean styling) --- ## ✅ Required Frontend (Reactive Web App) ### Pages - `/pricing` - `/checkout/:plan` - `/account/billing` ### Features - Live reactive UI using: - Supabase Realtime for subscription updates - Local reactive state for optimistic updates - Payment Elements integration - User session → Stripe customer sync - Dynamic display of trial status, next billing, active plan - Reactive error handling + loading states - Stripe Billing Portal link - Minimal Tailwind UI, but polished ### Hooks - `useSubscription()` — reactive live subscription state - `useCheckout(planType)` — create session, mount Elements, confirm payment - `useBillingPortal()` - Auto-refresh on webhook events via Realtime channels --- ## ⚙️ Backend (Supabase Edge Functions) Implement 3 functions: ### 1. `create-checkout` **Inputs:** `{ user_id, product_type }` Behavior: - Ensure Stripe customer - If monthly → subscription with 7-day trial - If lifetime → one-time payment intent - Return Payment Element params ### 2. `billing-portal` - Return hosted billing portal URL. ### 3. `stripe-webhook` Handle events: - `checkout.session.completed` - `customer.subscription.*` - `invoice.payment_succeeded` - `charge.succeeded` Actions: - Upsert subscription record - Upsert payments record - Sync trial expiration + next billing - Broadcast Supabase Realtime update to frontend - Include idempotency + signature verification --- ## Supabase Database Schema ### `subscriptions` - `id` uuid pk - `user_id` uuid fk → `auth.users` - `stripe_customer_id` text - `stripe_subscription_id` text - `plan_type` text (`'monthly'`, `'lifetime'`) - `status` text - `current_period_end` bigint - `created_at` timestamptz default now() - `updated_at` timestamptz default now() ### `payments` - `id` uuid pk - `user_id` uuid - `stripe_payment_intent` text - `amount` numeric - `product_type` text - `status` text - `created_at` timestamptz default now() ### RLS - User can read their own records only ### Indexes - `user_id` - `stripe_customer_id` --- ## Testing Requirements - Stripe test mode - Monthly plan (trial) - Lifetime one-time - Failed payment - Subscription cancellation - Webhook test events - Provide test card numbers --- ## Deliverables (Generate All Code Now) ### Frontend - Complete React components for all pages - Payment Elements setup - Hooks: subscription, checkout, billing portal - Reactive UI wired to Realtime - Clean Tailwind styling ### Backend - All Edge Functions - SQL migrations - Stripe utilities - Webhook handler with idempotency ### Config - `.env` template - Instructions to run locally + deploy - Stripe Dashboard setup notes --- ## Output Requirements - Fully functional - Production-grade - Minimal tokens - No placeholders - Works out of the box

Vue 3 + Tailwind

You are an expert-level full‑stack engineer specializing in **Vue 3 + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Inventory** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → “vibe coder experience”**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels “alive” and reactive --- Now build the complete **Inventory** application following everything above.

Vue 3 + Tailwind + Calendar

You are an expert-level full‑stack engineer specializing in **Vue 3 + Tailwind + Calendar**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **Booking System** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → “vibe coder experience”**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels “alive” and reactive --- Now build the complete **Booking System** application following everything above.

Vue 3 + Tailwind

You are an expert-level full‑stack engineer specializing in **Vue 3 + Tailwind**, building production‑grade, cleanly architected applications for vibe coders who want everything done in one shot with minimal bolt.new tokens. Build the full **CMS** application with the following requirements: --- #### 🔧 Core Requirements - Fully implement all pages, routes, components, API handlers, hooks, and utils needed. - Include realistic seed data and mock data where necessary. - Provide complete CRUD flows. - Implement robust error handling with descriptive messages surfaced in the UI. - Add loading states, empty states, error boundary components. --- #### 🎨 UI & Styling (Important) - Use clean modern styling inspired by **Notion / Linear / Vercel**. - Ensure pixel‑perfect alignment, spacing, padding, and responsive layout. - Include: - A grid/flex‑based layout - Reusable UI primitives (buttons, inputs, cards, modals, tabs, tables) - Dark mode support - Hover states, transitions, micro‑animations - All UI must feel **smooth, calm, magical → “vibe coder experience”**. --- #### 📦 Architecture - Use feature‑based folder structure with clear separation of concerns. - Add reusable hooks and utilities for data fetching, state, and UI behavior. - Implement a config file for environment variables. - Ensure extensibility for future features. --- #### ⚙️ API & Backend Requirements - Build complete backend logic appropriate for this app type. - Include: - Input validation - Proper HTTP status codes - Pagination for list endpoints - Authentication (mock or real depending on tech stack) - Authorization checks - Include examples for expanding the API. --- #### 🧪 Testing (Must Include) Generate: - Unit tests for components & utilities - Integration tests for API routes - E2E tests for critical flows Use appropriate testing frameworks for the tech stack (e.g., Jest, Playwright, Vitest). --- #### ⚠️ Edge Cases — Must Handle - Network failures - Missing data - Invalid user input - Long loading times - Data sync/race conditions - API rate limits (simulate) --- #### 🎁 Developer Experience Include: - Clear inline comments - TODO markers for extension - A README explaining project structure, setup steps, scripts, and how to extend features --- #### ✨ Deliverable Format Generate **complete project source code**, ready to run locally with: - Full folder structure - Every file populated - No placeholders - No pseudo‑code - Real logic everywhere --- #### 🔥 Extra Enhancements for Vibe Coding - Add shortcuts (e.g., CMD+K command palette) - Add simple theme engine (light/dark + accent color) - Add subtle animations when modals open, buttons click, lists update - Build UI in a way that feels “alive” and reactive --- Now build the complete **CMS** application following everything above.