4 prompts
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
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.
3 prompts
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 + 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
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
9 prompts
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
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
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
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
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.
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.**
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.
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.”
2 prompts
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.”
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.”
5 prompts
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.
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.
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 + 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 + 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.
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.
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.
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.