# FloopFloop — long-form index

> FloopFloop is an AI platform that builds, deploys, and hosts production-ready web apps from a single text prompt. This file is the extended companion to /llms.txt: it includes full descriptions for docs, build categories with their FAQs, and truncated blog post bodies — everything an LLM client needs to answer detailed questions about FloopFloop without fetching every URL.

Canonical site: https://www.floopfloop.com
Languages: English (en), Nederlands (nl), Español (es), Deutsch (de), Français (fr), Italiano (it), Polski (pl), Português (pt), 日本語 (ja), Türkçe (tr), 中文 (zh), 한국어 (ko), Bahasa Indonesia (id)
Every URL below is the English canonical; swap the `/en/` prefix for any other locale code to get the localised version.

## Documentation

### What is FloopFloop?
URL: https://www.floopfloop.com/en/docs/introduction
Section: Getting Started

Learn what FloopFloop is, how it works, and what you can build with it.

### Creating a Project
URL: https://www.floopfloop.com/en/docs/creating-a-project
Section: Getting Started

How to describe your idea, choose a subdomain, and launch your first project.

### Understanding Deployment
URL: https://www.floopfloop.com/en/docs/deployment-steps
Section: Getting Started

What happens behind the scenes when FloopFloop builds and deploys your project.

### Prompt Engineering for FloopFloop
URL: https://www.floopfloop.com/en/docs/prompt-engineering
Section: Getting Started
Last updated: 2026-04-29

Practical patterns and anti-patterns for writing prompts that get production-ready results from FloopFloop in one shot.

### Chat & Refinement
URL: https://www.floopfloop.com/en/docs/chat-and-refinement
Section: Using Your Project

How to use the chat interface to iterate on your project with follow-up prompts.

### Message Queue
URL: https://www.floopfloop.com/en/docs/message-queue
Section: Using Your Project

Queue multiple changes while your project is deploying and manage them with drag-and-drop.

### Project Settings
URL: https://www.floopfloop.com/en/docs/project-settings
Section: Using Your Project

How to rename, archive, or delete your projects and manage project configuration.

### Secrets & Environment Variables
URL: https://www.floopfloop.com/en/docs/secrets
Section: Using Your Project

Store API keys and configuration securely and expose them to your deployed project at runtime.

### Project Rollback
URL: https://www.floopfloop.com/en/docs/rollback
Section: Using Your Project

How to revert your project to a previous deployment version.

### Scheduled Jobs (Cron)
URL: https://www.floopfloop.com/en/docs/cron-jobs
Section: Using Your Project

Run code on a recurring schedule — poll markets, refresh caches, post summaries. FloopFloop pings your own /api/cron/* routes with a project-scoped bearer token.

### Attachments & File Uploads
URL: https://www.floopfloop.com/en/docs/attachments
Section: Using Your Project

Add images, PDFs, and documents to your prompts so the AI can reference them.

### Project Stats & Analytics
URL: https://www.floopfloop.com/en/docs/project-stats
Section: Using Your Project

Monitor traffic, errors, and latency for your live projects in real time.

### Subdomains & Hosting
URL: https://www.floopfloop.com/en/docs/subdomains
Section: Features

How FloopFloop subdomain hosting works and how your projects are served on floop.tech.

### Custom Domains
URL: https://www.floopfloop.com/en/docs/custom-domains
Section: Features

Connect your own domain to a FloopFloop project with CNAME and TXT verification.

### Public & Private Projects
URL: https://www.floopfloop.com/en/docs/public-and-private
Section: Features

Control who can access your project with authentication or make it publicly available.

### Project Library
URL: https://www.floopfloop.com/en/docs/library
Section: Features

Browse public projects created by the community, and clone them to make your own version.

### AI Advisor
URL: https://www.floopfloop.com/en/docs/ai-advisor
Section: Features

Get expert recommendations on SEO, design, performance, accessibility, and more.

### Cryptohopper Integration
URL: https://www.floopfloop.com/en/docs/cryptohopper-integration
Section: Features

Connect a Cryptohopper account so your FloopFloop trading bot can list hoppers and place live orders via the platform's OAuth2 REST API.

### Plans & Credits
URL: https://www.floopfloop.com/en/docs/plans-and-credits
Section: Account & Billing

Understand subscription tiers, what credits are, and how they are spent.

### Managing API Keys
URL: https://www.floopfloop.com/en/docs/managing-api-keys
Section: Account & Billing

Create, view, and revoke API keys from your account settings.

### Team Workspaces
URL: https://www.floopfloop.com/en/docs/team-workspaces
Section: Account & Billing

Invite teammates, share projects and credits, and assign roles.

### Two-Factor Authentication
URL: https://www.floopfloop.com/en/docs/two-factor-auth
Section: Account & Billing

Secure your account with TOTP-based two-factor authentication.

### Referral Program
URL: https://www.floopfloop.com/en/docs/referral-program
Section: Account & Billing

Invite friends to FloopFloop and earn credits when they subscribe.

### Reporting an Issue
URL: https://www.floopfloop.com/en/docs/reporting-issues
Section: Account & Billing

Report a bug or platform issue so the FloopFloop team can investigate.

### FloopFloop CLI
URL: https://www.floopfloop.com/en/docs/cli
Section: Command-Line Interface
Last updated: 2026-04-28

Install the FloopFloop CLI, authorize a device, and drive every project from your terminal — `floop login`, `floop new`, `floop chat`, `floop refine`, and more.

### SDKs and MCP
URL: https://www.floopfloop.com/en/docs/sdks
Section: SDKs & MCP
Last updated: 2026-04-28

Eight official language SDKs (Node, Python, Go, Rust, Ruby, PHP, Swift, Kotlin) plus an MCP server for AI agents — install paths, package manager links, and quickstart snippets per stack.

### API Overview
URL: https://www.floopfloop.com/en/docs/api-overview
Section: API Reference

Introduction to the FloopFloop public API, authentication, and rate limits.

### Authentication
URL: https://www.floopfloop.com/en/docs/api-authentication
Section: API Reference

How to create and use API keys to authenticate with the FloopFloop API.

### Projects
URL: https://www.floopfloop.com/en/docs/api-projects
Section: API Reference

Create, list, update, and manage projects via the API.

### Deployments
URL: https://www.floopfloop.com/en/docs/api-deployments
Section: API Reference

Deploy, rollback, check status, and manage project deployments.

### Custom Domains
URL: https://www.floopfloop.com/en/docs/api-domains
Section: API Reference

Add, verify, and remove custom domains for your projects.

### Secrets
URL: https://www.floopfloop.com/en/docs/api-secrets
Section: API Reference

List, create, update, and delete project secrets via the API. Values are write-only — they are never returned in plaintext.

### AI Advisor (streaming)
URL: https://www.floopfloop.com/en/docs/api-advisor
Section: API Reference

Get expert project advice via streaming chat — SEO, design, accessibility, performance.

### Project Stats
URL: https://www.floopfloop.com/en/docs/api-stats
Section: API Reference

Query CloudWatch-backed traffic, error, and latency metrics for your deployed projects.

### Message Queue
URL: https://www.floopfloop.com/en/docs/api-queue
Section: API Reference

Queue refinement prompts, reorder them, and process the queue to trigger deployments.

### Project Access
URL: https://www.floopfloop.com/en/docs/api-access
Section: API Reference

Toggle a project between public and auth-protected and trigger a redeploy.

### Library & Likes
URL: https://www.floopfloop.com/en/docs/api-library
Section: API Reference

Read public project details from the library and like or unlike them.

### Teams
URL: https://www.floopfloop.com/en/docs/api-teams
Section: API Reference

List the teams you belong to and fetch team details including members.

### Referrals
URL: https://www.floopfloop.com/en/docs/api-referrals
Section: API Reference

Fetch your referral code, history, and conversion stats.

### Usage & Credits
URL: https://www.floopfloop.com/en/docs/api-usage
Section: API Reference

Check credit balances, per-project usage, transaction history, plan and subscription.

### Subdomain Lookups
URL: https://www.floopfloop.com/en/docs/api-subdomains
Section: API Reference

Check subdomain availability and get suggestions during project creation.

### AI Gateway (chat & generate)
URL: https://www.floopfloop.com/en/docs/api-ai-gateway
Section: API Reference

Call FloopFloop's managed LLM gateway from your deployed project — chat completions, single-prompt generation, streaming SSE, automatic model routing. Uses a project-scoped `flp_sk_*` key, separate from your user API key.

### Error Handling
URL: https://www.floopfloop.com/en/docs/api-errors
Section: API Reference

Standard error codes, rate limit headers, and troubleshooting.

## Build with FloopFloop

### Landing Page
URL: https://www.floopfloop.com/en/build/landing-page

Build your Landing Page with AI in under 5 minutes

Create a high-converting landing page with hero sections, testimonials, CTAs, and mobile-responsive design — all generated by AI.

**Example prompts**

- Build a modern SaaS landing page with a hero section, three feature cards with icons, a pricing table with monthly and yearly toggle, a testimonial carousel, and a sticky CTA button. Use a dark theme with green accents.
- Create a product launch landing page for a mobile fitness app. Include an animated phone mockup, an app-store download section, a feature comparison table, social proof stats, and a newsletter signup form.
- Design a waitlist landing page for an AI writing tool. Add a large headline, a short explainer video placeholder, an email capture form with validation, a progress bar showing how many people have signed up, and a FAQ accordion.
- Build a landing page for a local bakery with a full-screen hero image, an about section, a menu grid with categories, an order form, business hours, Google Maps embed placeholder, and Instagram feed section.

**Frequently asked questions**

- **Q:** How long does it take to build a landing page with FloopFloop?
  **A:** Most landing pages are generated and deployed in under 3 minutes. You describe what you want, and the AI writes the code, sets up hosting, and gives you a live URL instantly.
- **Q:** Can I customize the landing page after it's generated?
  **A:** Absolutely. Use the chat interface to request any changes — new sections, different colors, updated copy, additional forms — and FloopFloop will regenerate and redeploy automatically.
- **Q:** Do I need to know how to code?
  **A:** No coding required. FloopFloop generates production-quality code from plain English descriptions. You just describe what you want and iterate through conversation.
- **Q:** Will my landing page be mobile-responsive?
  **A:** Yes. All pages generated by FloopFloop are fully responsive and tested across mobile, tablet, and desktop screen sizes.
- **Q:** Can I connect my own domain?
  **A:** Yes. Every project gets a free floop.tech subdomain, and you can connect your own custom domain through the project settings.
- **Q:** Is the landing page SEO-optimized?
  **A:** FloopFloop generates semantic HTML with proper heading hierarchy, meta tags, alt attributes, and structured data — giving you a solid SEO foundation out of the box.

### Portfolio Website
URL: https://www.floopfloop.com/en/build/portfolio-website

Build your Portfolio Website with AI in under 5 minutes

Showcase your work with a professional portfolio website featuring project galleries, about sections, and contact forms — built by AI in minutes.

**Example prompts**

- Create a minimalist portfolio website for a graphic designer. Include a hero with my name and tagline, a masonry grid gallery of projects with hover effects, an about page with skills list, and a contact form with email validation.
- Build a photographer's portfolio with a full-screen image slider hero, categorized photo galleries with lightbox, an about section with a profile image, a services and pricing page, and a booking inquiry form.
- Design a developer portfolio with a terminal-style hero animation, a projects section with GitHub stats, a skills radar chart, a blog section with markdown support, a timeline of work experience, and a contact form.
- Create a freelance writer's portfolio with featured article cards, client logos, testimonial quotes, a services breakdown with rates, a downloadable resume link, and a project inquiry form.

**Frequently asked questions**

- **Q:** Can I add new portfolio pieces after the site is built?
  **A:** Yes. Just tell the chat to add a new project with its details, and FloopFloop will update your portfolio and redeploy it automatically.
- **Q:** Will visitors be able to contact me through the site?
  **A:** Every portfolio includes a working contact form. You can customize the fields and connect it to your email or any notification service.
- **Q:** Can I password-protect certain portfolio sections?
  **A:** Yes. FloopFloop supports private access controls, so you can lock certain pages or projects behind a password for client-only viewing.
- **Q:** What kind of image galleries are supported?
  **A:** You can have masonry grids, carousels, lightbox viewers, categorized galleries, and full-screen sliders — just describe what you want.
- **Q:** Can I use my own domain name?
  **A:** Yes. You get a free subdomain on floop.tech and can also connect a custom domain like yourname.com.
- **Q:** How do I update content on my portfolio?
  **A:** Use the iterative chat to tell FloopFloop what to change. Say something like 'Add a new project called X with these images' and it handles the rest.

### Blog
URL: https://www.floopfloop.com/en/build/blog

Build your Blog with AI in under 5 minutes

Launch a fully functional blog with categories, search, RSS feeds, and beautiful article layouts — all generated by AI.

**Example prompts**

- Build a personal tech blog with a clean reading experience. Include a homepage with featured and recent posts, category filtering, a search bar, article pages with estimated reading time, a newsletter signup, and an about page.
- Create a food blog with recipe cards that show cooking time, difficulty, and servings. Add a category sidebar, a search function, a favorites feature, a print-friendly recipe view, and a comment section placeholder.
- Design a travel blog with a map-based homepage showing visited destinations, photo-heavy article layouts, a destination guide section, a packing list generator, and social sharing buttons on every post.
- Build a corporate blog for a software company. Include a hero with the latest post, category tabs, author profiles with avatars, related posts sidebar, a CTA banner for the product, and an RSS feed.

**Frequently asked questions**

- **Q:** Can I publish new blog posts through the chat?
  **A:** Yes. You can dictate or paste new articles into the chat, and FloopFloop will add them to your blog with proper formatting and redeploy.
- **Q:** Does the blog support categories and tags?
  **A:** Absolutely. You can organize posts by categories, tags, or any custom taxonomy you describe.
- **Q:** Will my blog have an RSS feed?
  **A:** FloopFloop can generate an RSS feed for your blog so readers can subscribe through their preferred feed reader.
- **Q:** Is the blog SEO-friendly?
  **A:** Yes. Posts are generated with semantic HTML, Open Graph tags, proper heading structure, and clean URLs optimized for search engines.
- **Q:** Can I add images to my blog posts?
  **A:** Yes. You can include image placeholders, link external images, or describe the layout you want and FloopFloop will structure it accordingly.
- **Q:** Does it support multiple authors?
  **A:** Yes. You can set up author profiles with avatars, bios, and individual author pages showing their published articles.

### Newsletter Website
URL: https://www.floopfloop.com/en/build/newsletter-website

Build your Newsletter Website with AI in under 5 minutes

Build a newsletter website with a public archive, subscribe forms, issue delivery by email, and growth analytics — a Substack-style publication on your own domain.

**Example prompts**

- Build a newsletter site: a homepage pitching the newsletter with a subscribe form, a public archive of past issues with clean typography, individual issue pages with share links, and a double-opt-in subscribe flow with a confirmation email.
- Create a newsletter platform where I write issues in markdown, preview them, and publish — publishing emails the issue to all confirmed subscribers and adds it to the public archive. Include an unsubscribe link in every email and a subscriber count on my dashboard.
- Design a curated-links newsletter site: each issue is a list of links with one-paragraph commentary, tagged by topic. The archive is browsable by tag, there's a search box over all past issues, and subscribers can pick weekly or monthly delivery.
- Build a newsletter with a free and a members-only tier: free issues are public, premium issues show a teaser and a paywall prompt, and members sign in to read everything. Show me a dashboard with subscriber growth, open-ready export, and churn per month.

**Frequently asked questions**

- **Q:** Do subscribers get the issues by email?
  **A:** Yes — publishing an issue sends it to every confirmed subscriber and posts it to the public archive at the same time. Every email carries a one-click unsubscribe link (legally required and good practice), and bounced addresses are flagged so your list stays clean.
- **Q:** Why does the public archive matter?
  **A:** It's your growth engine. Email is private — search engines never see it — but an archive page per issue accumulates rankings for every topic you've ever covered, and each becomes a shareable URL. Substack figured this out early: the archive does the marketing, the email does the retention.
- **Q:** Is the subscriber list really mine?
  **A:** It's a table in your own database — export it as CSV any time, no platform permission needed. That's the core difference from publishing on a hosted platform, where the relationship with your readers is ultimately intermediated by someone else's terms.
- **Q:** How does double opt-in work?
  **A:** A new subscriber gets a confirmation email and only joins the list after clicking it. It filters out typos and bots, keeps engagement rates honest, and is required by anti-spam rules in much of the world. Unconfirmed signups expire automatically after a few days.
- **Q:** Can I run a paid tier?
  **A:** Yes — mark issues free or members-only: free issues are fully public, premium ones show a teaser with a join prompt, and signed-in members read everything. Start free until the archive proves the writing has an audience; converting later is a flag on the issue, not a migration.
- **Q:** Why not just use Substack or beehiiv?
  **A:** Substack takes 10% of paid revenue forever and owns your discovery; beehiiv meters by subscriber count. Both are great for starting fast. Building your own wins when the newsletter is part of something bigger — your domain, your design, your data — and when 10% of a growing paid list starts looking like real money.

### Marketing Site
URL: https://www.floopfloop.com/en/build/marketing-site

Build your Marketing Site with AI in under 5 minutes

Build a multi-page marketing website with feature sections, pricing tables, team pages, and conversion-optimized CTAs — powered by AI.

**Example prompts**

- Create a marketing website for a project management SaaS. Include a hero with an animated product demo, a features page with icon cards, a pricing page with three tiers, a customer logos section, case studies, and a contact page.
- Build a marketing site for a mobile banking app. Add a hero with app screenshots, a security features section, a how-it-works timeline, user testimonials with star ratings, a comparison table vs competitors, and a download CTA.
- Design a marketing website for an AI writing assistant. Include a hero with a live demo area, use-case pages for different industries, an integration logos section, a resources hub, and a free-trial signup flow.
- Create a marketing site for a cybersecurity company. Include a threat dashboard hero, service pages, a trust badges section, client case studies, a blog preview, team bios, and a request-a-demo form.

**Frequently asked questions**

- **Q:** Can I create multiple pages on my marketing site?
  **A:** Yes. FloopFloop can generate multi-page sites with navigation — home, features, pricing, about, contact, blog, and any custom pages you need.
- **Q:** Can I add analytics tracking?
  **A:** You can request analytics integration and FloopFloop will add the necessary tracking snippets to your site.
- **Q:** Will the site load fast?
  **A:** FloopFloop generates optimized, production-quality code with efficient asset loading, ensuring fast page loads and good Core Web Vitals scores.
- **Q:** Can I A/B test different versions?
  **A:** You can create multiple variations of your site by asking FloopFloop to generate alternatives, then compare them side by side using different subdomains.
- **Q:** Does it include forms and lead capture?
  **A:** Yes. Contact forms, newsletter signups, demo request forms, and any other lead-capture elements can be included in your marketing site.
- **Q:** Can I embed videos on the marketing site?
  **A:** Yes. You can include video embeds from YouTube, Vimeo, or custom video players anywhere on your site.

### Restaurant Website
URL: https://www.floopfloop.com/en/build/restaurant-website

Build your Restaurant Website with AI in under 5 minutes

Create a mouth-watering restaurant website with menus, online ordering, reservation forms, and photo galleries — all built by AI.

**Example prompts**

- Build a restaurant website for an Italian trattoria. Include a full-screen hero with a food image, a menu organized by appetizers, mains, and desserts with prices, an online reservation form, opening hours, location with map, and a photo gallery.
- Create a fast-casual restaurant site with an online ordering system. Include a menu with item cards, add-to-cart functionality, a checkout flow, delivery and pickup options, nutritional info tooltips, and a loyalty program signup.
- Design a fine dining restaurant website with an elegant dark theme. Add a tasting menu page, a wine list section, a chef's bio with photo, private dining inquiry form, event calendar, and an Instagram feed section.
- Build a coffee shop website with a menu board layout, a 'today's specials' rotating banner, a catering services page, a careers section, a loyalty card signup, and a locations page with hours for multiple branches.

**Frequently asked questions**

- **Q:** Can customers make reservations through the website?
  **A:** Yes. FloopFloop can generate a reservation form with date/time selection, party size, and confirmation — ready to use immediately.
- **Q:** Can I update the menu without technical knowledge?
  **A:** Just tell the chat what to change — add a dish, update a price, remove a seasonal item — and FloopFloop handles the update and redeploy.
- **Q:** Does it support online ordering?
  **A:** Yes. You can request an ordering system with a cart, checkout flow, and order management, all generated from your description.
- **Q:** Can I show multiple locations?
  **A:** Absolutely. FloopFloop can create a locations page with maps, individual hours, and contact details for each branch.
- **Q:** Will the site look good on mobile?
  **A:** Yes. Restaurant sites are fully responsive with mobile-optimized menus, tap-to-call buttons, and easy-to-navigate layouts.
- **Q:** Can I add photo galleries of the food?
  **A:** Yes. Include photo galleries, Instagram feeds, or image carousels to showcase your dishes, ambiance, and events.

### Digital Menu
URL: https://www.floopfloop.com/en/build/digital-menu

Build a Digital QR Menu with AI in under 5 minutes

Build a QR-code digital menu — dishes grouped by category with prices, dietary tags, and a sold-out toggle, editable from a phone. Generated by AI in minutes.

**Example prompts**

- Build a digital menu for my café that I can put behind a QR code on the tables. Group items by category (Coffee, Pastries, Brunch), show prices, let me mark things sold out, and give me an admin area to add or remove dishes. Warm, cream paper look.
- Create a QR-code menu for a cocktail bar. Sections for Signatures, Classics, and Zero-proof, each drink with a short description and price, dietary/vegan tags, and a private admin page to edit everything. Dark candlelit theme.
- Make an online menu for a food truck. One scannable page, items grouped by category with prices in euros, a 'sold out' marker for when we run out, and an admin login so I can update it between stops. Bold and simple.
- Design a restaurant menu page for a trattoria: antipasti, pasta, secondi, and dolci with prices and descriptions, gluten-free and vegetarian tags, and an owner area to reorder dishes and edit the menu. Elegant serif look.

**Frequently asked questions**

- **Q:** Is this the same as a restaurant website?
  **A:** No. A restaurant website is the full marketing site — hero, photos, hours, reservations, about. A digital menu is just the menu itself: the scannable page a diner opens at the table to see what's on offer and the price. If you only need the menu behind a QR code, this is the focused, faster choice; if you need the whole site, pick Restaurant Website.
- **Q:** Can I put it behind a QR code on the tables?
  **A:** Yes — that's the main use. Point a QR code (printed on the table, the door, or a flyer) at the menu's URL; guests scan it and the menu opens instantly on their phone. The layout is mobile-first because that's where it's read.
- **Q:** Can I update prices and dishes myself?
  **A:** Yes. A private admin page (gated by an ADMIN_KEY you set) lets you add items, edit the header, reorder dishes, and mark anything sold out. Changes go live instantly — no reprinting, no agency, no redeploy wait.
- **Q:** Does it handle categories and dietary tags?
  **A:** Yes. Each dish has a category (Starters, Mains, Drinks…) and items group under their category automatically, in the order you set. You can add dietary tags like vegan, gluten-free, or spicy, shown as small pills next to the dish.
- **Q:** Will the menu show up in Google?
  **A:** The menu renders server-side and emits schema.org Menu structured data (sections, dishes, and prices), so search engines can read and potentially surface your menu — not just a screenshot or a PDF that's invisible to search.
- **Q:** Does it take payments or orders?
  **A:** No — it's a menu, not a checkout. It shows dishes and prices for guests to read and order from a server. That keeps it fast and simple; if you want online ordering and a cart, the Online Store or Restaurant Website categories cover that.

### Dashboard
URL: https://www.floopfloop.com/en/build/dashboard

Build your Dashboard with AI in under 5 minutes

Build a data-rich dashboard with charts, KPI cards, real-time updates, and filters — powered entirely by AI.

**Example prompts**

- Create an analytics dashboard with KPI cards for revenue, users, conversion rate, and churn. Include a line chart for monthly trends, a bar chart for top products, a data table with sorting and search, and date-range filters.
- Build a project health dashboard showing active projects in a kanban view, a team workload heatmap, budget burn-down charts, milestone timelines, and an alerts panel for overdue tasks.
- Design a social media analytics dashboard with follower growth charts, engagement rate gauges, top-performing posts grid, audience demographics pie charts, and a content calendar view.
- Create a sales dashboard with a pipeline funnel chart, deal value by stage, rep leaderboard, activity timeline, forecast vs actual comparison, and regional performance map placeholder.

**Frequently asked questions**

- **Q:** Can the dashboard display real-time data?
  **A:** FloopFloop can generate dashboards with auto-refresh intervals and real-time data display patterns. You can configure the data sources after deployment.
- **Q:** What types of charts are supported?
  **A:** Line charts, bar charts, pie charts, area charts, scatter plots, gauges, funnels, heatmaps, and more — just describe what you need.
- **Q:** Can I add filters and date-range pickers?
  **A:** Yes. FloopFloop generates interactive filters, date-range selectors, search bars, and dropdown filters that work with your dashboard data.
- **Q:** Is the dashboard mobile-friendly?
  **A:** Yes. Dashboards are responsive with stacked layouts on mobile, collapsible sidebars, and touch-friendly chart interactions.
- **Q:** Can I protect the dashboard with login?
  **A:** Yes. FloopFloop supports private access controls so only authorized users can view your dashboard.
- **Q:** Can I export data from the dashboard?
  **A:** You can request CSV or PDF export functionality for any table or chart in your dashboard.

### CRM Dashboard
URL: https://www.floopfloop.com/en/build/crm-dashboard

Build your CRM Dashboard with AI in under 5 minutes

Build a customer relationship management dashboard with contact lists, deal pipelines, activity logs, and reporting — no coding required.

**Example prompts**

- Create a CRM dashboard with a contact list table (name, company, email, status), a deal pipeline in kanban view, activity feed showing recent interactions, and summary cards for total deals, won deals, and pipeline value.
- Build a sales CRM with lead scoring, a contact detail page with interaction history, task management for follow-ups, email templates section, and a reporting page with win/loss charts and revenue forecasts.
- Design a real estate CRM with property listings linked to contacts, a showing calendar, a commission tracker, lead source analytics, automated follow-up reminders, and a client portal section.
- Create a small business CRM with customer profiles, a notes and communication log, invoice tracking, a task board, email campaign overview, and a customer satisfaction survey results page.

**Frequently asked questions**

- **Q:** Can I manage contacts and deals in the CRM?
  **A:** Yes. FloopFloop generates a full contact management interface with deal tracking, pipeline views, and activity logging.
- **Q:** Does it include a deal pipeline?
  **A:** Yes. You get a visual kanban-style pipeline where you can track deals through stages like Lead, Qualified, Proposal, Negotiation, and Won.
- **Q:** Can I track interactions with contacts?
  **A:** The CRM includes an activity feed and interaction history so you can log calls, emails, meetings, and notes for each contact.
- **Q:** Is data stored securely?
  **A:** FloopFloop includes a database for your project data, and you can enable private access controls to restrict who can view and modify records.
- **Q:** Can I customize the pipeline stages?
  **A:** Absolutely. Just describe your desired stages in the chat and FloopFloop will regenerate the pipeline to match your sales process.
- **Q:** Does it include reporting?
  **A:** Yes. You can request charts for win/loss ratios, revenue by period, deal velocity, lead sources, and any other metrics you need.

### Project Management Tool
URL: https://www.floopfloop.com/en/build/project-management

Build your Project Management Tool with AI in under 5 minutes

Build a project management app with task boards, timelines, team assignments, and progress tracking — all generated from a prompt.

**Example prompts**

- Create a project management app with a kanban board (To Do, In Progress, Review, Done), task cards with assignees, due dates, and priority labels, a list view toggle, and a project overview dashboard with progress bars.
- Build a project tracker with Gantt chart timeline view, milestone markers, resource allocation table, task dependencies, a team workload view, and a weekly status report generator.
- Design an agile project management tool with sprint boards, backlog management, story point estimation, velocity charts, burndown graphs, daily standup notes, and a retrospective board.
- Create a freelancer's project management dashboard with client-organized projects, time tracking per task, invoiceable hours summary, a Pomodoro timer, file attachment areas, and a client approval workflow.

**Frequently asked questions**

- **Q:** Does it include kanban boards?
  **A:** Yes. FloopFloop can generate drag-and-drop kanban boards with customizable columns, task cards, labels, and filters.
- **Q:** Can I assign tasks to team members?
  **A:** Absolutely. Tasks can include assignees, due dates, priority levels, and status tracking for full team collaboration.
- **Q:** Does it support different project views?
  **A:** You can request kanban, list, timeline, Gantt chart, or calendar views — FloopFloop generates whichever formats you describe.
- **Q:** Can I track time spent on tasks?
  **A:** Yes. Time tracking features can be added to any project management tool, including timers, logged hours, and billable time reports.
- **Q:** Is there a mobile view?
  **A:** All generated apps are fully responsive with touch-friendly task cards and swipe gestures on mobile.
- **Q:** Can I integrate notifications?
  **A:** You can request notification features like due-date reminders, status change alerts, and daily digest summaries.

### Kanban Board
URL: https://www.floopfloop.com/en/build/kanban-board

Build your Kanban Board with AI in under 5 minutes

Build a kanban board with drag-and-drop cards, custom columns, WIP limits, labels, and due dates — a Trello-style board that lives in your own database.

**Example prompts**

- Build a kanban board with columns I can add, rename, and reorder, drag-and-drop cards between columns, and cards with a title, description, colored labels, due date, and assignee. Persist everything to the database so the board survives refresh.
- Create a personal kanban with three fixed columns — backlog, doing, done — a work-in-progress limit of 3 on the doing column that visually blocks adding a fourth card, and a weekly review view listing everything completed in the last 7 days.
- Design a team kanban with swimlanes per project, card assignees with avatar chips, a filter bar (by assignee, label, due date), and an activity log per card recording every move, edit, and comment with timestamps.
- Build a content-pipeline kanban for a marketing team: columns for idea, drafting, review, scheduled, published. Cards carry a target publish date and a checklist; cards in review for more than 3 days get a warning badge, and the published column auto-archives after 30 days.

**Frequently asked questions**

- **Q:** Does drag-and-drop persist?
  **A:** Yes — every move writes the card's column and position to the database immediately, so the board is identical after a refresh or from another device. Position uses an ordering index per column, which keeps reorders cheap even on busy boards.
- **Q:** What are WIP limits and should I use them?
  **A:** A work-in-progress limit caps how many cards a column can hold — the core kanban discipline that turns a board from a to-do list into a flow system. When 'doing' is full, the answer is to finish something, not start more. The limit can warn (soft) or block (hard); teams new to kanban usually start soft.
- **Q:** Can multiple people use the board?
  **A:** Yes — sign-in, card assignees, and per-card activity logs work out of the box. Updates from teammates appear on refresh or a short polling interval; for a small team moving a few dozen cards a day that's indistinguishable from realtime, without the infrastructure complexity.
- **Q:** Can I have more structure than one board?
  **A:** Swimlanes split one board horizontally (per project, per client); multiple boards split contexts entirely (product vs. marketing). Start with one board and labels — most teams discover they needed less structure than they thought, and adding swimlanes later is a one-sentence refinement.
- **Q:** What goes on a card?
  **A:** Title and description as the floor; labels, due date, assignee, and a checklist as the standard set. The activity log records moves and edits so 'when did this stall?' has an answer. Resist card-field sprawl — if every card needs ten fields, the work probably wants a different tool.
- **Q:** Why not just use Trello?
  **A:** Trello is excellent until you hit its shape: per-user pricing for the team, power-ups for basics like swimlanes, and your workflow data living in Atlassian's cloud. Building your own gets exactly your process — your columns, your WIP rules, your review cadence — at flat cost, with cards as database rows you can query and automate against.

### Inventory Tracker
URL: https://www.floopfloop.com/en/build/inventory-tracker

Build your Inventory Tracker with AI in under 5 minutes

Build an inventory management system with stock tracking, low-stock alerts, category management, and reporting — generated by AI.

**Example prompts**

- Create an inventory tracker with a product list table showing name, SKU, quantity, price, and category. Add a low-stock alert panel, a stock history chart, an add/edit product form, and category filters.
- Build a warehouse inventory system with bin-location tracking, barcode scanning placeholder, stock-in/stock-out forms, a reorder-point calculator, supplier contact list, and a monthly stock report.
- Design an e-commerce inventory dashboard with sync status indicators, multi-warehouse stock views, a dead-stock identifier, seasonal demand chart, and bulk-update CSV import form.
- Create a restaurant inventory tracker with ingredient categories, recipe-based consumption estimates, vendor order forms, expiration date tracking, waste log, and weekly cost analysis charts.

**Frequently asked questions**

- **Q:** Can I track stock levels across multiple locations?
  **A:** Yes. FloopFloop can generate multi-location inventory views with per-warehouse quantities and transfer tracking.
- **Q:** Does it alert me when stock is low?
  **A:** You can set reorder points for each product, and the dashboard will highlight items that need restocking.
- **Q:** Can I import products from a spreadsheet?
  **A:** FloopFloop can generate CSV import functionality so you can bulk-upload your existing product catalog.
- **Q:** Does it track stock history?
  **A:** Yes. Every stock change can be logged with timestamps, quantities, and reason codes for full audit trails.
- **Q:** Can I categorize products?
  **A:** Products can be organized by categories, subcategories, tags, or any custom grouping you describe.
- **Q:** Is it suitable for small businesses?
  **A:** Absolutely. FloopFloop generates exactly the complexity you need — from a simple stock list to a multi-warehouse ERP-style tracker.

### Booking System
URL: https://www.floopfloop.com/en/build/booking-system

Build your Booking System with AI in under 5 minutes

Build an appointment booking system with calendar views, time slot management, confirmation emails, and customer records — powered by AI.

**Example prompts**

- Create a booking system for a hair salon. Include a service selection page with durations and prices, a calendar with available time slots, a booking form with client name and phone, a confirmation page, and an admin view of all appointments.
- Build a medical appointment scheduler with doctor profiles, specialty filters, available slots by day, patient registration form, appointment history, and a waiting-list feature.
- Design a coworking space booking app with room listings, hourly and daily rate toggles, a visual floor plan, equipment add-ons, a booking cart, and a usage report dashboard.
- Create a fitness class booking system with a weekly schedule grid, class descriptions and instructor bios, capacity indicators, a waitlist when classes are full, and a member check-in interface.

**Frequently asked questions**

- **Q:** Can customers book appointments online?
  **A:** Yes. FloopFloop generates a full booking flow — service selection, date/time picker, customer details, and confirmation — all accessible from your live URL.
- **Q:** Does it support multiple services or providers?
  **A:** Absolutely. You can set up multiple services with different durations and prices, and assign them to different staff members or rooms.
- **Q:** Can I manage bookings from an admin panel?
  **A:** Yes. The generated system includes an admin view where you can see, confirm, reschedule, or cancel all bookings.
- **Q:** Does it prevent double-bookings?
  **A:** The booking system tracks availability and only shows open slots, preventing scheduling conflicts.
- **Q:** Can customers cancel or reschedule?
  **A:** You can include self-service rescheduling and cancellation features with configurable notice periods.
- **Q:** Does it send confirmation messages?
  **A:** FloopFloop can generate confirmation pages and notification triggers that you can connect to email or SMS services.

### Tournament Bracket
URL: https://www.floopfloop.com/en/build/tournament-bracket

Build a Tournament Bracket with AI in under 5 minutes

Run a single-elimination tournament with a live bracket, seeded draw, and score reporting that advances winners automatically — built by AI in minutes.

**Example prompts**

- Build a single-elimination tournament bracket for our office FIFA cup. Let me add up to 16 players, draw a seeded bracket so the top seeds can't meet until the final, report scores per match, and have winners advance automatically to a champion banner.
- Create a tournament bracket site for a local pool league with 8 teams. Show the bracket as columns from round one to the final, let me enter scores, and lock a result once the next round is played so the bracket stays consistent.
- Make a knockout bracket for a Smash Bros night. Add players, generate the matchups, track scores on my phone between games, and show everyone the live bracket and the eventual champion. Use a bold arena scoreboard look.
- Build a beer-pong tournament bracket for a party with an admin desk to manage the roster and report results, plus a public view friends can refresh to follow who's winning.

**Frequently asked questions**

- **Q:** How many entrants does the bracket support?
  **A:** Single-elimination brackets of 4, 8, or 16 entrants. You add the roster, then draw the bracket — classic seeding places the top seeds so they can only meet in the final.
- **Q:** Do winners advance automatically?
  **A:** Yes. When you report a match score, the winner is placed into the next round automatically and the bracket re-renders. Play continues until the final decides a champion.
- **Q:** Can I fix a score I entered wrong?
  **A:** You can correct a result until the next round has been scored — at which point the bracket locks that match to keep downstream results consistent. Correct the later result first if you need to go back further.
- **Q:** Who can report scores?
  **A:** Score reporting and roster management live behind an admin key you set, so only the organizer changes results. Everyone else gets a live read-only view of the bracket they can refresh.
- **Q:** Can people follow along live?
  **A:** Yes. The public bracket page reflects the latest scores and the champion as soon as you report them, so spectators just refresh the shared link to follow the action.
- **Q:** Do I need to code or host anything?
  **A:** No. FloopFloop generates the bracket logic, the score-reporting flow, the admin desk, and the database, then deploys it to a live URL. Refine it by chat.

### Petition Page
URL: https://www.floopfloop.com/en/build/petition-page

Build a Petition Page with AI in under 5 minutes

Launch a petition that collects signatures behind your cause — a goal meter, a public roll of signers, and an admin desk to manage it, built by AI in minutes.

**Example prompts**

- Build a petition page to save our local library. Add a headline, a recipient line ('A petition to the City Council'), a summary explaining why it matters, a signature goal of 5,000 with a progress meter, and a sign form that collects name, optional location, and an optional comment. Show recent signatures below.
- Create an open letter petition demanding climate action from a company. Include a long-form statement, a 'we the undersigned' framing, a live signature counter that re-targets the next milestone past the goal, and a one-click sign form. Use a bold activist red theme.
- Make a neighborhood petition to add a crosswalk near the school. Collect signatures with name and street, show a tally toward a 250-signature goal, and let me close the petition once we deliver it. Keep it clean and civic.
- Build a petition to reinstate a beloved menu item. Add a punchy summary, a signature wall with supporter comments, social-share-friendly metadata, and an admin login so I can edit the ask and close signing when we win.

**Frequently asked questions**

- **Q:** How do people sign the petition?
  **A:** Visitors enter their name (location and a short comment are optional) and tap one button — no account needed. Each browser can sign once, and the signature count updates instantly toward your goal.
- **Q:** Can I stop people from signing more than once?
  **A:** Yes. Signatures are de-duplicated per browser and rate-limited per network, so casual double-signing and basic spam are blocked while keeping the one-tap experience that maximizes real signatures.
- **Q:** What happens when we pass the goal?
  **A:** The progress meter automatically re-targets the next milestone (e.g. 100 → 250 → 500) so the page keeps showing momentum instead of pinning at 100%. You can also raise the goal yourself from the admin desk.
- **Q:** Can I edit the petition or close it later?
  **A:** Yes. A private admin page (protected by a key you set) lets you edit the title, recipient, summary, and goal, and open or close signing whenever you like — changes go live instantly.
- **Q:** Will signers' details be public?
  **A:** Signers choose whether their name appears on the public list when they sign. Names are shown as a roll of supporters; the page never exposes anything a signer didn't opt to display.
- **Q:** Do I need to code or host anything?
  **A:** No. FloopFloop generates the petition, sets up the database that stores signatures, and deploys it to a live URL — describe what you want and iterate by chat.

### Testimonial Wall
URL: https://www.floopfloop.com/en/build/testimonial-wall

Build a Testimonial Wall with AI in under 5 minutes

Build a moderated 'wall of love' that collects and showcases customer testimonials with star ratings — submissions reviewed before they go live, built by AI in minutes.

**Example prompts**

- Build a 'wall of love' testimonial page for my SaaS. Show approved testimonials in a masonry grid with star ratings, the person's name, and their role/company. Add a submit form where customers leave a name, role, 1–5 star rating, and a quote — and hold new submissions for my approval before they appear.
- Create a testimonials page for a freelance designer. Display client quotes as cards with photos and 5-star ratings, let me feature my best ones at the top, and give me an admin area to approve, hide, or delete submissions.
- Make a customer reviews wall for an online course. Collect a name, headshot URL, rating, and testimonial, route everything through a moderation queue, and render the approved ones server-side so they show up in Google.
- Build a warm, friendly testimonial wall for a wedding photographer with a soft palette, gold stars, and quote cards. Include a submit form and an admin login so only approved testimonials go public.

**Frequently asked questions**

- **Q:** Are new testimonials shown automatically?
  **A:** No — and that's the point. Every submission lands in a moderation queue and stays private until you approve it from the admin desk, so spam or off-tone messages never hit your public wall.
- **Q:** How do customers leave a testimonial?
  **A:** A built-in form collects their name, role or company, a 1–5 star rating, the quote, and an optional photo URL. They submit in seconds; you decide what goes live.
- **Q:** Can I highlight my best testimonials?
  **A:** Yes. You can 'feature' approved testimonials so they sort to the top of the wall, and hide or delete any that are no longer relevant — all from the admin area.
- **Q:** Will the testimonials help my SEO?
  **A:** Approved testimonials are rendered server-side, so they appear in the initial HTML that Google and AI crawlers read — your social proof becomes indexable content, not invisible client-side text.
- **Q:** Is it protected against spam?
  **A:** Submissions are rate-limited per network and the moderation queue means nothing is public without your say-so, so a spam burst clogs a private queue at worst — never your live wall.
- **Q:** Do I need to code or set up a database?
  **A:** No. FloopFloop generates the wall, the submission form, the moderation desk, and the database that stores everything, then deploys it to a live URL. Refine it by chat.

### Ask Me Anything Page
URL: https://www.floopfloop.com/en/build/ask-me-anything

Build an Ask Me Anything Page with AI in under 5 minutes

Build an anonymous 'ask me anything' question box — visitors send questions with no account, you answer the good ones, and answered Q&A publish to a public page. AI-generated in minutes.

**Example prompts**

- Build an anonymous 'ask me anything' page for my profile. A clean box where anyone can send me a question without signing up, an admin area where I answer the good ones, and a public feed of answered questions shown as Q&A. Bold blue theme, big friendly headline.
- Create an anonymous question box like NGL or Tellonym that I can link in my Instagram bio. Visitors ask anonymously, I get a private inbox, and answered questions appear publicly as a thread. Punchy pink look, mobile-first.
- Make an AMA page for a creator: an anonymous ask form, a moderation inbox where I answer, hide, or delete questions, and a public list of answered Q&A with the date. Dark neon theme.
- Design an anonymous Q&A page for a developer doing an 'ask me anything about my career'. Anonymous submit box, admin login to post answers, and answered questions rendered server-side so they show up in Google. Green theme, monospace accents.

**Frequently asked questions**

- **Q:** Is it really anonymous for the person asking?
  **A:** Yes. Visitors type a question and send it — no name, no email, no account. That's the whole point: removing friction and identity is what gets people to actually ask. You only ever see the question text, never who sent it.
- **Q:** Do questions appear automatically?
  **A:** No. Every question lands in a private inbox and stays hidden until you write an answer. Posting your answer is what publishes the question — so nothing goes public without you replying to it, and you can hide or delete anything you don't want to touch.
- **Q:** Can I link it in my bio like NGL or Tellonym?
  **A:** Yes — that's the most common use. Drop the URL in your Instagram, TikTok, or X bio; followers tap through and ask anonymously. The page is mobile-first because that's where it's opened, and it's yours on your own domain instead of a third-party app's.
- **Q:** Will the answered questions help my SEO?
  **A:** Answered Q&A render server-side, so they're in the initial HTML that Google and AI crawlers read. A page of real questions and your answers becomes indexable content — useful long-tail Q&A that surfaces in search and in AI answers, not invisible client-side text.
- **Q:** How is it different from a guestbook or a testimonial wall?
  **A:** A guestbook auto-posts casual messages; a testimonial wall collects named, star-rated praise. An ask-me-anything page is a two-way Q&A: anonymous questions in, your answers out, and only the pairs you reply to go public. The reply is the product.
- **Q:** Is it protected against spam?
  **A:** Submissions are rate-limited per network and everything is held in a private inbox, so a spam burst clogs a queue only you see — never your public page. You publish a question by answering it, so junk simply never gets a reply.

### Online Store
URL: https://www.floopfloop.com/en/build/online-store

Build your Online Store with AI in under 5 minutes

Launch an online store with product listings, shopping cart, checkout flow, and order management — all AI-generated and instantly deployed.

**Example prompts**

- Create an online store for handmade jewelry. Include a product grid with images, prices, and categories, a product detail page with size selector, a shopping cart sidebar, a checkout form with shipping and payment fields, and an order confirmation page.
- Build a digital products store selling design templates. Include product cards with preview images, instant download after purchase, a search and filter system, a bestsellers section, bundle deals, and a customer reviews section.
- Design a clothing store with a lookbook hero, category navigation (men, women, kids), product pages with size guides and color swatches, a wishlist feature, a cart with quantity adjustment, and a returns policy page.
- Create a pet supplies store with featured products carousel, category pages, product filtering by pet type and price range, a subscription auto-ship option, a blog with pet care tips, and a loyalty points display.

**Frequently asked questions**

- **Q:** Can customers purchase products through the site?
  **A:** FloopFloop generates the full storefront with cart and checkout UI. You can connect your preferred payment processor after deployment.
- **Q:** Does it support product variants like sizes and colors?
  **A:** Yes. Product pages can include variant selectors for size, color, material, or any custom option you describe.
- **Q:** Can I manage orders?
  **A:** An admin panel with order listing, status updates, and customer details can be included in your store.
- **Q:** Is the store mobile-optimized?
  **A:** Yes. All stores are responsive with mobile-friendly navigation, product browsing, and checkout flows.
- **Q:** Can I add promotional features?
  **A:** You can request discount code fields, sale badges, bundle pricing, and promotional banners — just describe them in the chat.
- **Q:** Does it include product search?
  **A:** Yes. FloopFloop can generate search bars with auto-suggest, category filtering, price ranges, and sorting options.

### Marketplace
URL: https://www.floopfloop.com/en/build/marketplace

Build your Marketplace with AI in under 5 minutes

Build a two-sided marketplace with seller listings, buyer browsing, search, reviews, and user profiles — generated by AI.

**Example prompts**

- Create a freelance services marketplace with seller profiles, service listings with pricing tiers, a search with category and price filters, buyer messaging, a review and rating system, and a featured sellers section.
- Build a local handmade goods marketplace with vendor shops, product listings with photos, a map-based local search, category browsing, a shopping cart, and a community events board.
- Design a digital asset marketplace for stock photos, templates, and fonts. Include preview/download pages, a seller upload form, license type selection, a trending section, and a buyer purchase history.
- Create a rental marketplace for equipment and tools. Include availability calendars, daily/weekly pricing, a deposit system, renter verification placeholder, item condition ratings, and a dispute resolution page.

**Frequently asked questions**

- **Q:** Can sellers create their own listings?
  **A:** Yes. FloopFloop can generate seller dashboards with listing creation forms, image uploads, pricing, and inventory management.
- **Q:** Does it include search and filtering?
  **A:** Marketplaces include robust search with filters for category, price range, location, rating, and any custom attributes you define.
- **Q:** Can buyers leave reviews?
  **A:** Yes. A review and rating system with star ratings, written reviews, and seller response capabilities can be included.
- **Q:** How do I handle payments?
  **A:** FloopFloop generates the marketplace UI and checkout flows. You can connect payment processors and escrow services after deployment.
- **Q:** Can I feature certain sellers or products?
  **A:** Absolutely. Featured sections, promoted listings, and curated collections can all be part of your marketplace design.
- **Q:** Is it suitable for a niche marketplace?
  **A:** Yes. Whether it is art, services, rentals, or digital goods, you can describe your niche and FloopFloop will generate a marketplace tailored to it.

### Subscription Box Service
URL: https://www.floopfloop.com/en/build/subscription-box

Build your Subscription Box Service with AI in under 5 minutes

Build a subscription box website with plan selection, recurring billing UI, box customization, and subscriber management — all AI-generated.

**Example prompts**

- Create a subscription box website for artisan coffee. Include a hero with an unboxing photo, plan options (monthly, quarterly, yearly), a taste-preference quiz, a past-boxes gallery, subscriber testimonials, and a gift subscription option.
- Build a beauty subscription box site with a style quiz, three subscription tiers with included products, a how-it-works section, an unboxing video area, a referral program, and a subscriber dashboard with delivery tracking.
- Design a book subscription service with genre selection, a monthly pick reveal page, a community discussion board, reading challenges, author spotlight section, and a manage-subscription page.
- Create a pet subscription box site with pet profile setup (breed, size, allergies), box preview with toy and treat options, a past-shipments timeline, a reviews section, and a pause/cancel subscription flow.

**Frequently asked questions**

- **Q:** Can customers choose a subscription plan?
  **A:** Yes. FloopFloop generates plan selection pages with different frequencies, pricing, and feature breakdowns.
- **Q:** Does it support box customization?
  **A:** You can include preference quizzes, size selectors, taste profiles, and other customization options for subscribers.
- **Q:** Can subscribers manage their account?
  **A:** A subscriber dashboard with plan management, delivery tracking, pause/cancel options, and payment updates can be included.
- **Q:** Does it include a gift option?
  **A:** Yes. Gift subscriptions with custom messages, recipient details, and delivery scheduling can be part of your site.
- **Q:** Can I showcase past boxes?
  **A:** FloopFloop can generate a past-boxes gallery with photos, included items, and subscriber reactions.
- **Q:** How does billing work?
  **A:** FloopFloop generates the subscription UI and plan selection. You connect your preferred billing processor (like Stripe) for actual payment processing.

### SaaS Analytics Dashboard
URL: https://www.floopfloop.com/en/build/saas-analytics-dashboard

Build your SaaS Analytics Dashboard with AI in under 5 minutes

Build a SaaS analytics dashboard with MRR tracking, churn metrics, cohort analysis, and user funnels — generated entirely by AI.

**Example prompts**

- Create a SaaS analytics dashboard with MRR and ARR cards, a revenue growth line chart, churn rate by month, customer acquisition funnel, a cohort retention heatmap, and a plan distribution pie chart.
- Build a product analytics dashboard with daily/weekly/monthly active users, feature adoption rates, user session heatmap, event tracking table, A/B test results comparison, and a real-time active users counter.
- Design a SaaS metrics dashboard with LTV/CAC ratio, payback period chart, expansion revenue breakdown, logo churn vs revenue churn, trial-to-paid conversion funnel, and a geographic user distribution map.
- Create a startup metrics dashboard with runway calculator, burn rate chart, headcount growth timeline, OKR progress bars, investor update generator, and a key metrics comparison table vs last quarter.

**Frequently asked questions**

- **Q:** What SaaS metrics can I track?
  **A:** MRR, ARR, churn rate, LTV, CAC, cohort retention, conversion rates, active users, and any custom metric you describe.
- **Q:** Can I create investor-ready reports?
  **A:** Yes. FloopFloop can generate formatted dashboards suitable for investor updates with key metrics, charts, and trend analysis.
- **Q:** Does it support cohort analysis?
  **A:** Absolutely. Cohort retention heatmaps, cohort revenue charts, and segmented analysis views can all be included.
- **Q:** Can I compare metrics across time periods?
  **A:** Yes. Period comparison, year-over-year charts, and trend indicators with percentage changes are supported.
- **Q:** Is the dashboard real-time?
  **A:** FloopFloop generates dashboards with auto-refresh patterns. You connect your data sources, and the dashboard updates accordingly.
- **Q:** Can I share the dashboard with my team?
  **A:** Yes. Deploy it on a custom subdomain and use access controls to share with your team or investors.

### Invoicing Tool
URL: https://www.floopfloop.com/en/build/invoicing-tool

Build your Invoicing Tool with AI in under 5 minutes

Build a professional invoicing tool with invoice creation, client management, payment tracking, and financial reports — all AI-generated.

**Example prompts**

- Create an invoicing tool with a create-invoice form (client, line items, tax, discount), a PDF-preview of the invoice, a client list with contact details, an invoice history table with status filters (draft, sent, paid, overdue), and a monthly revenue chart.
- Build a freelancer invoicing app with time-tracking integration, hourly rate calculator, recurring invoice scheduler, expense tracking, profit/loss summary, and a client payment portal.
- Design an invoicing dashboard for a small agency with project-based billing, multi-currency support, invoice templates, payment reminders, aged receivables chart, and a tax summary report.
- Create a subscription invoicing tool with recurring billing schedules, usage-based line items, credit note creation, payment method management, revenue recognition chart, and a Stripe-style invoice page.

**Frequently asked questions**

- **Q:** Can I create professional invoices?
  **A:** Yes. FloopFloop generates invoice creation forms with line items, taxes, discounts, client details, and a polished preview layout.
- **Q:** Does it track payment status?
  **A:** Invoices can be tracked through statuses like Draft, Sent, Paid, and Overdue with automatic status indicators.
- **Q:** Can I manage clients?
  **A:** Yes. A client directory with contact details, invoice history, and total billed amounts can be included.
- **Q:** Does it support recurring invoices?
  **A:** FloopFloop can generate recurring invoice schedules with configurable frequencies and automatic generation dates.
- **Q:** Can I generate financial reports?
  **A:** Revenue charts, aged receivables, profit/loss summaries, and tax reports can all be part of your invoicing tool.
- **Q:** Does it support multiple currencies?
  **A:** Yes. You can request multi-currency support with exchange rate displays and currency conversion.

### Time Tracker
URL: https://www.floopfloop.com/en/build/time-tracker

Build your Time Tracker with AI in under 5 minutes

Build a time-tracking app with one-click timers, clients and projects, weekly timesheets, and billable-hours reports you can export straight into invoicing — generated by AI.

**Example prompts**

- Build a freelancer time tracker: a large start/stop timer with a task description, projects grouped by client, an hourly rate per project, a weekly timesheet view, and a monthly report of billable hours and earnings per client with CSV export.
- Create a timesheet app where I log hours in a weekly grid — rows are projects, columns are days. Include a copy-last-week button, per-project hour budgets with a warning at 80%, and a manager view listing the team's submitted weeks with an approve button.
- Design a focus tracker that combines a pomodoro timer with automatic logging: every completed 25-minute session is recorded against the selected project. Show a daily focus-hours chart, a streak counter, and a Monday-morning email summarising last week.
- Build an agency time tracker with a billable/non-billable toggle per entry, project budgets in hours, per-person utilisation, and a profitability view comparing tracked hours times rate against each project's fixed quote.

**Frequently asked questions**

- **Q:** Timer or manual entry — which does it support?
  **A:** Both, because real workflows mix them: a start/stop timer for deep work as it happens, and a weekly grid for filling in the meeting you forgot to track. Entries from either path land in the same table, so reports don't care how the hours got there.
- **Q:** Can I set different rates per client or project?
  **A:** Yes — rates attach to projects (or clients, with per-project overrides), so the monthly report multiplies each tracked hour by the right figure. Mixed billing is normal: a retainer client at a blended rate next to a project client at a premium rate, with non-billable internal work excluded from totals.
- **Q:** What happens if I forget to stop a timer?
  **A:** The running timer is visible on every page, and every entry stays editable afterwards — trim the eight-hour 'lunch' entry down to what you actually worked. You can also add an auto-stop rule that pauses any timer running longer than a threshold you set and flags it for review.
- **Q:** Can it produce reports I can invoice from?
  **A:** That's the point of tracking: a per-client monthly report with billable hours, rate, and the resulting amount — exportable as CSV, ready to paste into an invoice or feed an invoicing tool. If you build your invoicing with FloopFloop too, the two apps can share the same database.
- **Q:** Does it work for a team, not just me?
  **A:** Yes — accounts per person, a manager view of everyone's submitted weeks, approvals, and per-person utilisation (billable hours against capacity). Start solo and add the team layer later; the data model doesn't change, only the views.
- **Q:** Why not just use Toggl, Harvest, or Clockify?
  **A:** They're good products with per-seat pricing and someone else's workflow. If their rounding rules, report shapes, and integrations match yours, use them. Building your own wins when you have opinions: your country's overtime rules, your agency's utilisation formula, your client's mandated timesheet format — and a flat cost regardless of team size.

### Email Marketing Tool
URL: https://www.floopfloop.com/en/build/email-marketing-tool

Build your Email Marketing Tool with AI in under 5 minutes

Build an email marketing dashboard with campaign management, subscriber lists, template editing, and performance analytics — powered by AI.

**Example prompts**

- Create an email marketing dashboard with a campaign list (name, status, open rate, click rate), a drag-and-drop email template builder placeholder, a subscriber list with segments, and a campaign analytics page with charts.
- Build an email campaign manager with A/B test setup for subject lines, send-time optimization display, an unsubscribe management page, a bounce rate tracker, and a deliverability health score gauge.
- Design a newsletter management tool with a subscriber growth chart, a rich text email composer, scheduling with timezone support, automated welcome sequence builder, and a top-performing emails leaderboard.
- Create an email marketing analytics dashboard with funnel from sent to opened to clicked to converted, a heatmap showing click positions in emails, a revenue-per-email metric, and a list health monitor.

**Frequently asked questions**

- **Q:** Can I manage subscriber lists?
  **A:** Yes. FloopFloop generates subscriber management with lists, segments, import/export, and subscription status tracking.
- **Q:** Does it include email templates?
  **A:** You can get a template library, a visual editor placeholder, and preview functionality for desktop and mobile views.
- **Q:** Can I track campaign performance?
  **A:** Campaign analytics with open rates, click rates, conversions, bounce rates, and unsubscribes are included.
- **Q:** Does it support A/B testing?
  **A:** FloopFloop can generate A/B test setup interfaces for subject lines, content variations, and send times.
- **Q:** Can I schedule campaigns?
  **A:** Yes. Campaign scheduling with date/time pickers, timezone selection, and recurring send options can be included.
- **Q:** Does it handle unsubscribes?
  **A:** An unsubscribe management page with compliance features and preference centers can be part of your tool.

### Admin Panel
URL: https://www.floopfloop.com/en/build/admin-panel

Build your Admin Panel with AI in under 5 minutes

Build a powerful admin panel with user management, data tables, role-based access, and system configuration — all generated from a prompt.

**Example prompts**

- Create an admin panel with a sidebar navigation, a users table with search, sort, and pagination, a user detail page with edit form, role management (admin, editor, viewer), and a system settings page.
- Build a content management admin panel with a media library grid, article editor with rich text, category taxonomy manager, comment moderation queue, and a site-wide analytics overview.
- Design an e-commerce admin panel with order management table, product CRUD forms, inventory alerts, customer profiles, discount code manager, and a sales report dashboard.
- Create a multi-tenant admin panel with organization switcher, user invitation system, billing management page, feature flag toggles, audit log table, and a system health status page.

**Frequently asked questions**

- **Q:** Can I manage users with different roles?
  **A:** Yes. FloopFloop generates role-based access systems with admin, editor, viewer, and custom role configurations.
- **Q:** Does it include data tables?
  **A:** Admin panels include sortable, searchable, paginated data tables for managing any type of record.
- **Q:** Can I restrict access to the admin panel?
  **A:** Absolutely. Use FloopFloop's private access controls to ensure only authorized team members can access the admin panel.
- **Q:** Does it support CRUD operations?
  **A:** Yes. Create, read, update, and delete interfaces for any data model can be generated — products, users, orders, content, and more.
- **Q:** Can I customize the layout?
  **A:** The sidebar, header, content areas, and page structure are all customizable through the chat interface.
- **Q:** Does it include audit logging?
  **A:** FloopFloop can generate audit log tables tracking who did what, when, with full change history.

### Status Page
URL: https://www.floopfloop.com/en/build/status-page

Build your Status Page with AI in under 5 minutes

Build a public status page with live service indicators, incident timelines, a 90-day uptime heatmap, and a JSON endpoint for external monitors — generated from a single prompt.

**Example prompts**

- Create a SaaS status page with five services (API, Dashboard, Webhooks, CDN, Database), a 90-day uptime heatmap per service, an incident history grouped by day, a JSON endpoint at /api/status for external monitors, and an RSS feed for incident subscribers. Engineering-focused style with monospace headings.
- Build a multi-region status page for a hosting platform. Group services by region (US-East, US-West, EU, APAC), show a system-wide banner that reflects the worst service status, support 'investigating / identified / monitoring / resolved' incident lifecycle, and auto-flip affected services when an incident posts.
- Design a public API health page with one row per endpoint, latency sparklines beside each, a 'last incident' timestamp, a scheduled-maintenance banner that auto-shows for in-window events, and a one-click 'copy as JSON' for the current state.
- Create a status page for a payments processor with three top-level sections (Card Processing, Payouts, Webhooks), composite uptime per section, an incident detail page with a postmortem field, severity tagging (minor / major / critical / maintenance), and an email-the-team admin form for posting an update.

**Frequently asked questions**

- **Q:** Do site visitors see incident updates in real time?
  **A:** Yes. Each incident has its own update timeline, and the public page refreshes on visit. External monitors can hit the JSON endpoint at /api/status as often as their cadence allows.
- **Q:** Can I auto-flip a service to 'degraded' when I post an incident?
  **A:** Yes. Posting an incident with affected services automatically derives the service state from the incident severity — minor maps to degraded, major to partial outage, critical to major outage, maintenance to maintenance.
- **Q:** Can I gate the admin form so only my team can post incidents?
  **A:** A single STATUSPAGE_ADMIN_TOKEN environment variable controls the admin form. Set it in your project secrets; the form rejects everything else with a constant-time compare so the token length can't be probed.
- **Q:** Does it ship a public JSON API I can wire UptimeRobot or Pingdom to?
  **A:** Yes. /api/status returns the worst-system status, the per-service state, and the active incidents — cached 30 seconds at the CDN so even a poorly-behaved poller doesn't pound the DB.
- **Q:** Will the status page auto-resolve incidents when services recover?
  **A:** When an operator marks an incident 'resolved', every affected service snaps back to operational in a single transaction. Set up subsequent updates to surface a postmortem.
- **Q:** Can I keep an RSS feed for incident subscribers?
  **A:** Yes. /feed.xml carries the last 50 incidents with severity, status, and resolution times — discoverable via the <link rel='alternate'> tag on the home page so feed readers and the GitHub release tracker pick it up automatically.

### Poll Maker
URL: https://www.floopfloop.com/en/build/poll-maker

Build your Poll Maker with AI in under 5 minutes

Build an anonymous poll site with a question, up to 10 options, animated tally bars, and one-vote-per-browser dedup — generated from a single prompt.

**Example prompts**

- Create a poll-making tool where anyone can spin up a poll in under 30 seconds. The creator picks a question, 2–10 options, an auto-close time (10m / 1h / 1d / never), and a public-or-unlisted visibility. Voters get a shareable URL, one vote per browser, and animated horizontal bars showing the live tally.
- Build a classroom-friendly poll site for teachers. Add a teacher-mode toggle that surfaces a QR code beside the poll URL, lock a poll to a single classroom IP range, hide the tally until the poll closes, and let the teacher click a 'close now' button to reveal results.
- Design a team-decision tool. Polls can be 'this or that' yes/no with a one-line question, multi-option ('which day works for everyone?'), or ranked-choice. Owner can close a poll early; closed polls show final results with the winning option highlighted.
- Create a public-opinion polling site with a landing feed of the most recent public polls, a 'create poll' flow, anonymous voting with a per-browser cookie dedup, and a JSON endpoint at /api/poll/<id> so embeds can read the tally without scraping HTML.

**Frequently asked questions**

- **Q:** How does one-vote-per-browser dedup work?
  **A:** Each visitor's browser receives a random 32-byte voter token in an HttpOnly cookie. The database enforces UNIQUE(poll_id, voter_token), so a second vote against the same poll returns a friendly 'you already voted' message instead of an error.
- **Q:** Can voters be totally anonymous?
  **A:** Yes. The voter cookie carries no identity — just an opaque random token. We don't tie it to an account or an IP address. Resetting the cookie or visiting in incognito lets a determined user vote again, which is acceptable for casual polls; for strict dedup, swap in IP+UA hashing or require login.
- **Q:** Can I close a poll early?
  **A:** The poll creator receives a one-time owner token in the redirect URL after creating the poll. Bookmarking that URL is the only way to close the poll later — we store sha256(token) in the DB so a leaked dump can't be used to close other people's polls.
- **Q:** Can the poll auto-close at a set time?
  **A:** Yes. Pick an auto-close date when creating the poll. Once the deadline passes, the poll stops accepting votes and shows final results.
- **Q:** Can I embed the live tally elsewhere?
  **A:** The /api/poll/<id> endpoint returns the current question, options, per-option counts, total votes, and closed/expired flags as JSON. Cache hits at 30 seconds at the CDN so embeds can poll cheaply.
- **Q:** Does this work for sensitive votes (board elections, HR, etc.)?
  **A:** The default mode is best-effort dedup for casual polls. For audit-grade voting (board elections, anything legally binding), use a dedicated voting platform — this tool prioritises ease-of-share over verifiable identity.

### Quiz Maker
URL: https://www.floopfloop.com/en/build/quiz-maker

Build your Quiz Maker with AI in under 5 minutes

Build a quiz maker with multiple-choice questions, instant scoring, timers, leaderboards, and shareable result screens — generated from a single prompt.

**Example prompts**

- Build a trivia quiz site where I create quizzes with multiple-choice questions, set a time limit per question, and share a public URL. Players see one question at a time, instant right/wrong feedback, a running score, and a final results screen with a shareable score card.
- Create a classroom quiz tool: the teacher builds a quiz from a reusable question bank, students join with a 6-letter room code, and a leaderboard updates between questions. Include per-student score history and a CSV export of results per quiz.
- Design a 'which X are you?' personality quiz with weighted answers mapping to four result types, an email-capture step before showing the result, and a distinct share image per result type. Add a dashboard showing completions, drop-off per question, and collected emails.
- Build an exam-practice app with a 200-question bank tagged by topic, randomised 30-question practice tests, per-topic score breakdowns, an explanation shown after each answer, and a review mode that resurfaces every question I have ever missed.

**Frequently asked questions**

- **Q:** What scoring modes can a quiz have?
  **A:** Three patterns cover almost every quiz: right/wrong scoring with an optional per-question point value, weighted scoring where each answer adds points toward one of several result buckets (the personality-quiz model), and pass/fail against a threshold (the exam-practice model). Describe which one you need — or combine them, like a trivia quiz with double-point bonus rounds.
- **Q:** Can questions be timed?
  **A:** Yes — per-question countdowns that auto-advance when time runs out, a whole-quiz timer, or both. Timed questions auto-submit the current selection (or count as wrong if nothing is selected), and the results screen can show time-per-question so players see where they hesitated.
- **Q:** Can a group play together, like Kahoot?
  **A:** Yes. A host starts a session and shares a short room code; players join on their phones, answer in sync, and a leaderboard refreshes between questions. For audit-grade synchronous play at conference scale you'd want a dedicated realtime platform, but for classrooms, pub quizzes, and team events the room-code model works well.
- **Q:** Can I capture emails before showing results?
  **A:** That's the classic lead-generation quiz: the visitor answers, then enters an email to unlock their result. Collected emails land in your own database with the result type attached, so you can export a CSV segmented by outcome — people who got 'beginner' get a different follow-up than people who got 'expert'.
- **Q:** Can I reuse questions across quizzes?
  **A:** Yes — a question bank with tags is the right structure: write questions once, tag them by topic and difficulty, then assemble quizzes by picking tags or letting the app draw N random questions per topic. You can also import questions from a CSV instead of typing them in.
- **Q:** How do you stop people from cheating?
  **A:** Shuffle question order and answer order per player, add per-question time limits so answers can't be looked up, and dedup attempts with a per-browser token. A determined cheater can always open a second browser — for casual quizzes that's acceptable; for real assessments, require login so attempts are tied to an account.

### Form Builder
URL: https://www.floopfloop.com/en/build/form-builder

Build your Form Builder with AI in under 5 minutes

Create a form builder with custom field types, conditional logic, file uploads, spam protection, and a searchable submissions inbox with CSV export — built by AI.

**Example prompts**

- Build a form builder where I create forms with text, email, dropdown, checkbox, and file-upload fields. Each form gets a public URL and a submissions inbox with search, CSV export, and an email notification on every new entry. Add a honeypot field and per-IP rate limiting for spam.
- Create a multi-step client-intake form for a design agency: project type, budget range, and timeline, with different follow-up questions shown depending on the project type. Progress bar at the top, save-and-resume via an emailed magic link, and a review screen before final submit.
- Design an event registration form with ticket-type selection, per-type quantity limits, attendee details per ticket, a live remaining-spots counter, and a confirmation email with a QR code. Include an organiser dashboard with an attendee list and CSV export.
- Build an embeddable feedback widget: a 0–10 score question followed by an optional comment box, submitted without a page reload. Include a dashboard with the score trend over time, a filterable response feed, and a JSON API for pulling results into other tools.

**Frequently asked questions**

- **Q:** Can forms have conditional logic?
  **A:** Yes — show, hide, or require fields based on earlier answers: pick 'company' as the inquiry type and a company-size dropdown appears; choose a budget under a threshold and the form routes to a self-serve resources page instead of the sales calendar. Describe the branching in plain English and iterate until it matches your funnel.
- **Q:** Where do submissions go?
  **A:** Into your own database, with a submissions inbox UI: search, filters, read/unread state, and CSV export. You can also add an email notification per submission or a webhook that POSTs each entry to another system. Nothing is held hostage in a third-party dashboard.
- **Q:** Can people upload files?
  **A:** Yes. File fields validate type and size limits you set (e.g. images and PDFs up to 10 MB), and uploads are listed alongside the submission in your inbox. That covers job applications with CVs, support forms with screenshots, and print-shop order forms with artwork.
- **Q:** How is spam handled?
  **A:** Three layers that stop almost all of it: a honeypot field invisible to humans but filled by bots, per-IP rate limiting so a script can't submit hundreds of entries, and server-side validation of every field. For high-profile public forms you can add an email-confirmation step so only verified addresses land in your inbox.
- **Q:** Can I embed a form on my existing website?
  **A:** Every form gets a clean public URL you can link from anywhere, and an iframe embed for dropping into an existing page. For full visual control, the form can also expose a plain POST endpoint so a hand-built form on your site submits into the same inbox.
- **Q:** Typeform and Google Forms exist — why build my own?
  **A:** Google Forms is free but looks like Google Forms. Typeform looks great but charges per response — a successful campaign literally costs more. Building your own gets you unlimited forms and responses at flat cost, your branding with no 'powered by' badge, and submissions as rows in your own database that you can query, export, or pipe anywhere.

### Survey Builder
URL: https://www.floopfloop.com/en/build/survey-builder

Build your Survey Builder with AI in under 5 minutes

Create a survey builder with Likert scales, branching logic, anonymous response links, completion analytics, and CSV export — generated by AI in minutes.

**Example prompts**

- Build a survey tool where I create surveys with multiple-choice, Likert-scale (1–5 agree/disagree), rating, and open-text questions. Each survey gets an anonymous public link, a progress bar, and a results dashboard with per-question charts and CSV export.
- Create an employee-engagement survey app: anonymous by design (no names or IPs stored), one survey per quarter, Likert questions grouped by theme, and a results view that only unlocks once at least five responses are in, showing per-theme averages and trends across quarters.
- Design a customer-satisfaction survey with an NPS question, a follow-up branch that asks detractors what went wrong and promoters what they loved, and a dashboard with the NPS score, trend line, and a feed of verbatim comments filterable by score.
- Build an event-feedback survey that goes out after a workshop: star ratings per session, a speaker-feedback matrix, two open questions, completion tracking against the attendee count, and a one-page printable summary of results.

**Frequently asked questions**

- **Q:** What question types are supported?
  **A:** The standard research set: multiple choice (single and multi-select), Likert scales, 0–10 ratings (for NPS), star ratings, ranking, matrix grids, and open text. Each renders mobile-friendly, and required/optional is per question — long surveys with everything required is the fastest way to drive abandonment.
- **Q:** Can respondents stay anonymous?
  **A:** Yes, and genuinely so: an anonymous survey stores no name, email, IP, or browser fingerprint with the response — there's nothing to de-anonymize later. For employee surveys you can add a response threshold so results only display once enough answers exist that no individual is identifiable.
- **Q:** Does it support skip logic / branching?
  **A:** Yes — show or skip questions based on earlier answers: detractors get 'what went wrong', promoters get 'what should we never change', and people who answered 'never used it' skip the whole feature section. Describe the branches in plain English and refine until the flow matches your research design.
- **Q:** How do I analyse the results?
  **A:** A per-question dashboard: distribution charts for choice questions, averages and trends for scales, an NPS calculation where present, and a completion funnel showing where people dropped off. Raw responses export as CSV so you can pivot in a spreadsheet or feed analysis tools.
- **Q:** How do I stop duplicate responses?
  **A:** Pick the trust model per survey: open link (no dedup — for kiosk/QR settings), one-per-browser cookie (casual dedup), or unique single-use invite links generated per recipient — the only option that's both anonymous and strictly one-response when the stakes are real.
- **Q:** Why not just use SurveyMonkey or Google Forms?
  **A:** SurveyMonkey paywalls exports, response volumes, and even seeing all your own data on bigger plans; Google Forms is free but limited to basic logic and looks like a form, not your brand. Building your own means unlimited responses at flat cost, your domain and design, and answers stored as rows you can query directly.

### Feedback Board
URL: https://www.floopfloop.com/en/build/feedback-board

Build your Feedback Board with AI in under 5 minutes

Build a public feedback board where users post feature requests, vote on them, and follow statuses from planned to shipped — a Canny-style board on your own domain.

**Example prompts**

- Build a public feedback board for my product: users post feature requests, upvote existing ones, and comment. Each request has a status — under review, planned, in progress, shipped, declined — that only admins can change. Sort by top votes and newest.
- Create a feedback board with a public roadmap view: three columns (planned, in progress, shipped) showing the top-voted requests in each, plus a private admin view where I can merge duplicate requests and the votes combine.
- Design a feedback portal with categories (features, bugs, integrations), email notifications to a request's voters when its status changes, and a changelog page that lists shipped items with their original request linked.
- Build an internal feedback board for company tooling: employees sign in, post and vote, and an admin dashboard ranks requests by votes weighted by team size, with a quarterly CSV export for the planning meeting.

**Frequently asked questions**

- **Q:** How does voting work?
  **A:** One vote per signed-in user per request, toggleable. Votes are the board's whole value — they turn 'lots of people are asking' from a feeling into a sortable number. Anonymous voting is possible with per-browser dedup, but sign-in votes are worth more: you can see which customers want what, and notify exactly those voters when you ship it.
- **Q:** What statuses can a request have?
  **A:** The working set: under review (default), planned, in progress, shipped, and declined. Only admins change status, and every change is visible on the request — the public history is what builds trust. Declining with a short reason beats letting requests rot in silence.
- **Q:** Can I merge duplicate requests?
  **A:** Yes — duplicates are the number-one moderation chore on any feedback board. Merging redirects the duplicate to the canonical request and combines the votes and voter lists, so 'dark mode', 'night theme', and 'darker UI please' count as one well-supported request instead of three weak ones.
- **Q:** Do voters get notified when something ships?
  **A:** That's the loop that makes the board worth running: when a request moves to shipped, everyone who voted gets an email. It's the cheapest possible 'we listened' message — sent precisely to the people who proved they cared, at the exact moment you delivered.
- **Q:** Should the board be public or private?
  **A:** Public boards build trust and let prospects see momentum — the roadmap page doubles as marketing. Private (login-only) fits B2B products with confidential customers, or internal tooling. You can also run public read with member-only posting, which keeps spam down without hiding the roadmap.
- **Q:** Why build my own instead of using Canny?
  **A:** Canny is polished and charges per tracked user — fine until your user base grows and the bill scales with it. Building your own gets a flat-cost board on your domain, votes and requests as database rows you can join against your own user data ('which paying customers want this?'), and exactly the workflow your team runs — no more, no less.

### Pastebin
URL: https://www.floopfloop.com/en/build/pastebin

Build your Pastebin with AI in under 5 minutes

Build a code-snippet sharing site with optional auto-expire, public-or-unlisted visibility, a raw-text endpoint for curl, and owner-token delete — generated from a single prompt.

**Example prompts**

- Create a pastebin where anyone can drop a snippet, pick a language, choose an expiry window (10m / 1h / 1d / 1w / never), and get a shareable URL. Show line-numbered code on the paste page with a one-click copy button. Public pastes appear on the home feed; unlisted pastes stay link-only.
- Build a code-review-friendly paste site. Show a side-by-side diff view for two pastes, support inline comments on specific line numbers, add a 'share for review' flow that emails the author when a reviewer comments, and a raw endpoint at /raw/<id> so reviewers can grep the content locally.
- Design a developer-only paste site gated by signup. Show the user's paste history on a /me page, support private-by-default with a 'share via signed link' flow, expire pastes 90 days after the last view, and a one-click delete with confirmation.
- Create a hastebin-style anonymous text sharer with no signup, 1 MB cap per paste, 24-hour expiry by default, an /api/paste/<id> JSON endpoint for programmatic readers, and a robots.txt that excludes /p/* so unlisted pastes don't surface in search results.

**Frequently asked questions**

- **Q:** Can I share a paste via the command line?
  **A:** Yes. /raw/<id> returns the paste body as text/plain with the right Content-Type — pipe it through curl: `curl https://your-paste.example.com/raw/abc123 | jq` works directly. Cached 60 seconds at the CDN so repeated polls don't hammer the origin.
- **Q:** Do pastes really delete themselves on expiry?
  **A:** The paste page filters out expired rows at read time, so an expired paste is functionally gone immediately. A daily sweep cron can run separately to delete the rows from disk — until then the row stays but is invisible everywhere on the site.
- **Q:** Can I delete a paste I created?
  **A:** The paste creator gets a one-time owner token in the redirect URL after creating the paste. Bookmarking that URL is the only way to delete the paste later — we store sha256(token) so a leaked DB dump can't be used to delete other people's pastes.
- **Q:** Is the difference between 'public' and 'unlisted' enforced?
  **A:** Yes. Public pastes appear on the home page recent-list; unlisted pastes are reachable only by direct URL. Both live in the same table; the visibility flag is checked at every public-list query.
- **Q:** Can I add syntax highlighting?
  **A:** The template ships with line numbers in a monospace pre block, no highlighter bundled (keeps the artifact small). Add Prism or Shiki in a refinement turn — the language field is already stored on every paste row.
- **Q:** How big can a paste be?
  **A:** The default cap is 1 MB per paste body, enforced by a CHECK constraint on the column. Adjust the constraint in init-db.ts if you need more — the cap is there to protect the DB from a single 100 MB paste.

### Wedding Website
URL: https://www.floopfloop.com/en/build/wedding-website

Build your Wedding Website with AI in under 5 minutes

Build a single-page wedding site with a live countdown, ceremony + reception details, photo gallery, and a working RSVP form that captures guest replies — generated from a single prompt.

**Example prompts**

- Create a wedding website for Alex and Sam on June 15, 2026. Hero with the couple's names, a live countdown to the date, ceremony at Riverside Gardens at 4 PM and reception at The Conservatory at 6 PM, a six-photo gallery from the engagement shoot, and an RSVP form with plus-one + dietary fields. Elegant serif italic headlines, soft pink accents.
- Build a destination-wedding site for a beach ceremony in Tulum. Add a 'Travel & Stay' section with three recommended hotels (varied price points), a packing list, and a code for the group rate. RSVP form needs an extra 'arrival date' field so the couple can sort guests for the welcome dinner.
- Design a backyard-elopement page. Simple — one event card, no reception, RSVP is just attending yes/no plus a 'leave a note' field, and a gallery of the couple's polaroids. Minimal black-and-white aesthetic.
- Create a multi-day wedding-weekend site. Friday rehearsal dinner, Saturday ceremony + reception, Sunday brunch — each as its own card. RSVP form lets each guest tick which events they're attending plus how many in their party.

**Frequently asked questions**

- **Q:** How does the RSVP form actually capture replies?
  **A:** Every RSVP gets inserted into a `rsvps` table in the project's Postgres schema. The couple triages via SQL: `SELECT * FROM rsvps WHERE attending = true ORDER BY created_at` — or asks FloopFloop to build them a /admin/rsvps dashboard in a follow-up turn.
- **Q:** Can guests bring a plus-one?
  **A:** Yes. The form shows a 'Bringing a plus-one' checkbox + name field whenever the guest picks attending=yes. The DB records both the plus-one flag and the plus-one name so the seating chart query is one join.
- **Q:** Will the form actually send a confirmation email to the guest?
  **A:** No — the template can't send email (the codegen scanner blocks every transactional-mail library). The success-state shows a tailored on-page banner instead. The captured email address is on the row so the couple can manually follow up out-of-band.
- **Q:** How do I add my own photos to the gallery?
  **A:** The gallery reads from a single `gallery` array in src/lib/wedding-config.ts — paste the URLs (Cloudinary, S3, Unsplash, your own host) and they appear on the next render. No upload backend; if you need that, refine into the chat asking for an /admin/upload route.
- **Q:** What if our venue and reception are at the same place?
  **A:** The Event Details section automatically hides the reception card when the venue + address match the ceremony. No duplicate addresses on the page.
- **Q:** Can I gate the RSVP form so only invited guests can reply?
  **A:** The default form is open — anyone with the URL can RSVP. For an invite-list gate, refine into the chat asking for 'a passphrase field tied to the invitation envelope' or 'per-guest invite tokens stored in a guests table'.

### Nonprofit Website
URL: https://www.floopfloop.com/en/build/nonprofit-website

Build your Nonprofit Website with AI in under 5 minutes

Build a nonprofit website with a donation flow, impact stats, volunteer signup, events, and a transparency page — built by AI so the budget goes to the mission.

**Example prompts**

- Build a nonprofit website with a mission-led homepage, an impact section with key numbers (people helped, funds raised, projects completed), a donate page with preset and custom amounts, a volunteer signup form, and a transparency page listing how funds are used.
- Create a website for an animal shelter: adoptable animals as cards with photos and details, an adoption-application form, a donate page with one-time and monthly options, volunteer shift signup, and a success-stories section.
- Design a community-foundation site with a programs overview, an events calendar with registration, a news section for updates and annual reports, a team page with board members, and a newsletter signup in the footer.
- Build a fundraising-campaign site for a specific goal: a progress bar against the target amount, a wall of recent supporter names with optional messages, share buttons, campaign updates, and an FAQ about where the money goes.

**Frequently asked questions**

- **Q:** How does the donation flow work?
  **A:** A donate page with preset amounts, a custom field, and an optional monthly toggle, feeding a checkout flow. Donations record to your own database so you can thank, receipt, and report. Keep the form short — every extra field measurably costs completed donations.
- **Q:** What makes a nonprofit site convert visitors into donors?
  **A:** Specificity and proof: '€25 feeds a family for a week' converts where 'support our cause' doesn't. Lead with the mission in one sentence, show concrete impact numbers, put a Donate button in the header on every page, and keep the path from any page to a completed donation under three clicks.
- **Q:** Can we collect volunteer signups too?
  **A:** Yes — a volunteer form with interests and availability writes into the same database, giving coordinators a list they can filter and contact. For shift-based work (shelters, food banks), a signup sheet per shift with capacity limits prevents the over-subscribed-Saturday problem.
- **Q:** What should the transparency page include?
  **A:** Where the money goes (a simple programs-vs-overhead split beats nothing), annual reports as downloads, registration/charity numbers, and board members. Donors check this page before larger gifts — its existence matters as much as its polish.
- **Q:** Can we manage content ourselves without a developer?
  **A:** Yes — an admin area for the things that change: news posts, events, impact numbers, team members. The structural pages stay stable; refinements ('add a partners section', 'translate the homepage') are chat requests rather than agency invoices.
- **Q:** Why not a website builder like Wix or Squarespace?
  **A:** Their nonprofit templates are fine but generic, the monthly fee never ends, and real features — donation handling beyond a PayPal button, volunteer shift management, an adoptable-animals database — get awkward fast. Building with FloopFloop gets a site shaped by your actual operations, with data you own.

### Photographer Portfolio
URL: https://www.floopfloop.com/en/build/photographer-portfolio

Build your Photographer Portfolio with AI in under 5 minutes

Build an editorial photography portfolio with a full-bleed cinematic hero, mixed-aspect gallery grid, lightbox viewer, services + pricing-from cards, and a working booking-inquiry form — generated from a single prompt.

**Example prompts**

- Create a wedding photographer's portfolio site. Editorial dark theme with a Playfair Display italic serif for headlines. Hero is a full-bleed couple-at-altar shot with the studio name in serif italic. Gallery grouped into Weddings / Portraits / Events / Family with a click-to-enlarge lightbox. Services section with five offerings (full-day weddings, elopements, portraits, family sessions, commercial) each with a 'from $X' price. Inquiry form captures name, email, event type, date, location, and message.
- Build a portrait + headshot photographer's site. Light theme, monochrome with soft warm accent. One-column landing-style hero. Three-up gallery grid showing personal, actor, and musician portraits — each opens a fullscreen lightbox. About section with the photographer's bio, a portrait headshot, and a stat strip ('12 years working', '240+ sessions'). Booking form with event-type dropdown and a date picker.
- Design a fine-art landscape photographer's portfolio. Black-and-white-only aesthetic, generous whitespace, serif italic everywhere. Hero is a hero landscape with location caption. Gallery is mixed-aspect (portrait + landscape + square frames) showing prints from limited editions. Services section sells signed print runs + licensed-image commercial use. Print-inquiry form with edition-size and framing options.
- Create a newborn + family photographer's site. Soft, warm, and a touch nostalgic. Hero with a baby-in-light shot and serif italic studio name. Gallery filterable by Family / Newborn / Maternity / Cake-smash. Services include a 'baby's first year' three-session package. Inquiry form asks for due date or baby's age so the photographer can schedule the right session.

**Frequently asked questions**

- **Q:** How does the inquiry form actually capture replies?
  **A:** Every inquiry inserts a row into a `photography_inquiries` table in the project's Postgres schema (event type, date, location, message, IP-hash for rate limiting). The photographer triages via SQL: `SELECT * FROM photography_inquiries WHERE status = 'pending' ORDER BY created_at DESC` — or refines a quick admin dashboard if they want a UI.
- **Q:** Will the form send a confirmation email to the inquirer?
  **A:** No — the template can't send email (the codegen scanner blocks every transactional-mail library). The success state says 'I'll reply within 24 hours' instead of promising email. The inquirer's email is stored on the row so the photographer can follow up out-of-band from their own inbox.
- **Q:** Where do the portfolio images come from?
  **A:** The default gallery uses picsum.photos with stable seed URLs so the template ships visually-complete without bundled binaries — every reload shows the same nine photographs in the same grid slots. To swap in your own gallery, refine into the chat with the new image URLs (Cloudinary, your own S3, anything) and the agent rewrites the photo array.
- **Q:** Is there a lightbox / fullscreen viewer?
  **A:** Yes. Clicking any photo opens a fullscreen modal — left/right arrow keys step through the gallery, Escape closes. Body scroll locks while the lightbox is open so the page doesn't drift behind it.
- **Q:** Can I split the gallery into categories?
  **A:** Yes — the portfolio grid ships with filter pills (All / Wedding / Portrait / Event / Family / Commercial) that scope the visible images. Add or rename categories in src/components/photo/portfolio-grid.tsx, or ask the agent to.
- **Q:** Does the template support a dark + light mode?
  **A:** Both, but dark is the default — black gallery walls make photographs read louder. The theme toggle in the top-right swaps the two. Light mode uses paper-white background + charcoal type + the same warm-amber accent.
- **Q:** What about rate-limiting form spam?
  **A:** The createInquiry server action enforces 5 inquiries per IP per hour (IP is salt-hashed at the project level — no raw IPs stored). Beyond that the form returns a friendly 'too many inquiries' error.

### One-Page Resume
URL: https://www.floopfloop.com/en/build/resume

Build your one-page Resume with AI in under 5 minutes

Build a print-optimized one-page resume / CV with serif-headers / sans-body typography, dated work experience, education, categorized skills, optional projects + languages — and a 'Save as PDF' button. Generated from a single prompt and ready to hand to a recruiter.

**Example prompts**

- Build a one-page resume for a senior backend engineer. Header has name + headline + 3-line summary + mailto/tel/website/github/linkedin links. Three jobs in Experience (10+ years total) with bulleted impact points, one university entry in Education, four skill categories (Languages, Infra, Practice, Tools), and two open-source projects in Selected Projects. Serif section titles, sans body, charcoal-on-bone palette. Print-friendly: @page A4 with 16mm margins, theme toggle hidden on the printed PDF.
- Create an academic CV for a postdoc researcher. Replace Selected Projects with a Publications section (paper title, venue, year, optional DOI link). Add a Teaching section between Education and Skills listing courses taught and TA assignments. Keep the print-ready layout — saving as PDF should produce a recruiter-ready document without manual editing.
- Design a designer's resume with a sidebar layout: profile photo + contact details on the left, scrollable Experience/Education/Skills column on the right. Sans-serif throughout (no serif) and a single accent colour for section dividers. Save-as-PDF still produces a clean single-column A4 by collapsing the sidebar into the main flow on print.
- Build a print-only resume for a marketing manager. Optimized for paper — drop the theme toggle entirely. Header includes a one-line objective. Experience uses a date-on-left / role-on-right grid; bullets use the STAR framework (Situation, Task, Action, Result) with each bullet starting with an action verb. Skills section uses comma-separated text not chips, to maximize info per square inch.

**Frequently asked questions**

- **Q:** Does the resume actually print cleanly?
  **A:** Yes — @page rules in globals.css set A4 dimensions with 16mm margins (recruiter-standard), force light-mode colours regardless of the visitor's screen theme, and use `break-inside: avoid` on every `.resume-entry` so a single job's bullet points don't get split across pages. The PrintButton + ThemeToggle floating chrome hides on print via `print:hidden`.
- **Q:** Where do I edit the content?
  **A:** All resume data lives as `const` arrays at the top of `src/app/page.tsx.hbs` — HEADER, EXPERIENCE, EDUCATION, SKILLS, PROJECTS, LANGUAGES. Replace the seed values inline (or refine into the chat with your actual content) and the page rerenders. No DB, no API — the whole thing is a static document.
- **Q:** Can I save the page as a PDF?
  **A:** Click the 'Print / PDF' button in the top-right (or hit ⌘P / Ctrl+P) — the browser's print dialog includes a 'Save as PDF' destination. The @page CSS rules + per-entry break-inside-avoid produce a recruiter-ready PDF without manual editing.
- **Q:** Is the dark mode for the printed PDF too?
  **A:** No — @media print forces light-mode colours via `color-scheme: light !important` so the saved PDF is always black-on-white. Dark mode is screen-only for visitors who prefer it.
- **Q:** Can I add custom sections like Publications or Awards?
  **A:** Yes. Each section is its own component in src/components/resume/ — copy ExperienceSection or EducationSection as a starting point, swap the field names, and drop the new component into page.tsx.hbs. The codegen agent can scaffold this in a refine prompt: 'add a Publications section between Education and Skills with paper title, venue, year, and optional DOI link.'
- **Q:** Will the print output fit on one page?
  **A:** That depends on the content density — the template ships seed data that comfortably lands on one A4 sheet, but heavy content (10+ jobs, long bullet lists) can spill to a second page. The `.resume-entry` class is on every dated row so the page break never lands mid-entry; if you really need to fit one page, refine into the chat asking for 'tighten the line-height and section spacing to fit on one page.'
- **Q:** How does it compare to the developer-portfolio template?
  **A:** developer-portfolio is a projects-and-tech-stack-focused personal website with hero + featured projects + about — built for the screen. The resume template is a single-page document optimized for print and the recruiter's first 30 seconds. Use developer-portfolio as a `yourname.dev` and resume as the PDF you attach to a job application.

### Coming Soon / Waitlist Page
URL: https://www.floopfloop.com/en/build/coming-soon

Build your Coming Soon page with AI in under 5 minutes

Build a pre-launch landing page with a live countdown timer, a working email waitlist that captures real signups (with per-IP rate limiting and duplicate-aware DB), and a social-proof counter that updates as people sign up — generated from a single prompt.

**Example prompts**

- Build a coming-soon page for an AI dev tool launching on September 1, 2026. Dark theme with a violet → cyan gradient headline, big mono countdown timer (days/hours/minutes/seconds), single email field above the fold. Three teaser cards below: 'Faster than you'd expect', 'Private by default', 'Built for one thing'. Social-proof counter underneath showing waitlist size. Twitter, GitHub, LinkedIn, and mailto: footer links.
- Create a stealth-mode waitlist page for a B2B SaaS. Magazine-style headline ('Something quietly excellent is on the way.'), countdown to the public-beta date, email capture with a hidden source field set from `?from=` so we can group signups by campaign in SQL. No mention of the actual product features — that's the point.
- Design a 'notify me when this is back in stock' page for a limited-drop ecommerce. Big timer counts to the restock date (configurable from `LAUNCH_DATE_ISO` in /lib/launch-config.ts). Single email field. After submit, the form shows 'You're in. We'll email the moment we restock.' Earthy palette (warm browns + cream).
- Build a pre-launch page for a paid newsletter. Dark theme but with a serif-italic headline instead of mono. Countdown to the first issue. Email-capture form. A two-sentence 'About the author' section under the timer. No social links, no teaser cards — keep it monolithic.

**Frequently asked questions**

- **Q:** Where do the email signups actually go?
  **A:** Every signup is inserted into a `waitlist_subscribers` table in the project's Postgres schema (email, source tag, referrer, IP-hash for rate limiting). The operator triages with `SELECT * FROM waitlist_subscribers ORDER BY created_at DESC`. Email is UNIQUE so double-submits are caught at the DB and the user gets a friendly 'you're already on the list' instead of a duplicate error.
- **Q:** Does the page send a confirmation email?
  **A:** No — the template can't send email (the codegen scanner blocks every transactional-mail library). The success state says 'you're on the list, we'll be in touch at launch' instead of promising email. The captured address is stored so the operator can send a single launch-day blast from their own ESP.
- **Q:** How do I change the launch date?
  **A:** One edit in /src/lib/launch-config.ts — set `LAUNCH_DATE_ISO` to a new ISO-8601 timestamp and `LAUNCH_DATE_LABEL` to the human-readable form. The countdown, the hero badge, and the OG metadata all read from that file. No other files touched.
- **Q:** What happens when the countdown hits zero?
  **A:** The four-cell timer is replaced with a 'We've launched' badge. The waitlist form stays mounted so late-arrivals can still drop their email — most operators forget to flip the page on launch day, and turning the waitlist off automatically would lose those signups.
- **Q:** Is the social-proof counter ('Join 247 founders waiting') real?
  **A:** Yes — it's a live COUNT(*) on the waitlist_subscribers table, rendered server-side on every page request. Hidden entirely when fewer than 5 people have signed up (lying about an empty waitlist burns trust the instant the first real signer Googles you).
- **Q:** Can I track which channels are driving signups?
  **A:** Yes. The form has a hidden `source` field that accepts a short campaign tag (a-z, 0-9, dashes, underscores). Pass `?source=ph-launch` or `?source=twitter` in your share URLs, the form reads it at submit, and you can pull `SELECT source, COUNT(*) FROM waitlist_subscribers GROUP BY source` to see what's working.
- **Q:** Is it dark-mode-only?
  **A:** Default is dark — that's the genre convention. A light-mode palette is provided in globals.css for operators who want a brighter pre-launch identity; flip the `forcedTheme` prop on ThemeProvider in src/app/layout.tsx and the light variables take over.

### Waitlist Page
URL: https://www.floopfloop.com/en/build/waitlist-page

Build your Waitlist Page with AI in under 5 minutes

Launch a waitlist page with email capture, a live queue position, referral links that move people up the list, and CSV export of every signup — built by AI in minutes.

**Example prompts**

- Build a waitlist page for an AI product: bold headline, one-line pitch, an email form with validation, a 'you're number N in line' position shown after signing up, and a confirmation email. Dark theme with an electric-blue accent.
- Create a waitlist with referral mechanics: each signup gets a unique share link, every join through that link moves the referrer up ten spots, and a leaderboard shows the top ten referrers. Include an admin view with a daily-signups chart and CSV export.
- Design a private-beta waitlist where I review signups in an admin panel, approve people in batches of 50, and approved users automatically receive an invite code by email that works exactly once.
- Build a pre-launch page with a countdown to launch day and email capture. At the deadline the page flips automatically to the live product link and everyone on the list gets a launch announcement email.

**Frequently asked questions**

- **Q:** How do referral links work?
  **A:** Each signup gets a unique code embedded in a share URL. When someone joins through it, the referrer moves up the queue — typically a fixed number of spots per referral — and a leaderboard makes the loop visible. The mechanics (spots per referral, caps, leaderboard size) are yours to tune, since the queue is just a sortable column in your own database.
- **Q:** Can I export the emails into my email tool?
  **A:** Always — the list lives in your own database, so CSV export is built in, and a webhook can push each new signup to wherever you send email. No vendor lock-in on the single most valuable asset a pre-launch product has.
- **Q:** How does the queue position work?
  **A:** Signup order sets the base position; referrals subtract from it. Showing 'you're number 312 in line' after signup is a conversion tactic as much as a queue: it makes the list feel real and gives people a number to beat by sharing their link.
- **Q:** What stops fake or mistyped emails?
  **A:** Format validation catches typos, a honeypot field plus rate limiting blocks bot floods, and an optional double-opt-in step counts only confirmed addresses toward the queue and the referral bonus — which also keeps referral gaming down, since inventing signups now requires real inboxes.
- **Q:** Can I manage who gets access during a private beta?
  **A:** Yes — an admin view of the queue with approve buttons (singly or in batches), and single-use invite codes emailed on approval. That turns the waitlist from a marketing page into your actual beta-rollout system, with the queue order as the default priority.
- **Q:** What happens to the page when I launch?
  **A:** The page flips to the live product — either automatically at a countdown deadline or when you toggle it — and the list gets the launch email. Because the waitlist ran on your own domain, the SEO history and any backlinks it earned carry straight over to the product site.

### Link-in-Bio Page
URL: https://www.floopfloop.com/en/build/link-in-bio

Build your Link-in-Bio page with AI in under 5 minutes

Build a Linktree-style link-in-bio page with a custom profile, ordered link list, click tracking, and an admin panel to edit links — generated from a single prompt.

**Example prompts**

- Build a link-in-bio page for a music producer. Single dark-purple gradient background, square avatar at the top, bio line, and a vertical stack of 6 links: Spotify, Apple Music, YouTube channel, latest release, mailing list signup, and a contact email. Each link has a small icon next to the label and tracks click counts.
- Create a creator-page for a yoga instructor. Soft mint palette, round profile photo, name + tagline, then links for: class schedule, online course, Instagram, TikTok, free starter video, and a 'book a private session' email link. Custom URL slug per link so the share-URL reads /poses, /classes, etc.
- Design a developer's link-in-bio with a monospace font, dark zinc background, and a green-accent terminal vibe. Links to: portfolio site, GitHub, latest blog post, RSS feed, mailing list, sponsor button. Include a small footer line with the developer's home base + 'open to consulting work'.
- Build a podcaster's link-in-bio with the latest episode embedded above the link list (just an episode title + 'Listen now' link to the audio, no in-page player needed). Links to: Apple Podcasts, Spotify, RSS feed, YouTube channel, Patreon, and a 'suggest a guest' contact form.

**Frequently asked questions**

- **Q:** How does click tracking work?
  **A:** Each link visit increments a `clicks` counter in the database. The admin panel shows the count next to every link so the owner can see at a glance which links pull traffic. No third-party tracker, no cookie, no IP collection — the counter is anonymous and lives in the project's own Postgres schema.
- **Q:** Can I gate the admin panel?
  **A:** Yes — the template ships with a single-secret gate. Set ADMIN_KEY in Project Settings → Secrets; visiting /admin without the cookie hash redirects to a login page that posts the key once, stores its sha256 in an httpOnly cookie, and unlocks the dashboard for 30 days.
- **Q:** How do I add a custom domain?
  **A:** Every FloopFloop project gets a *.floop.tech subdomain by default and supports custom domains from the dashboard. Add `links.yourname.com`, follow the DNS instructions, and your link-in-bio resolves at the new hostname within minutes.
- **Q:** Can the links open in a new tab?
  **A:** Yes — every link uses `target="_blank" rel="noopener noreferrer"` by default, so the visitor's page stays open after the click. The `noreferrer` cuts off the Referer header to the destination, which most creator tools care about.
- **Q:** Does it support multiple pages per account?
  **A:** The default template is single-page (one /).  An operator who wants multiple link pages (e.g. one per project) refines the chat asking for a per-page table + a /[slug] route — the codegen agent scaffolds both in one round.
- **Q:** What about /admin getting indexed by Google?
  **A:** Both /admin and /admin/login carry `robots: { index: false, follow: false }` metadata so Googlebot won't list the login URL in SERPs — a small leak that gives phishing pages an easy template to mimic. Fixed in the shipped template.
- **Q:** Can I rate-limit the click endpoint?
  **A:** The `/r/[id]` redirect handler accepts any visitor by design (it's just a redirect), so no per-IP cap is enforced. Click counts can be inflated by reload-spam; if that matters for your use case, refine with 'add a 5/minute cap on click increments per IP'.

### Digital Business Card
URL: https://www.floopfloop.com/en/build/digital-business-card

Build a Digital Business Card with AI in under 5 minutes

Build a digital business card with a photo, tap-to-call and tap-to-email actions, social links, and a one-tap 'Save to contacts' vCard download — generated from a single prompt.

**Example prompts**

- Build a digital business card for a real-estate agent. Photo, name, 'Realtor · Coastline Properties', a one-line bio, tap-to-call and tap-to-email buttons, a website link, LinkedIn and Instagram, and a prominent 'Save to contacts' button that downloads a vCard. Clean indigo theme.
- Create a digital business card for a freelance developer. Headshot, name, 'Full-stack Engineer', GitHub + LinkedIn + personal site, an email button, and a Save-to-contacts vCard. Dark sleek theme, monospace accents.
- Make a digital business card for a consultant I can put behind a QR code on my physical card. Big photo, title and company, phone and email tap actions, location, and a vCard download so people add me to their phone in one tap. Warm champagne/gold look.
- Design a digital business card for a photographer: photo, tagline, Instagram + portfolio + email, a phone number for bookings, and a 'Save to contacts' button. Rose theme, elegant typography.

**Frequently asked questions**

- **Q:** What is the 'Save to contacts' button?
  **A:** It downloads a standard vCard (.vcf) built from your details. iPhone, Android, and Outlook all recognise the format and open their add-contact screen pre-filled — so someone you just met has your number, email, title, and links saved in one tap, no typing.
- **Q:** Can I put it behind a QR code on a physical card?
  **A:** Yes — that's the most common use. Point a QR code (or an NFC tag) at your card's URL; whoever scans it lands on your card and can call, email, or save your contact instantly. The page is mobile-first because that's where it's scanned.
- **Q:** Do the call and email buttons work on mobile?
  **A:** Yes. Phone uses a `tel:` link (taps straight into the dialer) and email uses `mailto:` (opens a pre-addressed draft). Website and social links open in a new tab.
- **Q:** How do I edit my card?
  **A:** A private admin page (gated by an ADMIN_KEY you set) lets you edit your name, title, company, bio, photo, phone, email, location, and social links. Changes go live instantly and the vCard updates automatically.
- **Q:** Is it different from a link-in-bio page?
  **A:** Yes. A link-in-bio page is a creator's list of arbitrary links; a digital business card is one person's professional contact card built around saving your details to a phone — the vCard download and tap-to-call/email are the point. Pick link-in-bio for content distribution, this for networking.
- **Q:** Will it help people find me by name online?
  **A:** The card emits Person structured data (name, job title, employer, and your verified social profiles), which helps search engines associate your name with your role and links — useful when someone Googles you after meeting.

### URL Shortener API
URL: https://www.floopfloop.com/en/build/url-shortener

Build your URL Shortener API with AI in under 5 minutes

Build a Bitly-style URL shortener with a JSON POST /shorten endpoint, custom aliases, optional expiry dates, click counters, and a redirect handler — generated from a single prompt.

**Example prompts**

- Build a URL shortener REST API. POST /api/shorten accepts {url, alias?, expires_at?, tags?} and returns the short_url. The catch-all /[alias] route 302s to the destination, bumps a click counter, and 404s on missing or expired entries. Auto-generated aliases are 6 lowercase alphanumeric chars (cryptographically random — no Math.random). All non-http(s) protocols rejected at write + read time.
- Create a branded link shortener for a marketing team. Custom alias format /[campaign]-[id], a JSON GET /api/links endpoint that lists every link with click counts grouped by campaign tag, and a 100-requests-per-IP-per-hour rate limit on the shorten endpoint to block bulk-spammer scripts.
- Design an internal link shortener for a small company. POST /api/shorten requires an X-API-Key header that matches an env var; the catch-all redirect route is open so anyone with the short URL can use it. Storage is in-memory (per Lambda container) — fine for the company's modest traffic and resets on every deploy.
- Build a temporary-link service. Every shortened URL gets a mandatory expires_at — max 7 days from creation. The /[alias] route returns 410 Gone with a friendly 'link expired' JSON for expired entries instead of redirecting. A daily cron sweeps rows with expires_at < now() to keep the table bounded.

**Frequently asked questions**

- **Q:** Where do shortened links live?
  **A:** The default template uses an in-memory Map for storage so the API is 200-able out of the box without a DB schema migration. Replace with the project's Postgres (`import sql from '@/lib/db'`) when graduating to a multi-replica deploy — the docblock at the top of /api/shorten/route.ts walks through the swap.
- **Q:** How does the catch-all redirect route avoid colliding with /api/*?
  **A:** Next.js's resolver matches static segments first, so /api/health, /api/shorten, /favicon.ico, and /_next/* all win over /[alias] without any extra config. The redirect handler also rejects alias values that don't match the {3..30}-char regex, so /favicon.png lookups 404 cleanly instead of hitting the DB.
- **Q:** What stops someone from creating a `javascript:alert(1)` redirect?
  **A:** Every destination URL is run through a safeUrl() check at write time AND again at read time on the redirect handler. The function rejects every non-http(s) scheme — javascript:, data:, file:, view-source:, etc. — so the shortener can't be used as a XSS-as-a-service for phishing pages.
- **Q:** Is there a rate limit on the shorten endpoint?
  **A:** Yes — 100 shorten requests per IP per hour, salt-hashed against FLOOP_PROJECT_ID. Check fires BEFORE body parse so a hostile client can't waste validation time after they've hit the cap. The redirect handler itself is open (it's just a redirect, not a write).
- **Q:** Can I use custom aliases like /sale-2026?
  **A:** Yes. POST /api/shorten accepts an optional `alias` field; the validator rejects reserved slugs (api, health, admin, login, signup) and anything outside the {3..30}-char allowlist regex. If the alias is taken the API returns 409 Conflict.
- **Q:** Can I add link expiration?
  **A:** Yes — the API accepts an optional `expires_at` ISO timestamp. The redirect route returns 410 Gone past that timestamp instead of 302'ing. There's no built-in DB sweep of expired rows; if your project keeps the in-memory store, expiry happens organically on cold starts.
- **Q:** What about analytics on clicks?
  **A:** The default template bumps a per-link `clicks` counter on every redirect (fire-and-forget so it never delays the 302). For richer analytics — per-day timeseries, geo, referrer breakdown — refine into the chat asking for a `click_events` table and a /api/links/[id]/stats endpoint.

### UTM Campaign URL Builder
URL: https://www.floopfloop.com/en/build/utm-builder

Build a UTM Campaign URL Builder with AI in under 5 minutes

Build a UTM campaign URL builder — generate consistent utm_source / medium / campaign / term / content tagged links so Google Analytics attributes every click correctly. AI-generated, runs entirely in the browser.

**Example prompts**

- Build a UTM campaign URL builder. Fields for the website URL plus utm_source, utm_medium, utm_campaign (required) and utm_term, utm_content (optional). Show the tagged URL live as I type with a copy button, a lowercase toggle so 'Email' and 'email' don't split my analytics, and a saved-link history in localStorage. Clean technical look, runs entirely client-side.
- Create a campaign link builder for my marketing team. Same UTM fields as Google's Campaign URL Builder, plus dropdown presets for our common sources (newsletter, twitter, linkedin) and mediums (email, social, cpc), a per-link copy button, and an export of all saved links as CSV.
- Make a simple UTM link generator. Paste a URL, fill in source/medium/campaign, get the tagged link instantly with a one-click copy. Validate that the base URL is real http(s), preserve any query string already on it, and keep a history of the last 50 links I built. Dark theme.
- Design a campaign tagging tool for an agency that manages several clients. A workspace name at the top, the five UTM fields, live URL preview, and a saved-links list grouped by campaign name so each client's links stay organised.

**Frequently asked questions**

- **Q:** What are UTM parameters?
  **A:** UTM parameters are five tags you append to a link's query string — utm_source, utm_medium, utm_campaign, utm_term, utm_content — that Google Analytics (and most analytics tools) read to attribute a visit to a specific campaign. 'Where did this click come from?' becomes a reportable answer instead of lumping into 'direct' or 'referral'.
- **Q:** How is this different from a URL shortener?
  **A:** A shortener makes a long link short and redirects it; a UTM builder makes a link trackable by tagging it. They're complementary — you often UTM-tag a destination first, then shorten the result for sharing. This tool builds the tagged URL; pick the URL Shortener template if you also need a short branded redirect.
- **Q:** Why does the lowercase toggle matter?
  **A:** Analytics tools are case-sensitive: 'Newsletter' and 'newsletter' register as two different sources and silently split one campaign's numbers across two rows. Lowercasing source / medium / campaign by default keeps your reports clean. The toggle leaves term and content untouched since those can be case-sensitive keywords or A/B labels.
- **Q:** Where are my saved links stored?
  **A:** Entirely in your browser's localStorage — nothing is sent to a server. The whole tool is client-side, so your campaign names and destinations never leave your device. Clearing your browser data clears the history.
- **Q:** Does it handle URLs that already have query parameters?
  **A:** Yes. The builder uses the browser's URL API, so an existing query string (?ref=homepage) and hash (#section) are preserved and the utm_* params are appended correctly — no double question marks, no broken links, and values are properly URL-encoded.
- **Q:** Can I add it to my own marketing site?
  **A:** Yes — it deploys to its own URL you can bookmark or share with your team, and you can refine it by chat to add source/medium presets, CSV export, or your brand styling. Because it's static and client-side, it loads instantly and costs nothing to run.

### Changelog Page
URL: https://www.floopfloop.com/en/build/changelog

Build your Changelog page with AI in under 5 minutes

Build a Headway-style product changelog with chronological release notes, tagged entry types (feature / fix / improvement / breaking), versioned entries, and an admin form gated by a single env-var token — generated from a single prompt.

**Example prompts**

- Build a public changelog page for a B2B SaaS. Chronological feed grouped by month, each entry has a version (semver), title, body (markdown OK), and a type tag rendered as a coloured badge: feature (green), fix (blue), improvement (purple), breaking (red). Admin form at /admin gated by a single CHANGELOG_ADMIN_TOKEN env var; constant-time compare so the token length can't be probed via response timing.
- Create a developer-tool changelog with a serif headline, monochrome body, and inline code-block support in the entry body (triple-backtick fences render as <pre><code>). RSS feed at /feed.xml so users can subscribe in their feed reader. Add an optional 'GitHub PR' link field per entry that surfaces under the entry title.
- Design a startup's release notes page. Big version-number column on the left, entry content on the right. Each entry gets a 'permalink' anchor so the team can share /changelog#v2.3.1 in Slack. The admin form is on the same page (behind the token gate) and posts inline — no separate /admin route.
- Build a public changelog for an open-source project. Entries can be tagged with multiple `area` strings (api, ui, perf, docs, etc.) and the page has a filter strip at the top to scope by area. The feed.xml is auto-discovered via <link rel="alternate" type="application/rss+xml"> in the head.

**Frequently asked questions**

- **Q:** How does the admin gate work?
  **A:** The template uses a single env-var token (`CHANGELOG_ADMIN_TOKEN`) rather than a user table — appropriate for a single-author changelog. The admin form posts the token in a header; the server compares it in constant time so the token's length and prefix can't be probed via response-timing differences. Set the token in Project Settings → Secrets, redeploy, and you can post entries.
- **Q:** Can readers subscribe to the changelog?
  **A:** Yes — the template ships an RSS feed at /feed.xml that auto-discovers via a `<link rel="alternate">` tag in the head. Feed readers (Feedly, Reeder, NetNewsWire) pick it up automatically when the visitor hits the page.
- **Q:** What stops a typo-rich entry from breaking the page?
  **A:** Entry titles are capped at 200 characters, bodies at 10,000, and the type field is validated against the four-string allowlist (feature, fix, improvement, breaking). The body is rendered as plaintext with simple paragraph splitting — no innerHTML, no markdown rendering library, so a stray `</script>` in an entry can't escape the page.
- **Q:** How do I version entries?
  **A:** The version field is a free-text string (max 32 chars) so you can use semver (`v2.3.1`), date-based (`2026-05-18`), or anything else. The page sorts entries by created_at descending; versions are display-only.
- **Q:** Can multiple authors post entries?
  **A:** The single-token model is one-token-one-author. For a multi-author changelog refine with 'replace the token gate with NextAuth login + an authors table' — the codegen agent scaffolds the migration in one round.
- **Q:** Does the changelog get indexed by Google?
  **A:** Yes — the page renders fully on the server with no client-side hydration required. Schema.org Article markup is emitted for every entry (entry title as headline, body as articleBody, the entry author as the Organization). Google treats each entry as a separately-indexable item.
- **Q:** Can I link to specific entries?
  **A:** Yes — every entry has a permalink-shaped slug (e.g. `/changelog#v2-3-1-fix-the-login-loop`) so the operator can paste a link into Slack or a release email and it scrolls to the exact entry.

### Flashcards / Spaced-Repetition App
URL: https://www.floopfloop.com/en/build/flashcards

Build your Flashcards app with AI in under 5 minutes

Build an Anki-style flashcard app with deck management, four-grade spaced-repetition scheduling (Again / Hard / Good / Easy), per-deck due counters, daily review history, and a streak tracker — generated from a single prompt.

**Example prompts**

- Build a flashcards app for language learners. Multi-deck support (German vocab, French vocab, Spanish vocab, etc.), front/back card model, four-grade scheduling (Again 1min, Hard 6min, Good doubling, Easy 4-day doubling). Persists everything to localStorage so the user's progress survives reloads. Stats strip shows reviewed-today, due-now, total cards, and the longest day-streak.
- Create a flashcards app for medical school. Decks per body system (Cardio, Neuro, Renal, etc.), card body supports inline image URLs (img-src an external host), Space toggles flip, 1-4 keys grade. Add a 'leech' detection: any card the user grades Again three times in a row gets a red marker so they know to rewrite it.
- Design a code-snippet flashcards app for engineers. Front holds a 'what does this code do' prompt, back holds a monospace code block (preserve whitespace). Deck filter on the right; cards inherit the deck's syntax-highlight language. Light/dark mode toggle in the navbar.
- Build a kid-friendly flashcards app for spelling practice. Cards have a picture-prompt on front + the word on back. Audio playback button on the back plays the word via the SpeechSynthesis API (`speechSynthesis.speak(new SpeechSynthesisUtterance(word))`) — no audio file hosting needed. Confetti animation on every correct answer.

**Frequently asked questions**

- **Q:** Where does my progress get saved?
  **A:** Everything lives in the browser's localStorage under the `flashcards:v1` key — decks, cards, per-card streak + nextReviewAt timestamps, and the 90-day review history. No server, no account, no sync between devices. Refining into the chat with 'sync via a Postgres table' graduates to a real backend.
- **Q:** How does the spaced-repetition scheduling work?
  **A:** Lightweight starter interval table — Again resets in 1 minute, Hard in 6 minutes, Good doubles from a 10-minute base, Easy doubles from a 4-day base. Far from a full SM-2 algorithm; the operator can refine to match Anki's defaults if they want the granularity, or keep the simpler table for a casual study app.
- **Q:** Can I add cards from a CSV or other apps?
  **A:** Not in the shipped template — refine with 'add a CSV import button that parses Anki .tsv exports and creates a deck per source-file' or 'pull cards from a `cards.json` file in /public on first load'. The codegen agent scaffolds both in one round.
- **Q:** What about keyboard shortcuts?
  **A:** The template ships with two: Space toggles card flip, 1-4 grade the current card (Again / Hard / Good / Easy). Listeners are mounted at the page level so the user doesn't have to focus the card first — they can keep typing in any input and the keys still work outside that input.
- **Q:** How long is the streak tracked?
  **A:** The reviewHistory array stores per-day review counts for the last 90 days. The longest-consecutive-day streak is computed from the present day backwards — once you miss a full calendar day the streak resets to zero, same convention as Duolingo and Anki.
- **Q:** Can I add an image or audio to a card?
  **A:** The default card model is text-only (front + back strings). Refine with 'add an optional image_url + audio_url to each card; render <img> on the back if image_url is set; auto-play the audio via <audio src=...>'. Both are 5-minute additions for the codegen agent.
- **Q:** Does it work offline?
  **A:** After first load, yes — the page is fully client-rendered and localStorage is local. The page itself does need to be fetched at least once to bootstrap; for true offline-first add a Service Worker via refine ('add a service worker that caches /, /globals.css, and the chunk files for offline use').

### Note-Taking App
URL: https://www.floopfloop.com/en/build/note-taking-app

Build your Note-Taking App with AI in under 5 minutes

Create a note-taking app with markdown, folders and tags, full-text search, backlinks, and pinned favourites — your notes in your own database, built by AI.

**Example prompts**

- Build a markdown note-taking app with a sidebar of folders and tags, a split-pane editor with live preview, full-text search across all notes, pinned notes at the top, and auto-save as I type. Dark theme by default.
- Create a zettelkasten-style notes app where [[wikilinks]] between notes become clickable, each note lists its backlinks underneath, and an index page shows orphan notes with no connections. Add a daily-note button that opens today's note from a template.
- Design a meeting-notes app for a small team: each note has attendees, an agenda, and action items with checkboxes and owners. Include a 'my open action items' view across all meetings and email me my open items every Monday morning.
- Build a code-snippet notebook with syntax highlighting for 20+ languages, tags per snippet, one-click copy, a public/private toggle per snippet, and a public page that lists only my public snippets.

**Frequently asked questions**

- **Q:** Does it support markdown?
  **A:** Yes — write in markdown with a live preview pane or inline rendering, whichever you prefer. Headings, lists, tables, code blocks with syntax highlighting, and task checkboxes all work, and because notes are stored as plain markdown text, they're portable by construction.
- **Q:** How good is the search?
  **A:** Full-text search across titles and bodies, backed by Postgres — not a filename filter. Combine it with tag and folder scoping ('search only #work notes from this year'), and results rank matches in titles above matches in body text so the note you meant surfaces first.
- **Q:** Can I link notes together like Obsidian?
  **A:** Yes — [[wikilink]] syntax turns into clickable links between notes, each note shows its backlinks, and an orphans view lists notes nothing points to. That's the zettelkasten loop: capture, link, and let structure emerge from connections instead of folders.
- **Q:** Can I access my notes from any device?
  **A:** It's a web app behind your login, so notes live in your database and any browser — laptop, phone, tablet — sees the same state with auto-save. There's no sync conflict model to fight because there's one source of truth, though full offline editing is the one trade-off versus a local-vault app.
- **Q:** Can I import existing notes?
  **A:** Markdown files import cleanly since that's the native format — ask for a bulk importer that maps a folder of .md files (an Obsidian vault, a Notion markdown export) into notes with their folder structure as tags. From there, everything is searchable immediately.
- **Q:** Why build my own instead of Notion or Obsidian?
  **A:** Notion is a workspace that happens to hold notes — heavyweight for fast capture, and your data lives in their cloud. Obsidian is excellent but local-first: the vault is on one machine unless you pay for sync. Building your own gets the subset you actually use, web-accessible from everywhere, with the database — and the export — entirely yours.

### Focus Timer / Pomodoro App
URL: https://www.floopfloop.com/en/build/focus-timer

Build your Focus Timer with AI in under 5 minutes

Build a Pomodoro-style focus timer with configurable work / short-break / long-break intervals, session counter, audible end-of-cycle chime, and a session log persisted to localStorage — generated from a single prompt.

**Example prompts**

- Build a classic Pomodoro timer. 25-minute work blocks, 5-minute short breaks, 15-minute long break after every 4 work blocks. Big mono-font countdown, Start / Pause / Reset buttons, current-cycle indicator (Work 1 / 4, Short Break, Work 2 / 4, etc.). End-of-cycle chime via Web Audio (no audio file). Persists today's completed-cycle count to localStorage.
- Create a deep-work timer for writers. Single 90-minute block (no breaks), giant timer, distraction-free fullscreen layout, white-noise background loop via Web Audio (operator can swap the frequency). Saves total minutes focused per day to a 7-day bar chart on the page.
- Design a study timer for students. Configurable work + break durations via inputs at the top, session goal slider (1-12 sessions), progress ring around the timer, end-of-session toast. Streak counter for consecutive days with at least one completed session — same convention as Duolingo.
- Build a developer's focus timer with a Spotify-style minimal dark UI. 50-minute work + 10-minute break. Adds the active block label to document.title so it's readable in the browser tab while another window is focused. Keyboard shortcuts: Space starts/pauses, R resets.

**Frequently asked questions**

- **Q:** How does the chime work without an audio file?
  **A:** The end-of-cycle chime is synthesised in the browser via the Web Audio API (`new AudioContext().createOscillator()`) — no MP3 to host, no CORS to worry about. The pitch + envelope + duration are configurable at the top of `focus-timer.tsx`; default is a 880Hz sine wave at 0.4s with a gentle fade-out.
- **Q:** Where does session history get saved?
  **A:** localStorage under `focus-timer:v1` — today's completed-cycle count, total minutes focused, and the running streak. No server, no account. Open the page on a different device and you start fresh; refine with 'sync via a Postgres table keyed on a user_id cookie' for cross-device continuity.
- **Q:** Can I change the work / break durations?
  **A:** The default 25 / 5 / 15 minute split is configurable via constants at the top of `focus-timer.tsx`. Refining with 'expose work / short / long break durations as visible input fields on the page' adds them to the UI as numeric inputs the user can adjust without touching the source.
- **Q:** Does the timer keep running if I switch tabs?
  **A:** Yes — the countdown is driven by a `requestAnimationFrame` loop that compares against `performance.now()` rather than incrementing a JS counter. Browser tab throttling can slow the loop, but the timer still resolves to the correct end time when the tab comes back to the foreground.
- **Q:** Will my computer go to sleep mid-session?
  **A:** Browsers don't prevent system sleep on their own. Refine into the chat with 'request a wake lock when the timer is running via the Screen Wake Lock API' to keep the display awake while a session is active. Falls back gracefully on browsers without the API.
- **Q:** Can I customize the end-of-session notification?
  **A:** Yes — the template ships with the synthesised chime, a toast, and an update to `document.title`. Refining with 'also fire a browser Notification when a work block ends, after requesting permission once' wires up the Notification API for desktop badges.
- **Q:** Is there an app or just the web version?
  **A:** Just the web version. The page is a single static React route, so installing as a PWA on iOS / Android / desktop works out of the box (Share → Add to Home Screen). Refine with 'add a manifest.json + service worker so it installs as a PWA' if you want a custom icon and offline support.

### Habit Tracker
URL: https://www.floopfloop.com/en/build/habit-tracker

Build your Habit Tracker with AI in under 5 minutes

Build a habit-tracker app with a daily check-off grid, per-habit streak counter, weekly + monthly heatmap views, optional reminder hint per habit, and a 90-day history visualisation — generated from a single prompt.

**Example prompts**

- Build a daily habit tracker with a checkbox grid (rows = habits, cols = last 7 days). Add habit, edit habit, delete habit. Per-habit streak counter beside the name. Tap any cell to toggle done / not-done for that day. Persists to localStorage. Shows a 'weekly completion' percentage at the top of the page.
- Create a habit tracker focused on the morning routine. Seed it with five habits (meditate, hydrate, journal, stretch, plan-the-day). Vertical card layout per habit, big tap targets for mobile, longest-streak badge per habit. Bottom of the page: 'days perfect' counter (days where every habit was completed).
- Design a 75-Hard challenge tracker. Seven fixed checkboxes per day (workout 1, workout 2, gallon-water, read 10 pages, diet, no alcohol, progress photo). Calendar grid for the 75-day run, missed-a-day modal explains the reset rule. PDF export button at the bottom (window.print() with print-friendly CSS).
- Build a habit tracker with mood logging. Per-day: list of habits checked off + a 1-5 mood scale + optional note (capped at 200 chars). 'Mood by habit-completion' bar chart shows correlation: average mood on days when all habits were done vs. days when none were.

**Frequently asked questions**

- **Q:** Where does the data live?
  **A:** localStorage — every check, edit, and stat is stored under `habit-tracker:v1`. No server, no account, no cross-device sync. Refining with 'sync to a habits + check-ins Postgres table keyed on a session cookie' graduates to a real backend.
- **Q:** How are streaks calculated?
  **A:** Per habit, the streak is the longest run of consecutive days ending on the most-recent completed day. Missing the current day mid-day doesn't break the streak until midnight passes — same forgiving-until-end-of-day rule that Duolingo uses.
- **Q:** Can I add a habit reminder?
  **A:** The default template has an optional `reminder` field per habit that shows as a small text hint on the card. For actual push notifications refine with 'add a Web Push subscription button + a `vapid_keys` env var setup so the server can ping subscribers'. Push requires a server endpoint, which is more involved than the localStorage default.
- **Q:** What happens if I miss a day?
  **A:** The streak resets to zero on the next visit if the gap is greater than 24 hours. Refining with 'add a single 7-day-per-year freeze pass' adds an Anki-style streak-freeze affordance for the inevitable bad week.
- **Q:** Can I see my long-term history?
  **A:** Yes — the template ships a 90-day heatmap (GitHub-contributions-style) per habit, plus a 'days perfect' aggregate counter. For year-long history refine with 'expand the heatmap to 365 days and add a year-selector dropdown'.
- **Q:** Is it ok if I track multiple habits with very different cadences?
  **A:** The default model is daily yes/no per habit. For habits with a different cadence (twice a week, alternate days, etc.) refine with 'add a target_days_per_week field per habit and adjust the streak math to count toward the target rather than every day'.
- **Q:** Will it work offline?
  **A:** After first load yes — the whole page is client-rendered and localStorage is local. For full offline-first refine with 'add a service worker that caches the page shell'. The default page already works on a flaky connection because every interaction is synchronous against localStorage.

### Podcast Website
URL: https://www.floopfloop.com/en/build/podcast-website

Build your Podcast Website with AI in under 5 minutes

Build a podcast website with a featured-show hero, trending-episode list, real audio playback via a fixed-bottom player bar (in-page <audio>, no third-party embed), category filters, and a newsletter signup — generated from a single prompt.

**Example prompts**

- Build a podcast directory site. Hero card for the featured show with title + tagline + listener count. Trending Episodes section ranked by play count, each row has a Play button wired to a real in-page <audio> element via a CustomEvent — clicking Play streams the episode's audio_url through the fixed-bottom player bar. Category pill row at the top (Tech, True Crime, Comedy, Business, Science).
- Create a single-show podcast site for an indie podcast. Hero is the latest episode (title + episode number + duration + Play button). 'All episodes' grid below shows every prior episode in reverse-chronological order, paginated 10 per page. Show notes per episode pulled from a markdown field on the row.
- Design a podcast network site with multiple shows. Top-level grid of shows (logo + tagline + listen-count), click a show to drill into its episode list. Player state persists across show-switches — start an episode of one show, browse to another show, and the player keeps streaming.
- Build a podcast site with a 'Listen on' row of distribution links (Apple Podcasts, Spotify, YouTube, RSS feed, Overcast) on the show page. RSS feed at /feed.xml auto-discovered via <link rel="alternate"> so Apple Podcasts can ingest the show without manual submission.

**Frequently asked questions**

- **Q:** How does the in-page audio player work?
  **A:** A single page-level <AudioPlayer> client component mounts one <audio> ref plus a fixed-bottom playback bar (play/pause/close). Play buttons in the trending list dispatch a `podcast-platform:play-episode` CustomEvent with the episode's audio_url; the player listens and starts streaming. CustomEvent-based wiring avoids threading a React context several levels deep through the trending list.
- **Q:** Where do the audio URLs come from?
  **A:** Each episode row has an `audioUrl: string` field. Default is empty in the shipped seed data, which renders the Play button disabled with a tooltip explaining the gap. Set the URL to a real MP3 (an RSS-feed enclosure URL, your own CDN, an Internet Archive item, etc.) and the player streams it inline. No audio hosting bundled with the template.
- **Q:** Can listeners scrub through the episode?
  **A:** The default player bar is play / pause / close — no scrubber or speed controls. The native <audio> element supports both; refine with 'expose the currentTime + duration in the AudioPlayer bar with a draggable progress slider' to add the timeline.
- **Q:** Does it support an RSS feed for Apple Podcasts?
  **A:** Not in the default ship — refine with 'add a /feed.xml route that emits an RSS 2.0 feed with itunes:* extensions for every episode'. Apple Podcasts and every podcast app picks it up automatically once the URL is submitted in iTunes Connect.
- **Q:** Can I add show notes / transcripts?
  **A:** The default episode shape doesn't include them. Refine with 'add an optional showNotes (markdown) and transcript (plaintext) field per episode; render show notes below the Play button and put transcripts on a /episode/[slug] route'. The codegen agent scaffolds both.
- **Q:** What about Spotify / Apple Podcasts embed players?
  **A:** The template prefers an in-page <audio> over third-party embeds — faster first paint, no cookie banner, no cross-origin issues. If you want the Spotify embed on top of an episode card, refine with 'add a spotifyEpisodeId field per row and render the Spotify embed iframe when set'.
- **Q:** How is the newsletter signup wired up?
  **A:** Same shape as every other FloopFloop template with a newsletter: a real server action that inserts into a `subscribers` table (UNIQUE email + per-IP rate limit). 23505 unique_violation gets surfaced as 'already on the list' rather than an error. No third-party service.

### Bookshelf / Reading Tracker
URL: https://www.floopfloop.com/en/build/bookshelf

Build your Bookshelf with AI in under 5 minutes

Build a Goodreads-style reading tracker with a personal bookshelf, want-to-read / reading / read shelves, per-book ratings, optional notes, and a yearly reading-challenge counter — generated from a single prompt.

**Example prompts**

- Build a personal reading tracker. Three shelves (Want to Read, Currently Reading, Read), each a horizontal scrollable row of book cards. Click 'Add book' to enter title + author + cover URL + status. Drag a book between shelves to update its status. 5-star rating per book on the Read shelf. Stats strip: total books read this year, average rating, currently-reading streak (days).
- Create a book club tracker. Add members + their per-month book ratings + favourite-line snippet. Group voting on next month's book via a poll-style picker (no winner-takes-all — every member's vote is shown). Reading progress per member via a 'page X of Y' input that the cover overlay translates into a progress ring.
- Design a 'reading goal' tracker. Target X books by Dec 31 (configurable), progress ring + on-pace indicator (X% complete, Y% of year elapsed). Book-by-book list below the ring with completed-date stamp. Optional 'genre' tag per book + an end-of-year breakdown chart.
- Build a digital bookshelf for indie publishers. Cover-first grid (3 cols on desktop, 2 on mobile), book detail view with synopsis + author bio + price + 'buy on Amazon' link. Wishlist heart button on every card persists to localStorage.

**Frequently asked questions**

- **Q:** Where do the book covers come from?
  **A:** The template ships expecting an `image_url` field per book. Most operators paste links to Goodreads's cover CDN, Open Library Covers (`https://covers.openlibrary.org/b/id/{olid}-L.jpg`), or the publisher's own assets. For unattributed covers refining with 'fall back to a procedurally-generated solid-colour cover with the title typeset on it' adds a SVG placeholder.
- **Q:** How is reading progress tracked?
  **A:** Per-book `status` is one of 'want_to_read' / 'reading' / 'read'. The 'reading' status optionally carries a `current_page` + `total_pages` pair; the cover overlay renders a progress ring computed as (current_page / total_pages) * 100. No external API needed — operators enter the page count manually.
- **Q:** Can I import my Goodreads library?
  **A:** Not in the default ship — refine with 'add a Goodreads CSV import: parse the standard export columns (Title, Author, ISBN, My Rating, Date Read, Bookshelves) and insert each row'. Goodreads exports up to 5000 books per CSV which the importer handles in batches of 500.
- **Q:** Where does the data live?
  **A:** Postgres via the project's restricted role on the per-tenant schema. Each book is a row in the `books` table; per-IP rate limit (10/hr) on the 'add book' server action stops scripted spam. The codegen agent scaffolds the schema + action together on first generate.
- **Q:** Can multiple users share a shelf?
  **A:** The default model is single-user (one shelf per project). For multi-user refine with 'add an authenticated NextAuth flow + a user_id column on the books table; render only the current user's books on /shelf'. The shared-shelf book-club variant from the example prompts uses a different table shape.
- **Q:** What about a yearly reading challenge?
  **A:** The stats strip surfaces 'books read this year' as a live count; refine with 'add a `goal_books_this_year` env var or DB row and render a progress ring + on-pace text' to upgrade to the Goodreads-style challenge.
- **Q:** Will it work without a Goodreads API key?
  **A:** Yes — the template doesn't call Goodreads at all. Books are entered manually or via the optional CSV import. The Goodreads API was deprecated in 2020 so there's no integration to wire even if you wanted to.

### Helpdesk / Support Ticket System
URL: https://www.floopfloop.com/en/build/helpdesk

Build your Helpdesk with AI in under 5 minutes

Build a Zendesk-style helpdesk dashboard with a queue of tickets, status workflow (open / pending / resolved), priority filtering, agent assignment, response-time SLA tracking, and a per-customer history view — generated from a single prompt.

**Example prompts**

- Build a B2B SaaS support helpdesk. Ticket queue grouped by status (open / pending / resolved), priority colour bars (low / medium / high / urgent), filter strip at the top (status × priority × agent × age). Per-ticket detail page shows the original message + a threaded reply list + an internal-note field that customers don't see. SLA chip per row: 'on time' / '12h to breach' / 'overdue'.
- Create a small-team helpdesk for a 3-person support crew. Round-robin auto-assign new tickets across the three agents (with the option to claim or reassign). Per-agent dashboard view shows that agent's open tickets + average response time + customer satisfaction score (1-5 stars after resolution).
- Design a developer-facing helpdesk for an open-source project. Tickets pull from GitHub Issues via an optional webhook (operator wires the webhook URL after deploy). Severity inferred from issue labels (`bug:critical` → urgent, `enhancement` → low). 'AI suggested reply' button per ticket that the agent can edit before sending.
- Build a customer-support inbox for a small e-commerce shop. Triage view: order_id auto-extracted from the customer's message, fetched against the orders table, surfaced as a side panel on the ticket detail. Replies post-templated with the customer's first name + order tracking link.

**Frequently asked questions**

- **Q:** Where do tickets come from?
  **A:** The default template ships a /contact form that creates a ticket from a website visitor's name + email + message. Refining with 'also accept inbound email by parsing IMAP messages on a scheduled cron' wires the email-to-ticket flow that Zendesk + Intercom charge for separately.
- **Q:** How does the SLA timer work?
  **A:** Per-priority SLA hours are config (default: low=72h, medium=24h, high=8h, urgent=2h). A ticket's `slaBreachAt` is computed at create time as createdAt + SLA hours for its priority. The queue badge colours go: green (>6h to breach), amber (≤6h), red (overdue). Resolved tickets get the SLA chip frozen at the resolution time so the post-hoc reporting matches.
- **Q:** Can agents reply directly from the dashboard?
  **A:** Yes — the ticket detail page has a reply textarea + a server action that inserts a row in the `ticket_replies` table and updates the ticket's `lastReplyAt`. Email delivery is operator's responsibility (the codegen scanner blocks every transactional-mail library); refining with 'integrate Resend / Postmark by wiring the API key as a project secret' gets the agent to scaffold the outbound delivery path.
- **Q:** How is response-time tracked?
  **A:** Per-ticket `firstResponseAt` is set the first time an agent posts a reply (NULL on the customer's reply). Per-agent average is computed across all of that agent's tickets in the selected range. Customers who never get a response have a NULL firstResponseAt — they show up as 'awaiting first reply' at the top of the queue.
- **Q:** Can customers see their own ticket history?
  **A:** Default is agent-facing only. Refine with 'add a per-customer portal at /support/{token} where the token is signed against the customer's email; render their own ticket list + lets them post replies'. Avoids needing a customer-facing auth flow.
- **Q:** What about CSAT (customer satisfaction)?
  **A:** Refine with 'after resolution, email the customer a one-tap 1-5 star rating link that lands on /csat?ticket=X&rating=Y; record the response in a csat_responses table; expose per-agent average on the agent dashboard'. Five additional minutes for the codegen agent to scaffold.
- **Q:** How is the agent dashboard gated?
  **A:** NextAuth login with role-based gates: customers can submit tickets without an account, agents log in via the OAuth flow (Google by default; operator swaps in via env vars), admins can manage the agent pool. The `helpdesk-dashboard` template wires this on first generate.

### Personal Finance Tracker
URL: https://www.floopfloop.com/en/build/personal-finance-tracker

Build your Personal Finance Tracker with AI in under 5 minutes

Build a YNAB-style personal finance dashboard with manual transaction entry, category budgets, monthly spending breakdowns, net-worth tracking, and savings-goal progress rings — generated from a single prompt.

**Example prompts**

- Build a monthly budget tracker. Categories (Rent, Groceries, Dining, Transport, Entertainment, Savings, etc.) with a per-category monthly budget. Manual transaction entry: amount + category + date + note. Spend-vs-budget bar per category, total monthly spend ring at the top, 6-month trend chart showing whether spending is trending up or down per category.
- Create a net-worth tracker for someone juggling multiple accounts. Accounts table (checking, savings, brokerage, crypto, 401k, mortgage, credit card). Per-account balance updated manually monthly. Aggregate net worth chart over time with a moving-average overlay. Negative-balance accounts (debts) render with a red label.
- Design a savings-goal tracker. Goals table (Emergency Fund, House Down Payment, Vacation, etc.) with target amount + target date. Per-goal progress ring + 'on-pace' indicator (you're at X%; you should be at Y% if hitting the target date). Optional monthly auto-contribution input that the page projects forward to forecast goal completion.
- Build a couples' shared finance tracker. Two-person view with combined and individual transactions. Joint accounts vs. separate accounts. Monthly contribution-split rule (50/50 or proportional-to-income). Settle-up button computes who owes whom for the month based on shared expenses.

**Frequently asked questions**

- **Q:** Does it connect to my bank?
  **A:** No — the default template is manual entry only. Bank-data feeds need Plaid / Yodlee / Mastercard Open Banking with KYC, regional licensing, and monthly fees that don't make sense for a single-user tracker. For pulling transactions automatically refine with 'add a CSV import button that parses the standard download from Chase / Wells Fargo / Mint / your bank' — most banks let you export 90 days at a time.
- **Q:** Where does my financial data live?
  **A:** The project's per-tenant Postgres schema. No third-party service has access. The codegen scanner blocks every external-database library (Supabase, Firebase, MongoDB, etc.) so the template can't accidentally exfiltrate the data — everything stays on the project's own RDS schema.
- **Q:** Are the categories customizable?
  **A:** Yes — the default seed has 8 common categories but the schema treats them as plain text strings with no enum constraint, so you can add 'Crypto' / 'Side Hustle' / 'Pet Care' / anything in the UI. Refine with 'let me reorder categories and toggle which ones show on the monthly summary' for a configurable category dashboard.
- **Q:** Can I track multiple currencies?
  **A:** The default model stores `amount: numeric` with no currency column. For multi-currency refine with 'add a currency code column per transaction + per-account; convert to a base currency via a cached fx_rates table updated daily from exchangerate.host'. The codegen agent scaffolds the conversion job in one round.
- **Q:** How do recurring transactions work?
  **A:** The default model is one row per transaction — refine with 'add a recurring_schedule table with frequency (weekly/monthly/yearly), next_due_at, and a daily cron that inserts the next transaction'. Pre-set recurring entries are the difference between YNAB-feeling-effort and Mint-feeling-effort.
- **Q:** Is there a mobile app?
  **A:** Just the web version. The dashboard is mobile-responsive; install as a PWA on iOS / Android (Share → Add to Home Screen) for an app-icon-on-home-screen feel without writing native code. Refining with 'add a manifest.json and service worker so it installs as a real PWA' gives the PWA install prompt + offline cache.
- **Q:** What about budget alerts when I'm overspending?
  **A:** The default UI just shows the spend-vs-budget bar — no notifications. Refine with 'when monthly category spend crosses 80% / 100% of budget, send an email to the user's email-on-file via the resend SDK' (you'll need to wire RESEND_API_KEY as a project secret).

### Webhook Relay API
URL: https://www.floopfloop.com/en/build/webhook-relay

Build your Webhook Relay with AI in under 5 minutes

Build a Pipedream-style webhook receiver with HMAC-SHA256 signature verification, replay-window protection, body-size caps, multi-vendor signature header support (Stripe / GitHub / generic), and a deliveries dashboard — generated from a single prompt.

**Example prompts**

- Build a webhook ingest endpoint that authenticates incoming Stripe webhooks. Verify the `stripe-signature` header against the WEBHOOK_SECRET env var with HMAC-SHA256 + a 5-minute replay window. Cap the body at 1MB before JSON.parse. Persist every successful delivery to a `webhook_events` table with the event type, body, and received-at timestamp; the dashboard shows them in reverse-chronological order.
- Create a multi-vendor webhook receiver. Accept Stripe (`stripe-signature`), GitHub (`x-hub-signature-256`), and generic (`x-webhook-signature`) header conventions; auto-detect which by header presence and use the matching HMAC algorithm. Per-vendor WEBHOOK_SECRET via separate env vars so a leak of one doesn't compromise the others.
- Design a webhook fan-out relay. Single inbound endpoint receives the event, then fans out to 3 configured downstream URLs (your dev environment, your prod environment, your analytics service). Per-destination retry-with-exponential-backoff on 5xx responses. Delivery log shows the outcome of each fan-out leg.
- Build a low-friction webhook ingest that's open by default (no signature required) so the operator can wire a sender quickly during local dev, but fails CLOSED in production with a 503 + actionable error message if WEBHOOK_SECRET is unset. Dev mode emits a console.warn on every unsigned delivery so the operator notices before shipping.

**Frequently asked questions**

- **Q:** How does signature verification work?
  **A:** HMAC-SHA256 over the raw request body (or `timestamp.body` when a timestamp header is present, the Stripe convention). Constant-time compare so an attacker can't time-discriminate which byte of the signature was wrong. Three vendor header conventions auto-detected: `x-webhook-signature`, `x-hub-signature-256`, `stripe-signature`.
- **Q:** What stops replay attacks?
  **A:** When the sender includes a timestamp header (`x-webhook-timestamp` or `stripe-timestamp`), the verifier rejects deliveries with a timestamp older than the replay window (default: 5 minutes). The timestamp is bound into the HMAC payload so an attacker can't just rewrite it. Senders without a timestamp header fall through to body-only HMAC — replay protection requires the timestamp.
- **Q:** Will it fail closed if I forget to set WEBHOOK_SECRET?
  **A:** Yes in production — the iter-82 hardening landed exactly this fix. With NODE_ENV=production and an unset WEBHOOK_SECRET, the POST handler returns 503 with an actionable error pointing at Project Settings → Secrets. In dev / preview the route still accepts unsigned requests (it's useful while wiring up a sender) but emits a console.warn on every delivery so the operator notices before promoting to production.
- **Q:** How big can a webhook payload be?
  **A:** Default cap is 1MB, checked via `content-length` header AND a streaming-reader byte count (so a hostile client lying about its length can't slip through). Caps before JSON.parse so a 100MB-of-nested-arrays payload can't burn Lambda memory.
- **Q:** Where do the delivered events get persisted?
  **A:** The default template inserts every successful delivery into a `webhook_events` table (id, vendor, event_type, body jsonb, received_at). For high-volume webhooks refine with 'partition the table by month + drop partitions older than 90 days via a daily cron'.
- **Q:** Can it fan out to multiple destinations?
  **A:** Default ships single-destination (just persist). For fan-out refine with 'add a webhook_destinations config table + per-event POST to every active destination URL with retry-on-5xx using exponential backoff (1s, 2s, 4s, 8s, capped at 4 retries)'. Pipedream charges per outbound delivery; FloopFloop's runs on your own Lambda.
- **Q:** How is it different from /api/webhooks/stripe in the FloopFloop monorepo?
  **A:** That's the receiver for FloopFloop's own Stripe billing webhooks — fixed to Stripe, fixed to the FloopFloop pricing tables. The webhook-relay template is general-purpose: any vendor, any consumer schema, any backing table. Use it for your project's webhook ingest, not for FloopFloop platform events.

### Employee Directory
URL: https://www.floopfloop.com/en/build/employee-directory

Build your Employee Directory with AI in under 5 minutes

Build an employee directory with profiles, org charts, department filtering, and search — perfect for internal team tools.

**Example prompts**

- Create an employee directory with a searchable card grid showing name, photo, title, department, and email. Include department filters, an org chart view, an employee detail page with contact info and skills, and an admin add/edit form.
- Build a company people directory with a list and grid toggle, manager hierarchy tree, a new-hire onboarding checklist section, birthday calendar, team size analytics, and a Slack-handle lookup.
- Design a remote team directory with timezone indicators, availability status dots, a world-map view of team locations, video-call links, a skills matrix for project staffing, and a team-randomizer for social meetings.
- Create a small business staff directory with roles and responsibilities, certification tracking, PTO calendar integration, emergency contact section (admin-only), and a print-friendly team roster.

**Frequently asked questions**

- **Q:** Can employees search for colleagues?
  **A:** Yes. The directory includes search by name, department, role, skills, and location with instant filtering.
- **Q:** Does it include an org chart?
  **A:** FloopFloop can generate visual organizational charts showing reporting structure and team hierarchy.
- **Q:** Can I restrict access to certain information?
  **A:** Yes. Sensitive fields like emergency contacts or salary can be restricted to admin-only views using access controls.
- **Q:** Does it support profile photos?
  **A:** Employee cards include photo placeholders and support for profile images, initials avatars, or Gravatar integration.
- **Q:** Can I filter by department?
  **A:** Department, team, location, and role filters are all supported for easy navigation of large directories.
- **Q:** Is it suitable for remote teams?
  **A:** Yes. Remote-friendly features like timezone displays, availability status, and video-call links can be included.

### Knowledge Base
URL: https://www.floopfloop.com/en/build/knowledge-base

Build your Knowledge Base with AI in under 5 minutes

Build a searchable knowledge base with articles, categories, FAQ sections, and a help center layout — all generated from a prompt.

**Example prompts**

- Create a knowledge base with a search-first homepage, categorized article cards (Getting Started, Account, Billing, Troubleshooting), an article page with a table of contents sidebar, related articles, and a 'Was this helpful?' feedback widget.
- Build a product documentation site with versioned docs, a sidebar navigation tree, code snippet blocks with copy buttons, a search with instant results, changelog page, and a contributor guide.
- Design an internal wiki with a team-editable article system, category tagging, a recently updated feed, a bookmarks/favorites feature, article commenting, and an admin content review queue.
- Create a customer help center with a FAQ accordion, a video tutorials section, a troubleshooting wizard (step-by-step), a contact support form, ticket status checker, and a community forum preview.

**Frequently asked questions**

- **Q:** Can users search the knowledge base?
  **A:** Yes. Full-text search with instant results, category filtering, and relevance ranking is included.
- **Q:** Can I organize articles by category?
  **A:** Articles can be grouped into categories, subcategories, and tags for easy browsing and navigation.
- **Q:** Does it support rich content?
  **A:** Article pages support formatted text, images, code blocks, tables, videos, and embedded content.
- **Q:** Can I track which articles are helpful?
  **A:** A feedback widget with thumbs up/down or star ratings can be included on every article page.
- **Q:** Is it suitable for internal documentation?
  **A:** Yes. Use FloopFloop's private access controls to create an internal-only knowledge base for your team.
- **Q:** Can I add a contact form for unanswered questions?
  **A:** A support contact form, ticket submission, or chat widget can be included for questions not covered in the articles.

### Community Forum
URL: https://www.floopfloop.com/en/build/community-forum

Build your Community Forum with AI in under 5 minutes

Build a community forum with categories, threads, votes, moderation tools, and email digests — a Discourse-style board that lives on your own domain.

**Example prompts**

- Build a community forum with categories, threaded discussions, sign-up and login, markdown posts with image embeds, upvotes, and a new/top-this-week sorting toggle. Moderators can pin, lock, and delete threads.
- Create a product community with categories for announcements, help, and feature requests. Feature requests get an upvote button and a status label — planned, in progress, shipped — that only admins can change.
- Design a Stack-Overflow-style Q&A board: questions with tags, answers sorted by votes, an accepted-answer checkmark controlled by the question author, and reputation points for upvoted answers. Include a weekly digest email of the top unanswered questions.
- Build a private forum for a paid community: invite-only signup, a member directory, direct messages between members, and an admin dashboard with daily-active-members and posts-per-week charts.

**Frequently asked questions**

- **Q:** What moderation tools are included?
  **A:** The working set every board needs: pin, lock, move, and delete threads; a report button that feeds a moderator queue; user suspensions and bans; and a moderation log so admins can see who did what. Communities die from unmoderated spam faster than from any feature gap, so this is the part to take seriously on day one.
- **Q:** How is spam kept out?
  **A:** Layered friction: rate limits on posting, no links until an account has a few approved posts, a honeypot on signup, and a first-post approval queue for new members if you want it. The link restriction alone removes most drive-by SEO spam, which is the bulk of forum abuse.
- **Q:** Do members get notifications?
  **A:** Email notifications on replies to your thread and @mentions, plus a weekly digest of top threads — the single best re-engagement tool a small community has. Notification preferences are per-member, because over-emailing is how forums end up in spam folders.
- **Q:** Is the forum good for SEO?
  **A:** Public threads are the classic SEO engine: every question your community answers becomes an indexable page targeting a long-tail query, on your domain. It's how Stack Overflow and Reddit own search results. Private categories stay out of the index; public ones accumulate.
- **Q:** Can I migrate an existing community?
  **A:** If you can export it, an importer can be built for it — ask for one that maps your Discourse or phpBB export into categories, threads, and posts, preserving authorship by matching email addresses. Members re-set passwords on first login; history arrives intact.
- **Q:** Can people read without an account?
  **A:** Guest reading with member-only posting is the default that grows a community: public threads are shareable and indexable, and the join prompt appears exactly when someone has something to say. Fully private boards flip one setting.

### Fitness Tracker
URL: https://www.floopfloop.com/en/build/fitness-tracker

Build your Fitness Tracker with AI in under 5 minutes

Build a fitness tracking app with workout logs, progress charts, goal setting, and exercise libraries — all generated by AI.

**Example prompts**

- Create a fitness tracker with a daily workout log form (exercise, sets, reps, weight), a weekly summary chart, a personal records table, a body measurement tracker, a progress photo timeline, and a goal-setting section with progress bars.
- Build a running tracker with a run log (distance, time, pace, route notes), a monthly mileage chart, a personal best records board, a training plan calendar, shoe mileage tracker, and a race countdown.
- Design a gym companion app with an exercise library searchable by muscle group, a workout builder with drag-and-drop exercises, a rest timer, a one-rep-max calculator, a strength progression chart, and a workout sharing feature.
- Create a wellness tracker combining fitness, nutrition, and mindfulness. Include a daily water intake tracker, meal log with calorie estimates, meditation minutes log, sleep quality chart, and a weekly wellness score dashboard.

**Frequently asked questions**

- **Q:** Can I log workouts and track progress?
  **A:** Yes. The fitness tracker includes workout logging forms and progress charts that visualize your improvement over time.
- **Q:** Does it include an exercise library?
  **A:** FloopFloop can generate a searchable exercise database organized by muscle group, equipment, and difficulty level.
- **Q:** Can I set fitness goals?
  **A:** Goal-setting features with target dates, progress bars, milestone markers, and achievement badges can be included.
- **Q:** Does it track body measurements?
  **A:** Yes. Weight, body measurements, BMI, and body composition can all be tracked with historical charts.
- **Q:** Can I share my workouts?
  **A:** Workout sharing, public profiles, and community features can be added to your fitness tracker.
- **Q:** Is it mobile-friendly?
  **A:** Absolutely. The fitness tracker is optimized for mobile use at the gym with large buttons and easy input forms.

### Recipe App
URL: https://www.floopfloop.com/en/build/recipe-app

Build your Recipe App with AI in under 5 minutes

Build a recipe app with ingredient lists, cooking instructions, meal planners, and grocery lists — all generated from a simple description.

**Example prompts**

- Create a recipe app with a recipe card grid showing dish photo, title, cooking time, and servings. Include a detail page with ingredients list, step-by-step instructions, a nutrition panel, a serving-size adjuster, and a save-to-favorites button.
- Build a meal planning app with a weekly calendar, drag-and-drop recipe assignments, an auto-generated grocery list, a pantry inventory tracker, meal prep time estimates, and a daily calorie summary.
- Design a community recipe sharing platform with user-submitted recipes, a rating and review system, cooking difficulty tags, a trending recipes section, a holiday/seasonal collection, and a recipe-of-the-day feature.
- Create a diet-specific recipe app with filters for keto, vegan, gluten-free, and paleo. Include macro calculations, ingredient substitution suggestions, a weekly menu generator, a shopping list export, and a cooking video placeholder.

**Frequently asked questions**

- **Q:** Can I search recipes by ingredient or dietary preference?
  **A:** Yes. Recipe search with filters for ingredients, cuisine, diet type, cooking time, and difficulty is supported.
- **Q:** Does it include a meal planner?
  **A:** FloopFloop can generate weekly meal planners with calendar views, drag-and-drop assignment, and nutritional summaries.
- **Q:** Can I generate grocery lists?
  **A:** Auto-generated grocery lists based on selected recipes, with quantity aggregation and aisle grouping, can be included.
- **Q:** Does it support serving-size adjustment?
  **A:** Yes. A serving-size adjuster that automatically recalculates all ingredient quantities is a standard feature.
- **Q:** Can users share and rate recipes?
  **A:** Community features with recipe sharing, star ratings, reviews, and favorite collections can be part of your app.
- **Q:** Does it include nutritional information?
  **A:** Nutrition panels with calories, macros, and micronutrients can be generated for each recipe.

### Real Estate Listings
URL: https://www.floopfloop.com/en/build/real-estate-listings

Build your Real Estate Listings Site with AI in under 5 minutes

Build a real estate listings site with property search, map views, filters, virtual tour placeholders, and agent profiles — powered by AI.

**Example prompts**

- Create a real estate listings site with a property search bar, a map view with pins, a listing grid with photos, price, beds, baths, and sqft. Include a property detail page with a photo gallery, features list, agent contact form, and a mortgage calculator.
- Build a rental listings platform with apartment cards, price-range and bedroom filters, a neighborhood guide, a virtual tour placeholder, a tenant application form, and a landlord listing submission page.
- Design a commercial real estate site with office, retail, and industrial categories, a map-based search, lease terms display, property comparisons table, an investment calculator, and a broker directory.
- Create a luxury real estate showcase with full-screen property hero images, a curated collections page, lifestyle feature descriptions, a private viewing request form, a neighborhood insights section, and an agent team page.

**Frequently asked questions**

- **Q:** Can visitors search and filter properties?
  **A:** Yes. Property search with filters for price, bedrooms, bathrooms, property type, location, and amenities is included.
- **Q:** Does it include a map view?
  **A:** Map views with property pins, cluster markers, and draw-to-search areas can be generated for your listings site.
- **Q:** Can I show property details with galleries?
  **A:** Property pages include photo galleries, feature lists, floor plans, virtual tour placeholders, and neighborhood information.
- **Q:** Does it include a mortgage calculator?
  **A:** Yes. An interactive mortgage calculator with adjustable loan amount, interest rate, and term can be included on property pages.
- **Q:** Can agents manage their listings?
  **A:** An agent dashboard with listing management, lead tracking, and profile editing can be part of the platform.
- **Q:** Is it suitable for both sales and rentals?
  **A:** Absolutely. Whether for home sales, rentals, commercial leases, or vacation properties, the platform adapts to your needs.

### Directory Website
URL: https://www.floopfloop.com/en/build/directory-website

Build your Directory Website with AI in under 5 minutes

Build a directory website with categorized listings, search and filters, a submit-a-listing flow, featured spots, and reviews — a niche directory on your own domain.

**Example prompts**

- Build a local business directory with listings (name, photo, category, address, phone, website, opening hours), category pages, a search box with filters for category and neighbourhood, and a detail page per listing with a map placeholder and reviews.
- Create a niche directory of independent coffee roasters: a submit-your-roastery form that lands in a moderation queue, admin approve/reject with edits, listing pages with tasting notes and shipping regions, and a featured section on the homepage.
- Design a professional directory for freelance designers: profiles with portfolio links, skills, rates, and availability status, filterable by skill and budget, a contact form per profile that emails the freelancer, and a verified badge admins can grant.
- Build a SaaS-tools directory with listings tagged by category and pricing model, user reviews with star ratings, sort by rating or recency, comparison-friendly listing pages, and a paid featured slot at the top of each category page.

**Frequently asked questions**

- **Q:** How do new listings get added?
  **A:** Two paths that usually coexist: you seed the directory yourself (essential — an empty directory attracts nothing), and a public submit form feeds a moderation queue where you approve, edit, or reject. Moderated submission is what keeps quality high enough that the directory stays worth browsing.
- **Q:** What makes a directory rank in search?
  **A:** Every listing and every category page is an indexable URL targeting a long-tail query — 'coffee roaster Utrecht', 'freelance brand designer under €80/h'. Directories are SEO machines by structure: hundreds of pages, each answering a specific search. Unique descriptions per listing beat scraped boilerplate, which search engines discount.
- **Q:** Can listings have reviews?
  **A:** Yes — star ratings with text reviews, shown with an average on the listing and sortable category pages. Reviews are the moat: data anyone can copy, but reviews accumulate only where the audience is. Require sign-in to review and let owners respond publicly.
- **Q:** How do directories make money?
  **A:** The classic three: featured placement (paid top-of-category slots, clearly marked), enhanced listings (more photos, links, a badge), and accepting submissions free but charging for expedited review. All three are flags on a listing row — start free, add monetisation when traffic proves demand.
- **Q:** Can businesses claim and edit their own listing?
  **A:** Yes — a claim flow where the owner verifies (via the listed email or a review step) and then edits their own listing, subject to your moderation. Claimed listings stay fresher, and the claim email is a natural upsell moment for featured placement.
- **Q:** Why not build it on Softr or a WordPress directory theme?
  **A:** No-code directory builders meter by records and visitors; WordPress themes age into plugin-conflict maintenance. A directory is structurally a database with good search and SEO-friendly pages — exactly what FloopFloop generates — with listings as rows you own and the moderation/monetisation workflow matching how you actually run it.

### Job Board
URL: https://www.floopfloop.com/en/build/job-board

Build your Job Board with AI in under 5 minutes

Build a job board with listings, search filters, application forms, and employer dashboards — all generated by AI in minutes.

**Example prompts**

- Create a job board with a search bar with keyword and location fields, a job listing grid with company logo, title, salary range, and tags. Include a job detail page with description, requirements, benefits, and an apply form with resume upload placeholder.
- Build a remote-jobs-only board with timezone filters, salary transparency badges, a company culture page, a tech stack filter, a newsletter for new jobs, and a featured employers section.
- Design a freelance gig board with project-based listings, budget ranges, deadline indicators, a proposal submission form, a portfolio link field, client reviews, and a top-freelancers leaderboard.
- Create an internal career portal for a company with department-organized positions, an employee referral form, an application tracker for candidates, a culture and benefits page, team spotlight videos, and an FAQ for applicants.

**Frequently asked questions**

- **Q:** Can job seekers search and filter listings?
  **A:** Yes. Search by keyword, location, salary, job type, experience level, and industry with instant filtering.
- **Q:** Can employers post jobs?
  **A:** An employer dashboard with job posting forms, application management, and company profile editing can be included.
- **Q:** Does it support applications?
  **A:** Job pages include application forms with fields for name, email, resume, cover letter, and custom questions.
- **Q:** Can I feature certain job listings?
  **A:** Featured listings, sponsored positions, and highlighted employers can be prominently displayed on the board.
- **Q:** Does it work for niche industries?
  **A:** Absolutely. Whether for tech, healthcare, creative, or any niche, the job board adapts to your industry's needs.
- **Q:** Can candidates track their applications?
  **A:** Application tracking dashboards with status updates (applied, reviewed, interviewed, offered) can be generated.

### Event Planner
URL: https://www.floopfloop.com/en/build/event-planner

Build your Event Planner with AI in under 5 minutes

Build an event planning platform with event pages, RSVP management, schedules, and attendee tracking — all generated by AI.

**Example prompts**

- Create an event planner with an event creation form (name, date, venue, description), an event page with agenda, speaker bios, and venue map. Include an RSVP form with meal preference, a ticket selection page, and an attendee list for organizers.
- Build a conference platform with a multi-track schedule grid, speaker profile cards, session booking, a live-stream placeholder, a networking lounge, a sponsors section, and a post-event feedback survey.
- Design a wedding planning app with a guest list manager, seating chart builder, vendor contacts, a budget tracker, a timeline checklist, an RSVP portal, and a photo gallery for the event day.
- Create a community meetup platform with recurring event support, a calendar view, location-based event discovery, an attendee check-in interface, a photo and recap section, and organizer analytics.

**Frequently asked questions**

- **Q:** Can I create event pages?
  **A:** Yes. FloopFloop generates event pages with descriptions, schedules, speaker bios, venue details, and registration forms.
- **Q:** Does it support RSVP and ticketing?
  **A:** RSVP forms, ticket selection with pricing tiers, and registration confirmations can all be included.
- **Q:** Can I manage attendees?
  **A:** Attendee lists with check-in status, meal preferences, and contact details are generated for event organizers.
- **Q:** Does it support recurring events?
  **A:** Yes. Recurring event schedules, series pages, and calendar integration can be part of your event planner.
- **Q:** Can I track event budgets?
  **A:** Budget tracking with expense categories, vendor payments, and remaining balance displays can be included.
- **Q:** Does it include a schedule view?
  **A:** Multi-track schedules, timeline views, and agenda builders with time slots and speaker assignments are supported.

### Learning Management System
URL: https://www.floopfloop.com/en/build/learning-management-system

Build your Learning Management System with AI in under 5 minutes

Build an LMS with course catalogs, lesson players, progress tracking, quizzes, and student dashboards — all AI-generated.

**Example prompts**

- Create a learning management system with a course catalog grid, a course detail page with lesson list, a lesson viewer with video placeholder and text content, a progress tracker, a quiz page with multiple-choice questions, and a student dashboard with enrolled courses.
- Build an online academy with instructor profiles, a course builder form, a curriculum outline page, a certificate generator placeholder, a discussion forum per course, and a revenue dashboard for course creators.
- Design a corporate training LMS with mandatory courses, completion tracking, a compliance dashboard, a quiz-retry policy, departmental enrollment, and a manager view showing team training status.
- Create a language learning platform with level-based lessons, a vocabulary flashcard system, a pronunciation practice section, a streak tracker, leaderboard for weekly progress, and a lesson scheduler.

**Frequently asked questions**

- **Q:** Can I create and organize courses?
  **A:** Yes. Course catalogs, lesson structures, curriculum outlines, and course categories are all generated from your description.
- **Q:** Does it include quizzes and assessments?
  **A:** FloopFloop can generate quiz pages with multiple-choice, true/false, and free-text questions with scoring.
- **Q:** Can students track their progress?
  **A:** Student dashboards with enrolled courses, lesson completion percentages, quiz scores, and certificates are supported.
- **Q:** Does it support video lessons?
  **A:** Lesson pages include video player placeholders, embedded content support, and structured learning materials.
- **Q:** Can I issue certificates?
  **A:** Certificate generation with course name, student name, completion date, and downloadable PDF format can be included.
- **Q:** Is it suitable for corporate training?
  **A:** Yes. Mandatory course assignments, compliance tracking, department enrollment, and manager reporting views are all supported.

### Social Media Dashboard
URL: https://www.floopfloop.com/en/build/social-media-dashboard

Build your Social Media Dashboard with AI in under 5 minutes

Build a social media management dashboard with post scheduling, analytics, multi-platform views, and content calendars — powered by AI.

**Example prompts**

- Create a social media dashboard with platform tabs (Instagram, Twitter, LinkedIn, TikTok), a post scheduler with date/time picker and preview, an analytics section with follower growth, engagement rate, and top posts, and a content calendar view.
- Build a social media analytics tool with a unified feed of all platforms, sentiment analysis display, hashtag performance tracker, competitor comparison charts, best posting time heatmap, and an auto-generated monthly report.
- Design a content planning dashboard with a drag-and-drop content calendar, a post composer with character counter and image preview, a media library, a brand voice guidelines section, and a team approval workflow.
- Create an influencer dashboard with audience demographics charts, sponsored post tracker, brand partnership pipeline, rate card generator, media kit page, and an earnings summary with payout history.

**Frequently asked questions**

- **Q:** Can I manage multiple social platforms?
  **A:** Yes. The dashboard supports multi-platform views with tabs or unified feeds for Instagram, Twitter, LinkedIn, TikTok, and more.
- **Q:** Does it include post scheduling?
  **A:** A post scheduling interface with date/time pickers, content preview, and a content calendar view can be included.
- **Q:** Can I track analytics?
  **A:** Follower growth, engagement rates, reach, impressions, top-performing content, and trend analysis are all supported.
- **Q:** Does it include a content calendar?
  **A:** A visual content calendar with drag-and-drop scheduling, status indicators, and platform icons is generated.
- **Q:** Can I collaborate with my team?
  **A:** Team features like draft/review/approve workflows, role assignments, and comment threads can be part of your dashboard.
- **Q:** Does it support competitor analysis?
  **A:** Competitor tracking with follower comparison, content benchmarks, and engagement rate comparisons can be included.

### AI Chatbot
URL: https://www.floopfloop.com/en/build/ai-chatbot

Build your AI Chatbot with AI in under 5 minutes

Build a customer-facing AI chatbot or internal AI assistant — bring your own LLM key, ground it in your own content, and embed it on any site — generated by AI in minutes.

**Example prompts**

- Build a customer-support chatbot for my SaaS that answers questions from a markdown knowledge base. Use OpenAI for the LLM (read OPENAI_API_KEY from project secrets), embed the docs at build time, and surface a sticky chat bubble in the bottom-right corner with a typing indicator and a 'Talk to a human' escape button.
- Create an AI assistant for a real-estate site that answers questions about listings. Pull listing data from a JSON file, use Claude as the LLM (ANTHROPIC_API_KEY secret), and render a full-page chat with a sidebar showing the listings the assistant cited in its last answer.
- Design an internal AI ops assistant my team can ask about our deployment runbooks. Read .md files from a /runbooks folder, embed them with OpenAI's embeddings, store vectors in-memory, and expose a /chat page with conversation history, source citations, and a simple admin page to upload new runbooks.
- Build a multi-tenant AI tutor for a language-learning app. Each user picks a target language, the chatbot adapts its corrections to that language, and conversation history is persisted per user. Show streaming responses, a progress sidebar with a words-learned count, and a daily-streak tracker.

**Frequently asked questions**

- **Q:** Which LLM providers can the chatbot use?
  **A:** Anything you have an API key for — OpenAI, Anthropic, Google Gemini, Mistral, Groq, OpenRouter, or any OpenAI-compatible endpoint. You add the key as a project secret on the Secrets tab; the generated code reads it from process.env, never from client-side code.
- **Q:** Can the chatbot answer questions about my own content (RAG)?
  **A:** Yes. Describe what content the chatbot should ground its answers in — a markdown folder, a JSON catalog, a sitemap of pages — and FloopFloop scaffolds the embedding + retrieval pipeline. By default it uses OpenAI embeddings and an in-memory vector store, which is enough for thousands of chunks; for larger corpora ask for Pinecone, Supabase pgvector, or another store.
- **Q:** Will the chatbot stream responses?
  **A:** Yes — generated chatbots stream tokens by default using server-sent events or the Vercel AI SDK's streaming helpers. The UI ships with a typing indicator and partial rendering so users see the response forming in real time.
- **Q:** Can I embed the chatbot on my existing site?
  **A:** Two options. (1) Use the chatbot project as-is at its floop.tech subdomain or a custom domain. (2) Ask FloopFloop to ship a JavaScript widget snippet and a public iframe embed; you paste a single <script> tag into your existing site and the chatbot bubble appears in the corner.
- **Q:** How do I keep my LLM costs predictable?
  **A:** Set a per-conversation token budget in the prompt and FloopFloop wires it into the model call. You can also gate access behind a login (FloopFloop ships built-in auth), set a daily request quota per user, and log every conversation to your database so you can audit cost per customer.
- **Q:** Are conversations private?
  **A:** By default conversations live on your project's database, or nowhere at all if you ask for ephemeral chats. FloopFloop never reads your users' conversations and the LLM provider's data policy applies — pass {opt_out: true} on OpenAI calls or use Anthropic's no-training endpoints to stop providers from training on your data.

### Crypto Trading Bot
URL: https://www.floopfloop.com/en/build/crypto-trading-bot

Build your Crypto Trading Bot with AI in under 5 minutes

Build an AI-generated crypto trading bot with live Cryptohopper execution. Paper-mode by default, scheduled strategy evaluation, and a live dashboard — no coding required.

**Example prompts**

- Build an RSI signal bot that watches BTC/USDT on a 5-minute candle. Place a buy when RSI drops below 30 and a sell when RSI rises above 70. Gate live orders behind a LIVE_TRADING env flag so paper mode is the default. Add a dashboard showing the current signal, the last price, and whether the bot is paper or live.
- Create a daily DCA bot that buys a fixed amount of Bitcoin from my Cryptohopper account every day at 13:00 UTC. Let me set the base coin (BTC or ETH) and buy amount as project secrets. Show a dashboard with the configured cadence, the connected hopper, and a warning when LIVE_TRADING is off.
- Build a MACD crossover bot on SOL/USDT. Use a 15-minute candle, fetch closes from Binance public klines, compute MACD with the default 12/26/9 parameters, and place a market order on my Cryptohopper hopper on each crossover. Add a dashboard with the MACD histogram, the last crossover, and recent orders.
- Design a multi-coin DCA tracker: pick three coins (BTC, ETH, SOL), buy a set dollar amount of each every week, and render a portfolio dashboard with cost basis, current value (from Binance spot price), and profit percentage per coin. Use Cryptohopper for execution.

**Frequently asked questions**

- **Q:** Does FloopFloop actually place real orders?
  **A:** Orders route through Cryptohopper — you connect your Cryptohopper account via OAuth on the Secrets tab, and the generated bot calls Cryptohopper's REST API to place buys/sells. FloopFloop itself never holds your keys or funds. Every template ships with LIVE_TRADING=false by default, so the first fires run in paper mode until you flip the flag.
- **Q:** Which exchanges are supported?
  **A:** Cryptohopper handles the exchange connection, so any exchange Cryptohopper supports works — Binance, Kraken, Coinbase, KuCoin, Bitfinex, Bybit, OKX, Gemini, Gate.io, MEXC, and more. You set up the hopper on Cryptohopper with your exchange's API keys, then give FloopFloop the hopper ID.
- **Q:** How do I connect my Cryptohopper account?
  **A:** Open your generated project, go to Project Settings → Secrets, and click Connect Cryptohopper on the integration card at the bottom of the tab. You'll be redirected to Cryptohopper to approve read/trade/manage scopes, then land back with tokens ready. FloopFloop refreshes tokens automatically every 30 minutes.
- **Q:** Can I write my own strategy, or am I stuck with the template?
  **A:** Either works. The cryptohopper-signal-bot template ships with an RSI strategy in src/lib/strategy.ts that you can edit freely — swap in MACD, Bollinger Bands, a machine-learning model, whatever. Or start from a blank prompt and describe the strategy in English; the AI writes the code.
- **Q:** How does scheduling work?
  **A:** Each project gets a built-in cron primitive. Templates declare schedules in a floop.crons.json manifest that auto-registers on first deploy, and you can add, edit, pause, or delete jobs from Project Settings → Secrets → Scheduled Jobs. The minimum interval is 1 minute and each fire gets a 30-second handler budget.
- **Q:** Is this legal / safe?
  **A:** FloopFloop is a builder, not a trading service — the legal framework around your bot is between you, your exchange, and Cryptohopper. Check your jurisdiction's rules before running live orders, start with paper trading (the default), and never commit funds you can't afford to lose. Past performance is not indicative of future results; this is not financial advice.

### Membership Site
URL: https://www.floopfloop.com/en/build/membership-site

Build your Membership Site with AI in under 5 minutes

Launch a paid membership site with gated content, recurring subscriptions, member-only pages, and a clean login portal — generated by AI in minutes.

**Example prompts**

- Build a paid membership site for a course creator. Include a public landing page with pricing tiers (monthly + annual), Stripe-checkout-style sign-up, a members-only dashboard with course modules and a progress bar, gated video lessons, a downloadable resources area, and an account page where members can manage their subscription.
- Create a community membership site for a writers' circle. Include a public homepage describing the community, a join flow with a single $15/month tier, a private members feed with post composer and threaded replies, a directory of fellow members with profile pages, and a simple admin page for moderating posts.
- Design a paid newsletter and resource hub for product designers. Include a public homepage with sample articles, a paid tier that unlocks the full archive, a members-only library of templates and Figma kits, a profile/account page, and an email-preferences settings screen.
- Build a fitness coaching membership site with a public landing page and FAQs, a sign-up flow for a $29/month tier, a members-only workout library organized by program and difficulty, a habit-tracker dashboard, a meal-plan section, and a private chat-style support thread between each member and their coach.

**Frequently asked questions**

- **Q:** Can FloopFloop handle recurring billing for memberships?
  **A:** Yes — describe the tiers and pricing in your prompt and FloopFloop wires up checkout, recurring billing, and a customer portal for subscription management. You bring your own Stripe (or compatible) keys via the project's Secrets panel; the AI never sees your live keys, only the env-var names.
- **Q:** How do I gate content so only paying members can see it?
  **A:** FloopFloop generates an auth-protected project where any route can be marked members-only. Members log in once, their session is checked on every gated page, and unauthenticated visitors are redirected to the join flow. You can describe gating per page, per tier, or per content type (video, downloads, archive posts, community feed).
- **Q:** Can I have multiple membership tiers with different access?
  **A:** Yes. Describe the tiers in your prompt — for example a $9 reader tier with archive access and a $29 pro tier with templates and a private community. The AI generates per-tier gates and a clean upgrade flow that swaps the user's plan in one click. You can add, rename, or reprice tiers later through the chat.
- **Q:** What about cancellations and refunds?
  **A:** Members can cancel at any time from their account page; the project keeps their access until the end of the billing period and stops the next renewal. Refunds are issued through your Stripe dashboard — FloopFloop generates the customer-portal entry point but doesn't initiate refunds itself, which keeps you in control of your own billing policy.
- **Q:** Will my members' data and content be secure?
  **A:** Yes. Every project ships with hashed passwords, HTTPS-only sessions, server-side route guards on gated content, and isolated per-project Postgres. Member-uploaded files (avatars, downloadable PDFs, lesson videos) live behind signed URLs so they aren't publicly enumerable. The AI follows secure defaults out of the box — you don't have to ask for them.
- **Q:** Can I move my existing members from another platform?
  **A:** Yes — describe your current platform and member-list export format in the chat, and FloopFloop generates a one-time import that creates accounts, sets initial subscription state, and emails members a password-reset link so they can log in. The same flow works for spreadsheets exported from Memberful, Patreon, Substack, Podia, or a custom WordPress site.

### Expense Splitter
URL: https://www.floopfloop.com/en/build/expense-splitter

Build your Expense Splitter with AI in under 5 minutes

Build a Splitwise-style group expense tracker with member avatars, even-split logic, settle-up suggestions that minimize transfers, and per-group balance summaries — generated from a single prompt.

**Example prompts**

- Build a Splitwise-style group expense tracker. Multiple groups (Roommates, Weekend Trip, Office Lunch). Each group has members, each expense has a payer, an amount, and a list of people the bill splits between (default: everyone). Balance summary per member (positive = owed, negative = owes). Settle-up view shows the minimum set of transfers that zeros everyone out.
- Create a roommates bill-splitting app. Rent, utilities, groceries, and shared subscriptions in one place. Each expense tagged with a category. Monthly summary of total spend per category and who's behind on their share. CSV export of the month so it can be archived after settle-up.
- Design a trip expense splitter for a group vacation. Currency selector per expense (USD / EUR / GBP) with a static conversion rate table the user maintains. Per-day spend breakdown. 'Settle up' button generates the smallest list of payments needed to balance everyone out at the end of the trip.
- Build an office lunch expense splitter. Recurring weekly lunch group, rotate-the-payer-by-week tracking, automatic monthly settle-up reminder, and a leaderboard of who has paid most this quarter. Print-friendly settle-up sheet for the office whiteboard.

**Frequently asked questions**

- **Q:** How is this different from Splitwise / Tricount?
  **A:** Splitwise / Tricount are SaaS apps with a free tier and paywalled features. FloopFloop generates an app you fully own — refine the splitting rules, the categories, the settle-up algorithm, anything. No row caps, no ads, your data lives in your own per-project database. Start from the template and iterate by chat.
- **Q:** How does the settle-up math work?
  **A:** Each expense credits the payer the full amount and debits each splitter their share (with the last splitter absorbing rounding pennies so cents tie out exactly). Per-member net balance = sum of credits minus sum of debits. The settle-up view uses a greedy algorithm: largest creditor receives from largest debtor until both flatten, repeat. Produces close to the minimum number of transfers for typical group spending — refine with 'use a flow-network solver for proven-optimal transfers' if you need it.
- **Q:** Can splits be uneven?
  **A:** The default template ships with even-split (everyone in the group pays the same share). Refine with 'add a percent-split mode where each splitter has a weight (Alice 40%, Bob 30%, Carol 30%)' for proportional splits, or 'add an exact-amounts mode where the splitter enters dollar amounts that must sum to the total' for itemized restaurant-style splits.
- **Q:** Where is my data stored?
  **A:** The default template uses browser localStorage so the app works instantly with no signup. Refine with 'add a Postgres backend so groups sync across devices' to move to server storage — the codegen adds the schema, the API routes, and the sync logic in one round. The codegen scanner blocks every external database (Supabase, Firebase, MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can multiple people edit the same group from different devices?
  **A:** Not in the localStorage-only default — that's per-device. For shared editing refine with 'add a per-group share URL that anyone with the link can read; add a per-group passcode that anyone with it can write'. The codegen generates the route, the access check, and the conflict-resolution logic (last-write-wins is fine for low-contention group expense editing).
- **Q:** Does it handle multiple currencies?
  **A:** The default template treats every amount as a single currency (dollar-style formatting, integer cents internally to avoid floating-point drift). Refine with 'add a currency column per expense + a user-maintained fx-rates table so each expense displays in its native currency and the settle-up converts to the group's base currency' for a trip-with-international-stops use case.
- **Q:** Can I generate a settle-up email or Venmo link?
  **A:** Refine with 'add a Venmo deep link (venmo://paycharge?txn=pay&recipients=USERNAME&amount=AMOUNT&note=NOTE) on every settle-up row so tapping it opens the Venmo app pre-filled'. The codegen wires the deep link and the share intent. Email refining works the same way — 'email each member the settle-up sheet via Resend' adds the route and the template.

### Markdown Editor
URL: https://www.floopfloop.com/en/build/markdown-editor

Build your Markdown Editor with AI in under 5 minutes

Build a StackEdit / Bear / Obsidian-style markdown workspace with live preview, multi-document sidebar, autosave to local storage, formatting toolbar, keyboard shortcuts, and .md export — generated from a single prompt.

**Example prompts**

- Build a StackEdit-style markdown editor. Split-pane layout with a monospace editor on the left and a live HTML preview on the right. Toolbar with bold / italic / heading / link / list / quote / code buttons + ⌘B / ⌘I / ⌘K shortcuts. Multi-doc sidebar where the title follows the first heading the user types. Autosave to localStorage every 400ms. Export current doc as a slugified .md file.
- Create a distraction-free writer's workspace like IA Writer. Single-pane focus mode, large monospace text, sentence-level focus mode that dims everything except the current sentence, dark theme by default, word/character/reading-time counter pinned to the footer, no UI chrome at all when typing.
- Design a personal-wiki note app like Obsidian. Multi-document sidebar with nested folders, [[wiki-link]] support that turns into a real link when the target note exists (creates a new note on click otherwise), backlink panel showing every note that mentions the current one, full-text search across all notes.
- Build a meeting-notes app for fast capture during calls. Single-pane editor, autocomplete for @mentions of attendees, hashtag tags that the sidebar groups notes by, /TODO / /DECISION / /BLOCKER slash-commands that insert a styled callout block, end-of-meeting 'summarise' button that calls FloopAI to extract action items.

**Frequently asked questions**

- **Q:** How does this compare to StackEdit / Bear / Typora / Obsidian?
  **A:** StackEdit is the closest functional match — both run in the browser with localStorage and a side-by-side preview. The difference is ownership: this is YOUR app on YOUR subdomain that you can refine indefinitely. Bear / Typora / Obsidian are downloadable native apps with their own file formats; FloopFloop generates a web app you can extend with whatever feature you describe next ('add tag filtering', 'add a daily-note auto-create', etc.) without touching code.
- **Q:** Where are my notes stored?
  **A:** The default template uses browser localStorage so the editor works instantly with no signup. Notes live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so notes sync across devices via a login' to move to server storage — the codegen scaffolds the schema, the API routes, and the sync logic in one round. The scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Is the rendered preview safe from XSS?
  **A:** The default template renders markdown through `marked` and injects the result with dangerouslySetInnerHTML. That's safe for a single-user localStorage editor because the markdown source IS the user — you can't XSS yourself. The src/lib/markdown.ts file explicitly warns operators to add DOMPurify before extending to multi-user / shared notes (anywhere a hostile collaborator's markdown could reach another user's browser).
- **Q:** What markdown flavor is supported?
  **A:** GitHub Flavored Markdown (GFM): tables, autolinks, line breaks, fenced code blocks, lists, blockquotes, strikethrough, task lists, headings, images. Refine with 'add KaTeX rendering for $...$ math expressions' or 'add Mermaid rendering for ```mermaid code blocks' to extend — the codegen wires the parser and the preview CSS in one round.
- **Q:** Can I share a note with someone?
  **A:** Not in the localStorage default — notes are per-device. For sharing refine with 'add a per-note share URL that anyone with the link can read; show a read-only rendered view at /share/[id]'. The codegen generates the route, the per-note share token, and the read-only renderer. Public-write sharing (anyone with the link can edit) follows the same pattern with a separate token tier.
- **Q:** Does it work offline?
  **A:** Reads/writes work offline because everything is localStorage — there's no network call after the initial page load. Refine with 'add a service-worker that caches the app shell so I can open the page with no connection at all' to add full PWA offline support; the codegen scaffolds the manifest and the cache-first service worker in one round.
- **Q:** Can I export all my notes at once?
  **A:** The default exports the active document as a single .md file. For bulk export refine with 'add an Export All button that bundles every note as a .zip of .md files'. The codegen wires the JSZip dependency and the download flow. Markdown-to-PDF / -DOCX is the same shape (`add an Export as PDF using @react-pdf/renderer`).

### Regex Tester
URL: https://www.floopfloop.com/en/build/regex-tester

Build your Regex Tester with AI in under 5 minutes

Build a regex101-style live regex tester with pattern + flags + capture groups, live highlighting on the test subject, replace mode, and a personal pattern notebook saved to the browser — generated from a single prompt.

**Example prompts**

- Build a regex tester with three sticky-bordered panels: pattern (input + flag toggles g/i/m/s/u/y), test subject (textarea), and inspector. As the pattern compiles, highlight every match in the test subject with a yellow marker and show the full match, numbered capture groups, and named groups in the inspector. Invalid patterns render with a red wavy strike-through. Layout is a single-page lab-notebook aesthetic — cream paper background, monospace serif headers, dotted grid.
- Create a developer regex playground inspired by regex101 and regexr. Compile the user's pattern against a test string in real time, highlight matches inline, show match counts and a per-match inspector with capture groups, and add a replace mode with a live String#replace preview that respects $1 / $& / $<name> backreferences.
- Build a regex builder for non-developers: a guided cheatsheet on the side (character classes, anchors, quantifiers, groups, lookarounds, common recipes), each entry click-to-copy into the pattern field. Pattern testing in the main panel with highlighted matches and a 'try this on your own text' textarea. Save useful patterns to a local notebook with one-line names.
- Build a pattern-matching sandbox for log analysis. Paste a regex and a multi-line log sample; highlight every match across lines, group by named-capture (e.g. timestamp / level / message), and surface a frequency count of distinct values per group. Add an export button that copies the pattern + a one-line description for pasting into a Slack channel.

**Frequently asked questions**

- **Q:** How is this different from regex101 or regexr?
  **A:** regex101 and regexr are excellent, but they're shared services with shared limits, sometimes-down dependencies, and ads or paywalls behind some features. The version FloopFloop generates is yours: it lives on your subdomain, has no telemetry, and you can customise the cheatsheet, add favourites, change the colour scheme, or extend it with team-shared patterns without asking anyone for an API quota.
- **Q:** Does it work for JavaScript regex specifically, or for other flavours too?
  **A:** The default template uses JavaScript's RegExp engine (matchAll under the hood), which means it supports g/i/m/s/u/y flags, named capture groups, lookbehind, and Unicode property escapes. If you need PCRE, Python, or Go semantics, ask the AI to swap the engine for a WASM build of pcre2 or oniguruma — it's a templated decision, not a hard wiring.
- **Q:** Is my pattern data sent anywhere?
  **A:** No. The default template runs the regex in the browser using the native RegExp API, saves your pattern notebook to localStorage, and never round-trips your test text to a server. The /api/health endpoint is the only outbound surface and it just confirms the Lambda is reachable.
- **Q:** Can the pattern notebook be shared with a team?
  **A:** Out of the box, the notebook is per-browser. Ask the AI to switch the store to the project's Postgres database with a small login flow, and you get a team-wide pattern library — useful for SREs sharing log-parsing regexes or QA teams documenting input validation rules.
- **Q:** Does the tester support testing replacements?
  **A:** Yes — replace mode previews a live String#replace using your current pattern and flags, with backreferences ($1 / $& / $<name>) working the same as in JavaScript. Useful for sanity-checking a sed-style transform before running it against production data.
- **Q:** Can I extend the cheatsheet?
  **A:** Yes. The cheatsheet is a plain data file (regex-cheatsheet.ts) with six built-in sections: character classes, anchors, quantifiers, groups, lookarounds, and common recipes. Adding a new section or recipe is a one-line edit — ask the AI to add 'SQL injection regex patterns' or 'IP address recipes' and it ships in the next refinement.

### QR Code Generator
URL: https://www.floopfloop.com/en/build/qr-code-generator

Build your QR Code Generator with AI in under 5 minutes

Build a QR code generator that encodes URLs, plain text, WiFi networks, or contact cards (vCard) entirely in the browser — with a CRT-terminal aesthetic, customisable colour and error-correction level, and PNG + SVG download.

**Example prompts**

- Build a QR code generator with four payload types: URL, plain text, WiFi network (SSID + password + WPA/WEP/open + hidden flag), and contact card (vCard 3.0). Live canvas preview that re-renders on every keystroke. Size slider and error-correction level toggles (L/M/Q/H). Download buttons for PNG and SVG. Visual: CRT phosphor terminal — black background with horizontal scanlines, amber glow on every text element, beveled square-corner buttons, IBM Plex Mono throughout. No light mode.
- Create a QR code maker for sharing WiFi networks. Single-page form with SSID, password, encryption type (WPA / WEP / open), and a 'hidden network' checkbox. Generate the WIFI:T:... payload correctly with backslash-escaped reserved characters. Live preview and one-click download as PNG so the operator can print and stick the code on the fridge.
- Build a vCard QR generator for event badges. Form for name, organisation, title, phone, email, website, and optional address. Encode as vCard 3.0 with empty fields skipped (so the QR stays small enough to print at conference-badge size). Default error correction H so a centered logo overlay still scans. Bulk-export mode that takes a CSV of attendees and emits one PNG per row.
- Build a QR code generator with theme switching. Encode URL, text, WiFi, or contact card. Five visual variants — amber CRT, green VT100 phosphor, red-alert arcade, cyan synthwave, magenta neon — controlled by a single CSS variable for the phosphor colour. Same monitor + bevel + scanline pattern across all of them so the design holds together.

**Frequently asked questions**

- **Q:** How is this different from a hosted QR generator like QRCodeMonkey or QRServer?
  **A:** Hosted services log every payload you encode — convenient for them, awful for you if you're encoding a guest WiFi password or a private link. The version FloopFloop generates runs the qrcode library entirely in your browser; the only outbound surface is the /api/health probe. There's no analytics, no per-encode count, no payload retention. You can also customise the visual to anything you want — most hosted services lock the colour and layout behind a paid tier.
- **Q:** Which payload types does it support out of the box?
  **A:** URL (bare hosts get https:// prepended automatically), plain text passed through unchanged, WiFi (WPA / WEP / open, with hidden-SSID flag and the correct MeCard-style escape for `;` `,` `:` `\"` `\\` so the WIFI: string round-trips on a phone camera), and Contact (vCard 3.0 with full name, organisation, title, phone, email, website, and optional address). Adding a fifth payload type is one prompt — ask for SMS, mailto:, geo:, calendar event, etc.
- **Q:** What's the error correction level for?
  **A:** Higher correction lets the symbol survive damage or partial overlays at the cost of denser pixel-grid. L = 7% recovery (densest, fastest to scan); M = 15% (default — fine for almost anything); Q = 25% (tolerates dirt or a small sticker); H = 30% (tolerates a centered logo overlay). Pick H if you plan to drop a small logo into the middle for branding.
- **Q:** Will the QR work when printed?
  **A:** The PNG download is rendered at max(your size, 600px) so even a small on-screen preview prints crisply. The SVG download is lossless and scales to billboard size without pixelation. Phone cameras need around 2cm × 2cm at arm's length for reliable scanning; plan a quiet zone (empty margin) of at least the size of four QR modules around the code if you're embedding it in a design.
- **Q:** Can I add a logo in the middle?
  **A:** Out of the box no — the canvas renders the symbol cleanly with no overlay. Ask the AI to add a logo-overlay step that uses the H error correction level and draws an image scaled to ~20% of the canvas in the centre after the QR is rendered. The H level's 30% recovery margin absorbs the obstructed modules so the code still scans.
- **Q:** Is my QR data sent anywhere?
  **A:** No. All encoding happens in your browser using the qrcode npm library — the payload string, the colours, the EC level, none of it touches a server. The page is set to `force-static`, so it's literally a CDN-cached HTML+JS bundle with no API call other than /api/health (which doesn't see your data).

### Spin the Wheel
URL: https://www.floopfloop.com/en/build/decision-spinner

Build your Spin-the-Wheel decider with AI in under 5 minutes

Build a spin-the-wheel decision maker with a customisable entry list, weighted slices, raffle mode, and a carnival-marquee aesthetic — entries and history live in browser storage, nothing leaves the page.

**Example prompts**

- Build a spin-the-wheel decision maker. Single page: a circular SVG wheel with one slice per entry, a chunky 'Spin!' CTA, an entry editor in a sidebar with weight + colour per row, a 'remove winner after spin' raffle-mode toggle, and a last-20-spins history list. Visual: carnival marquee — cream canvas with diagonal stripe backdrop, marquee bulb border around the wheel, Fredoka display type, big red 'Spin!' button with a bottom-shadow press effect, confetti burst on winner reveal. Everything client-side via localStorage.
- Create a wheel-of-names tool for classroom random-caller use. Teacher enters student names, hits Spin, the wheel rotates 6-8 turns over ~5s with realistic deceleration, and a winner modal pops with the chosen name. Toggle to remove the winner after each pick so the same student isn't called twice in a row. Persist the class list in browser storage so the next lesson opens with the same roster.
- Build a raffle picker for a livestream giveaway. Streamer pastes one entry per line, optionally with a weight column for paid sponsors. Big spin button with sound-effect-friendly visual feedback, full-screen winner reveal with confetti, and a running history of all winners (so the streamer can screenshot the leaderboard at the end of the stream). Shareable URL that encodes the entry list to a hash so the audience can open the same wheel on their own machine.
- Build a decision-spinner with five visual variants — classic carnival (cherry + sunshine), Vegas casino (gold on near-black), pastel game-show (mint + coral), glitch arcade (neon cyan + magenta on midnight), and birthday party (rainbow hot pops). Same wheel + bulb border + chunky CTA across all of them; only the colour palette + canvas background swap so the design holds together.

**Frequently asked questions**

- **Q:** How is this different from wheelofnames.com or pickerwheel.com?
  **A:** Hosted picker sites work but they're ad-supported, log the entries you type, and lock the look behind a sign-in. The version FloopFloop generates is yours — the entry list lives in your browser's localStorage, there's no analytics on the page, and the visual (carnival marquee, vintage casino, neon arcade — pick one) is whatever you ask for. It also ships with weighted slices and raffle-mode (remove-winner-after-spin) out of the box, both of which the free tier of most picker sites paywall.
- **Q:** Is the wheel actually random or does it just look random?
  **A:** The winner is decided in JavaScript first via Math.random(), then the wheel's final rotation is computed to land that slice under the top pointer. So the spin animation is cosmetic; the result is a fair weighted draw before the wheel starts moving. Weighted entries work — set a weight of 3 on one slice and it gets a 3x bigger slice on the wheel and a 3x higher chance of winning. Spec: the picker uses cumulative-sum over the per-slice weights, so an entry with weight 0 never wins (useful for temporarily disabling a row without deleting it).
- **Q:** Can I share the wheel with someone else?
  **A:** Out of the box the entries live in your browser's localStorage, so opening the page on a different device starts you with the default entries. Adding a 'copy share URL' button is a one-prompt extension — encode the entry list into a base64 URL hash, the recipient opens the link and their browser hydrates the same wheel. Useful for a teacher posting a 'spin to pick your group' link, or a streamer sharing the raffle wheel so the audience can verify the entries themselves.
- **Q:** Does the raffle mode actually remove the winner from the next spin?
  **A:** Yes. When 'remove winner after each spin' is on, clicking the 'Remove from wheel' button in the winner modal drops that entry from the live list, the wheel re-renders with one fewer slice, and the next spin runs over the smaller pool. The history list keeps the removed entries so you can still see the full draw order at the end. Turn the toggle off and the wheel behaves like a normal random picker — winners stay on the wheel and can be drawn again.
- **Q:** What's the wheel's animation built on — Canvas? a library?
  **A:** Plain SVG + a CSS transform transition, no animation library. Each slice is an arc path, the wheel rotates as a single <g> element via a cubic-bezier transition that lasts about 5.8s with realistic deceleration. The browser does the easing in compositor; the JavaScript only sets the final rotation and listens for the transitionend event. That keeps the bundle under ~30kB gzipped (Fredoka + Nunito + the spinner code combined) and works offline once the page is in the browser cache.
- **Q:** Can I use this for a public giveaway or a regulated raffle?
  **A:** For an informal giveaway — picking a winner among the people who replied to a tweet, choosing a Discord member, deciding who pays for dinner — absolutely. For anything legally regulated (national lotteries, prize promotions with thresholds set by your local consumer-protection law), no client-side picker meets the audit and provable-randomness bar regulators require. For those, the picker FloopFloop generates is fine to *demonstrate* the draw on stream as long as the audit trail itself comes from a regulated provider.

### Word Counter
URL: https://www.floopfloop.com/en/build/word-counter

Build your Word Counter with AI in under 5 minutes

Build a browser-side word, character, sentence, paragraph, reading-time, and readability analyser — with stop-word-filtered keyword frequency and one-click export, in a typewriter-manuscript visual style nobody else ships.

**Example prompts**

- Build a word counter / text analyser. Single page with a big text area on the left, a sidebar of stats on the right: words, characters, characters-no-spaces, sentences, paragraphs, average words per sentence, reading time (238 WPM), speaking time (130 WPM), Flesch Reading Ease, Flesch-Kincaid grade level. Below the stats, a keyword-frequency bar list (top 8 words with stop-words filtered out). Copy, Download .txt, and Clear buttons. Draft auto-saves to localStorage. Visual: typewriter manuscript — cream paper canvas with a red margin rule, monospace serif (Special Elite), 'DRAFT' watermark in the editor margin, pencil-correction underline on section headings. No light/dark toggle — the look IS paper.
- Create a writing-stats tool for blog drafts. Counts, reading time, and a Flesch Reading Ease readout with an inline label ('Plain English — 8-9th grade'). Word goal slider at the top so a 1000-word target shows a progress bar that fills as the writer types. Export the draft as Markdown or plain text. Distraction-free single-screen layout — no menus, no header, just the page.
- Build a tool to analyse speech transcripts. Same word + sentence counts but the headline stat is speaking-time-in-minutes (130 WPM). Also surface 'longest sentence' and 'longest word' as separate readouts so a speaker can find the spots most likely to trip them on stage. Annotated paragraphs side-by-side with a green / amber / red dot per paragraph based on per-paragraph reading ease.
- Build a word counter with five visual variants: classic typewriter (black ink on cream), royal-blue ribbon, sepia archive, carbon-copy greyscale + mint pencil, and a rare midnight-typewriter dark mode. Same monospace face + paper texture + 'DRAFT' margin watermark across all of them — only the paper tone and ink colour swap so the cohort reads as one identifiable thing.

**Frequently asked questions**

- **Q:** How is this different from wordcounter.net or charactercountonline?
  **A:** Hosted word counters work, but they're surrounded by ads, log every paste you make, and gate the more useful features (keyword density, readability) behind a sign-in. The version FloopFloop generates is yours — the draft never leaves your browser (it's saved to localStorage only), the visual is the kind of typewriter-manuscript styling no SaaS competitor ships, and you can extend it with whatever the hosted tools won't add (Markdown preview, word-goal progress bar, multiple saved drafts) by asking the AI for one more prompt.
- **Q:** What does the Flesch Reading Ease score actually mean?
  **A:** Flesch Reading Ease maps your text to a 0–100 scale where higher = easier. 90+ is 5th-grade material (Reader's Digest), 60-70 is plain English (most newspapers), 30-50 is academic / business prose, and below 30 is the kind of dense academic writing that needs careful re-reading. The companion Flesch-Kincaid Grade Level translates the same data into a US-school grade (e.g. 8.3 = '8th-grade reading level'). The formulas use words-per-sentence + syllables-per-word, so cutting long sentences in half or replacing 'utilise' with 'use' shifts the score immediately.
- **Q:** Does the keyword list count every word?
  **A:** No — it filters out 100+ English stop-words (the, and, of, in, to, etc.) plus any 1- or 2-letter token. Otherwise the top entries would be the same closed-class function words on every text and tell you nothing. What you see is the actual subject matter of the document, ranked by frequency. The list shows the top 8 by default; that's enough to spot a keyword you're over-using without becoming so long it stops being scannable.
- **Q:** Why is reading time set to 238 words per minute?
  **A:** It matches the most-cited modern reading-speed meta-analysis (Brysbaert, 2019), which averaged silent-reading rates across 190 studies for English-language adults. The classic '250 WPM' figure most calculators use is unsourced and a bit optimistic — 238 is the conservative, evidence-backed number. Speaking time uses 130 WPM, the standard public-speaking guideline (Toastmasters et al.). Both numbers can be swapped in the source if you measure your own users at a different rate.
- **Q:** What languages does the counter support?
  **A:** Word and sentence boundaries use Unicode property escapes (\p{L}, \p{N} for letters and numbers, in any script), so the counts are correct on English, French, German, Spanish, Italian, Portuguese, Dutch, Polish, Turkish, Russian, Arabic, Hebrew, Japanese, Korean, Chinese, and the rest of the Unicode block. Flesch readability is English-specific by design (the formula was calibrated on English-syllable patterns) so it returns sensible numbers only for English text. The stop-word filter is English; adding a German or French stop-word set is a one-prompt extension.
- **Q:** Is my draft saved anywhere I can't see?
  **A:** No. The draft is auto-saved to your browser's localStorage on every keystroke — same browser-only storage that everything from this template uses. There's no server-side persistence, no analytics on the text content, no third-party script. Clearing your browser data wipes the draft. If you want the draft to follow you across devices, the operator can extend the template with the platform's per-project secrets store + a sync API; out of the box it's local-only by design.

### Password Generator
URL: https://www.floopfloop.com/en/build/password-vault

Build your Password Generator with AI in under 5 minutes

Build a browser-side password and passphrase generator with crypto.getRandomValues randomness, a Diceware passphrase mode, an entropy strength meter, and one-click copy — wrapped in a bank-vault visual identity nobody else ships.

**Example prompts**

- Build a password generator with two modes — random characters and Diceware-style passphrase. Random mode: length slider (4-64), character-set toggles (A-Z, a-z, 0-9, symbols), and an 'exclude similar' toggle that drops 0/O/1/l/I. Passphrase mode: word-count slider (3-12), separator picker (dash/dot/space/underscore), capitalise toggle. Both modes draw randomness from crypto.getRandomValues (NOT Math.random) with rejection sampling to avoid modulo bias. Entropy strength meter at the bottom of the readout (4-bar segmented gauge). Reveal/hide toggle, copy button with auto-fade after 30s. Settings persist to localStorage; generated values never do. Visual: bank vault — gunmetal steel panels with rivet-bolted corners, recessed 'vault window' for the readout, brass-bevel CTA, embossed Oswald display type. No dark/light toggle — the vault is the vault.
- Create a passphrase generator for someone who hates remembering random strings. Diceware mode only — pick 5-7 short common words from a 256-word list, separator of choice. Show the entropy in bits next to a 4-bar strength meter. Big 'reroll' button at the top. Copy-to-clipboard with the standard browser API. Save the user's preferred word count + separator to localStorage; the words themselves are throwaway and never stored.
- Build a corporate-IT-style password tool: random mode with strict character-set requirements (must include upper, lower, digit, symbol — enforced by forcing one char from each cohort before filling the rest, then Fisher-Yates shuffle). Length range 12-48. Entropy readout in plain English ('Strong — 96 bits') with a NIST-aligned thresholds table. No persistence at all. Single button: GENERATE. Output styled in monospaced JetBrains Mono so glyphs are unambiguous when transcribed.
- Build a password vault with five visual variants: classic brass safe (gunmetal + warm amber), bank vault gold (navy + rich gold), cyber vault (near-black + electric cyan), library card-catalog (oak + cream — light variant), spy briefcase (charcoal + amber LED warning lights). Same rivet-bordered vault face + recessed window + brass dial CTA across all of them — only the metal tone and canvas swap so the cohort reads as one identifiable thing.

**Frequently asked questions**

- **Q:** How is this different from passwordsgenerator.net or the LastPass / 1Password generators?
  **A:** Hosted password generators work but they're surrounded by ads, log every request you make to their servers (the password is generated server-side at some of them), and the password-manager-vendor generators gate the more useful features (passphrase mode, custom alphabets, entropy display) behind a sign-in. The version FloopFloop generates is yours — every byte runs in the browser via crypto.getRandomValues (cryptographically-secure WebCrypto RNG), nothing ever round-trips to a server, and the visual (bank-vault metal panels, recessed window, brass dial CTA) is the kind of aesthetic identity no SaaS competitor ships.
- **Q:** Is crypto.getRandomValues actually cryptographically secure?
  **A:** Yes — it's the WebCrypto-spec CSPRNG, exposed in every browser since ~2014. The underlying entropy source is the OS-level secure RNG (/dev/urandom on Linux/macOS, CryptGenRandom on Windows). The template's randomIndex helper additionally uses rejection sampling to avoid the modulo bias you'd get from naive `random % max` — the first `2^32 mod max` values otherwise have slightly higher probability than the rest, biasing the output. Both pieces matter: the right RNG with biased sampling still leaks bits.
- **Q:** What does the entropy meter actually measure?
  **A:** Shannon entropy in bits: log2(alphabet size) × password length. For a 20-character password drawn from a 94-symbol alphabet that's log2(94) × 20 ≈ 131 bits — well above the 80-bit 'throwaway-key' threshold most password managers use as the safe target. The meter's four bars map to: < 28 bits (Very weak — resists only casual guessing), 28-60 (Weak — falls to a consumer GPU offline crack), 60-80 (Decent — resists most attacks), 80-100 (Strong — the modern industry safe target), 100+ (Excellent — conservatively beyond near-future attack capability). Passphrases use log2(wordlist size) × word count, which is why a 6-word passphrase from a 1296-word EFF list (62 bits) is comparable to a 10-character random password.
- **Q:** Why both random AND passphrase modes?
  **A:** Different use cases. A random 20-character password has high entropy per character but is impossible to type accurately or remember — so it lives in a password manager and the user copy-pastes it. A 6-word passphrase has similar entropy but is easy to type on a phone keyboard, easy to read aloud over a phone call, and easy to memorise after a few uses — so it's the right shape for a master password (the one secret you can't store in a password manager), a Wi-Fi password printed on a guest card, or an encryption passphrase for a backup drive. Both belong in a serious generator; sites that ship only random-character mode are doing half the job.
- **Q:** Are the generated values stored anywhere?
  **A:** No — that's the point. The user's *settings* (length, character-set toggles, word count) persist to localStorage so the next visit picks up where they left off. The generated value itself is held only in component state — never written to localStorage, never sent to a server, never logged. The 'Reveal/Hide' toggle masks the readout while you copy. The 'Copied' indicator auto-clears after 30 seconds so you don't see a stale 'Copied' status hours after you walked away.
- **Q:** Does the random mode guarantee every character class appears?
  **A:** Yes — when the password is long enough to make it possible (length ≥ number of enabled cohorts). The generator first picks one character from each enabled set, then fills the rest from the combined alphabet, then Fisher-Yates shuffles the result. This biases the distribution very slightly (a strict-uniform sample could legitimately produce 'all lowercase' by chance with all cohorts enabled), but every reputable password tool ships this guarantee because a password that satisfies the user's toggles but is rejected by the target site's validator is useless. The entropy estimate is an upper bound either way — the shuffle keeps it close.

### JSON Formatter
URL: https://www.floopfloop.com/en/build/json-blueprint

Build your JSON Formatter with AI in under 5 minutes

Build a browser-side JSON formatter, validator, and tree explorer with exact-coordinate error reporting, pretty / minify / tree views, sort-keys, and one-click copy — wrapped in an architect's blueprint visual identity nobody else ships.

**Example prompts**

- Build a JSON formatter / validator. Two-pane layout: source textarea on the left with Format / Minify / Sort-keys buttons; output panel on the right with a Pretty / Minified / Tree view-mode switch. Validation badge stamp (Valid / Invalid). When invalid, surface the exact line + column from the V8 / Firefox parser message and render the offending source line with a caret pointer. Stats strip: total keys, max depth, minified byte count. Auto-save the source to localStorage so a refresh doesn't wipe a 5-minute paste. Visual: architect's blueprint — deep indigo paper with a faint grid overlay, white drafting-pen text, hand-lettered Architects Daughter section headings, drafting 'title-block' metadata strips, amber pencil-correction accent. No light mode — a blueprint is the blueprint.
- Create a JSON tree explorer. Big collapsible tree view that opens the top level by default and lets the user fold every Object / Array node. Each key + value renders with syntax-highlighting cohorts (strings green, numbers blue, booleans magenta, null grey italic). Per-node count badge on collapsed nodes ('3 keys' / '42 items'). Path breadcrumb at the top showing the currently-focused coordinate.
- Build a JSON diff helper. Two inputs side-by-side; both get sort-keys normalised on every change so semantically-equal blobs in different key orders collapse to the same string. A green / red highlighted output panel below shows added / removed / changed leaves. Browser-side; no server round-trip.
- Build a JSON formatter with five visual variants: classic indigo blueprint (white ink on deep blue), drafting room sepia (warm cream paper with brown ink), whiteprint negative (mostly-white with cyan grid), engineering green (lined-pad), and black-print mining survey (near-black with tungsten / amber ink). Same grid + drafting font + title-block treatment across all of them — only the base paper tone + ink colour swap so the cohort reads as one identifiable thing.

**Frequently asked questions**

- **Q:** How is this different from JSONLint, JSONFormatter.org, or CodeBeautify?
  **A:** Hosted JSON formatters work — they're built on the same browser-native JSON.parse this template uses — but they're ad-supported, log everything you paste (worth checking their privacy policies if you're handling production data or API responses), and surround the textarea with banner / interstitial ads that make the page heavier than the parser. The version FloopFloop generates is yours: nothing leaves the browser, no ads, and the visual (architect's blueprint, hand-lettered drafting headings, grid-paper backdrop) is the kind of identity no SaaS formatter ships.
- **Q:** What can it actually do?
  **A:** Three view modes for any valid input: Pretty (2-space-indented), Minified (whitespace stripped), and Tree (collapsible nodes with per-node key / item counts on collapsed branches and syntax-highlighting cohorts on leaves). Three in-place transforms on the source: Format (overwrite with pretty-printed), Minify (overwrite with single-line), Sort-keys (recursive alphabetical key ordering at every depth — useful for diff prep). Copy + Download buttons that grab the current view mode. Auto-save the source to localStorage so a refresh doesn't wipe a 5-minute paste.
- **Q:** How does the error reporting work?
  **A:** JavaScript's JSON.parse throws an Error message that varies by engine — Chrome says 'Unexpected token } in JSON at position 42'; Firefox says 'expected ... at line 5 column 12 of the JSON data'; Safari says 'Unexpected EOF'. The template parses BOTH the 'at position N' (V8 / Node) and the 'line N column M' (Firefox) shapes, walks the source to compute (line, column) from the byte offset when needed, and renders the offending source line with a caret '^' pointing at the column. The error message itself is tidied (stripped of the engine-specific 'in JSON at position N' tail) so the user sees the actual diagnosis.
- **Q:** Does it handle large JSON files?
  **A:** Up to a few megabytes comfortably (the same regime browser-native JSON.parse handles without yielding). The tree view stores per-node open/closed state in local useState which adds up at very large input — the page caps practical use around 5-10MB before the React tree-render becomes the bottleneck. Beyond that, sticking to Pretty / Minified mode (both render as a single <pre>) handles arbitrarily large input as long as the textarea can fit the source. For the 'parse a 200MB log' scenario, use a streaming JSON parser in Node, not a browser tool.
- **Q:** Is my JSON sent anywhere?
  **A:** No. The parsing, formatting, tree-walking, and error reporting all run via the browser's native JSON.parse + plain JS — there's no fetch to anywhere except /api/health (which doesn't see your data). The page is force-static, so it's a CDN-cached HTML+JS bundle with no per-request server work. Settings (the current view-mode toggle) and the active source are auto-saved to localStorage only.
- **Q:** Why a blueprint aesthetic for a JSON tool?
  **A:** A formatter is really a 'show me the structure' tool — a parsed JSON document is exactly the shape an architect would draw on a plan: nested rooms (objects), repeating arrays (column grids), labelled dimensions (key-value pairs). The blueprint metaphor matches that semantically while also being a fresh visual register no other JSON tool ships. Five colour variants cover the obvious skin choices without making every formatter on the internet look the same.

### Color Palette Generator
URL: https://www.floopfloop.com/en/build/palette-cards

Build your Color Palette Generator with AI in under 5 minutes

Build a browser-side colour palette generator with six harmony schemes (analogous, complementary, triadic, split-complementary, monochromatic, tetradic), per-card lock + reroll, URL-hash sharing, and CSS / Tailwind / JSON export — wrapped in a Pantone swatch-book visual identity nobody else ships.

**Example prompts**

- Build a Coolors-style palette generator. Five Pantone-style swatch cards across the page: each card is a top 70% colour fill with the hex code centered (auto-picked black or white via WCAG contrast so it's always legible) and a bottom 30% white 'tag strip' showing an EDITION number, the hex code, and RGB / HSL values in a monospace font. Spacebar re-rolls the palette; per-card lock pin keeps a colour you like while the rest re-roll. Six harmony schemes (analogous, complementary, triadic, split-complementary, monochromatic, tetradic) selectable from a row of chips at the top. Share button writes the palette to the URL hash and copies the share link. Export menu dumps CSS variables, a Tailwind theme.extend.colors block, or a JSON file. Visual: a designer's pinboard — warm cream desktop, cards sitting with a faint drop shadow, JetBrains Mono for the hex / RGB / HSL strings, Inter for body, a designer-red accent on the primary CTA.
- Create a brand-colour explorer. Start with the user's primary brand hex, then generate a 5-step monochromatic ladder (light surface / surface / brand / brand-dark / ink). Also surface a complementary highlight + a split-complementary support pair as separate rows. Per-card 'use this colour' button copies the hex; an 'export' button dumps the whole set as a Tailwind theme.extend.colors block ready to paste into a tailwind.config.js.
- Build a colour-contrast checker. Two big colour pickers at the top (foreground + background), a giant live preview panel below showing the foreground colour text on the background colour at 16px, 24px, and a heading size, plus the calculated WCAG 2.1 contrast ratio with AA / AAA pass-fail badges for body text + large text. A 'flip' button swaps the two colours. A 'suggest accessible alternative' button adjusts the lightness of the foreground in HSL until it crosses AA, showing the new hex.
- Build a colour palette generator with five visual variants: designer's pinboard (warm cream + designer-red accent), photographer's studio (charcoal felt + amber accent), print shop (cool white + cyan-print blue), mid-century book (sage mat + sienna red), and midnight noir (near-black + crisp white cards). Same swatch-card cohort + monospace metadata across all of them — only the canvas backdrop + accent colour swap so the layout reads as one identifiable thing.

**Frequently asked questions**

- **Q:** How is this different from Coolors, Paletton, or Adobe Color?
  **A:** Hosted palette tools work — Coolors, Paletton, Adobe Color and Color Hunt all run the same HSL hue-rotation maths under the hood — but they're ad-supported, sign-walled (Coolors locks several export formats behind a free account), and surrounded by SaaS chrome (signup CTAs, 'pro' upsells, related-trends modules) that crowd out the swatches themselves. The version FloopFloop generates is yours: nothing leaves the browser, no account, and the visual (Pantone-style swatch cards on a designer's pinboard) is a register no other generator ships — most of them look like configurator dashboards.
- **Q:** What harmony schemes does it generate?
  **A:** Six. Analogous (5 hues ±30° around the base for soft, related palettes), complementary (the base + its 180° opposite plus a darker neutral anchor), triadic (three evenly-spaced 120° primaries plus light/dark support), split-complementary (the base + the two hues ±30° around its complement — softer than full complementary), monochromatic (five lightness rungs of one hue, useful for brand-colour ladders), and tetradic (a rectangle on the wheel: base + 60° + complement + 240°). Schemes are computed via HSL hue rotation, which is what professional design tools use — RGB jitter produces 'random' but not 'harmonious' palettes.
- **Q:** How does the lock + reroll work?
  **A:** Each swatch card has a lock pin in the top-right corner. Toggle it once and that card stays put through every re-roll; toggle it again to release. Press Spacebar (or click the big 'Roll palette' CTA) and every unlocked card refreshes with a new colour from the current scheme + a fresh random base hex. The selected scheme also re-applies to the unlocked cards when you change schemes, which means you can lock the two colours you've decided on and explore variations for the remaining three without losing your commitments.
- **Q:** Can I share or export a palette?
  **A:** Two paths. Share writes the current scheme + 5 hex codes to the URL hash (e.g. #analogous/3B82F6-60A5FA-93C5FD-...) and copies the full URL to the clipboard — a recipient opens the link and sees the exact palette without any server round-trip or account. Export dumps the palette in your format of choice: CSS variables (drop into :root), a Tailwind theme.extend.colors block (paste into tailwind.config.js), or a JSON file with scheme metadata. All exports run in the browser as Blob downloads — no server, no data collection.
- **Q:** Is the contrast label on each card accurate?
  **A:** Yes. The hex label inside each swatch fill is auto-coloured black or white based on the WCAG 2.1 relative-luminance formula (0.2126·R + 0.7152·G + 0.0722·B with the sRGB linearisation), comparing the contrast ratio against the fill for both black and white and picking the winner. That's the same calculation the WCAG accessibility tooling uses, so the label is always legible regardless of which colour the generator landed on.
- **Q:** Is my palette sent anywhere?
  **A:** No. The colour maths, lock state, copy-to-clipboard, share-link generation, and export-file building all run via plain JS in the browser — there's no fetch to anywhere except /api/health (which doesn't see your colours). The page is force-static, so it's a CDN-cached HTML+JS bundle with no per-request server work. The share link encodes the palette in the URL hash, which by spec is never sent to the server.

### Cron Expression Builder
URL: https://www.floopfloop.com/en/build/cron-builder

Build your Cron Expression Builder with AI in under 5 minutes

Build a browser-side cron expression builder + debugger with plain-English translation, next-5-fire-times preview, common presets, and per-field validation — wrapped in a sysadmin-terminal visual identity no other cron tool ships.

**Example prompts**

- Build a crontab.guru-style cron expression builder. A big monospace input at the top where the user types or pastes a cron expression. Below it, a per-field breakdown table (minute / hour / day-of-month / month / day-of-week) with the valid range for each field and the parsed token. A plain-English translation line ("Every 15 minutes" / "Weekdays at 9:00" / etc.). A next-5-fire-times preview panel computed in the browser (no luxon / cron-parser dependency — hand-roll the parser to keep the JS payload under 50KB). A row of common-preset chips (every 15 min / hourly / daily 9am / weekdays 9am / first of month / yearly) that swap the expression on click. Share button writes the expression to the URL hash and copies the share link. Visual: sysadmin terminal — green-phosphor VT220 with a faint 24px grid backdrop, monospace expression block with a ❯ prompt accent, per-token cursor-block highlight on hover, JetBrains Mono on every code surface.
- Create a cron expression explainer. Pasted expression in, plain-English description + next-5-fire-times + per-field breakdown out. Support the @hourly / @daily / @weekly / @monthly / @yearly Vixie-cron shorthands AND alphabetic aliases (MON, JAN, etc.). When the expression is invalid, surface which field the parser gave up on, the exact reason, and underline the offending token in red. No need for the field-builder UI in this variant — paste-and-explain is the primary flow.
- Build a cron schedule preview for a CI / CD dashboard. Show a list of named schedules (e.g., "Nightly backup", "Hourly sync", "Weekly report") with their cron expression, when each next fires, and a colour badge for the schedule cadence (every-N-minutes = green, daily = blue, weekly+ = amber). Click a row to see the per-field breakdown + next-10-fire-times.
- Build a cron expression builder with five visual variants: green-phosphor terminal (default VT220 / classic crontab), IBM mainframe amber-on-black, retro CRT cyan with subtle scanlines, on-call ops navy (dark blue + cyan accent), and daytime light terminal (white paper, slate ink). Same grid backdrop + ❯ prompt + monospace expression treatment across all of them — only the phosphor colour + paper tone swap so the cohort reads as one identifiable tool.

**Frequently asked questions**

- **Q:** How is this different from crontab.guru, cronhub.io, or cron.help?
  **A:** Hosted cron tools work — they're built on the same parse + walk-the-next-fires algorithm this template uses — but they're ad-supported, sign-walled for the niceties (multi-expression compare, custom timezone), and surrounded by SaaS chrome (signup CTAs, 'pro' upsells, related-tools modules) that crowd out the answer. The version FloopFloop generates is yours: nothing leaves the browser, no account, no ads, and the visual (sysadmin terminal with a faint grid backdrop) is a register no other cron tool ships — most of them look like configurator dashboards.
- **Q:** What cron syntax does it support?
  **A:** Standard 5-field cron (minute / hour / day-of-month / month / day-of-week) as documented in `man 5 crontab` (Vixie cron / GNU crontab dialect). Supports literals (`5`, `15`, `30`), wildcards (`*`), ranges (`1-5`, `9-17`), lists (`1,15,30`), steps (`*/15`, `0-30/5`, `*/2`), day-of-week names (`MON-FRI`, `SUN`), and month names (`JAN`, `DEC`). Plus the Vixie shorthands `@hourly` / `@daily` (alias `@midnight`) / `@weekly` / `@monthly` / `@yearly` (alias `@annually`). Does NOT support the Quartz dialect's extra second/year fields or the `L` / `W` / `#` extensions — crontab.guru also rejects them, and including them would double the parser's size for ~0.5% of real-world expressions.
- **Q:** How are the next fire times computed?
  **A:** Minute-by-minute walk with field tests, starting strictly AFTER the current local time. Each candidate minute is checked against the parsed sets (minutes, hours, months) — if all match AND the day rule matches, it's a fire. The day rule applies Vixie cron's documented OR semantic: when BOTH day-of-month and day-of-week are restricted (not `*`), the schedule fires on EITHER. A safety bound caps the search at ~3 years to avoid an infinite loop on impossible expressions like `0 0 30 2 *` (Feb 30 — never happens). Everything is in the user's local time, like `cron(8)` does — that's the right behaviour for a debugging tool.
- **Q:** Can I share an expression with a colleague?
  **A:** Yes. The Share button writes the current expression to the URL hash and copies the full URL to the clipboard. A recipient opens the link and sees the exact same expression + breakdown + next-5-fires immediately — no server round-trip, no account, no link-shortener middleman. By spec, the URL fragment is never sent to the server, so the share itself doesn't leak the expression to your hosting either.
- **Q:** Does it understand `@hourly` / `@daily` / `@weekly`?
  **A:** Yes — they expand to their Vixie-documented equivalents: `@hourly` = `0 * * * *`, `@daily` (and `@midnight`) = `0 0 * * *`, `@weekly` = `0 0 * * 0`, `@monthly` = `0 0 1 * *`, `@yearly` (and `@annually`) = `0 0 1 1 *`. The one shorthand the template explicitly rejects is `@reboot` — that's a Vixie-cron OS-state trigger (fire-once-at-system-boot), not a recurring schedule, and silently parsing it as `0 0 0 0 0` would mislead.
- **Q:** Is my expression sent anywhere?
  **A:** No. The parse, the next-fire walker, the plain-English describer, and the URL-hash share all run via plain JS in the browser — there's no fetch to anywhere except `/api/health` (which doesn't see your expression). The page is force-static, so it's a CDN-cached HTML+JS bundle with no per-request server work.

### JWT Debugger
URL: https://www.floopfloop.com/en/build/jwt-debugger

Build your JWT Debugger with AI in under 5 minutes

Build a browser-side JWT debugger that decodes the header + payload, humanizes the claims (iss / sub / aud / exp), verifies HS256 / HS384 / HS512 signatures via SubtleCrypto, and shows an expiration countdown — wrapped in a token-vault visual identity no other JWT tool ships.

**Example prompts**

- Build a jwt.io-style JWT debugger. Big monospace textarea at the top where the user pastes a token. Below it, a coloured-segments preview that splits the token into header / payload / signature with three distinct accent shades. Three stacked panels for the decoded result: Header (pretty-printed JSON), Payload (pretty-printed JSON), Signature (raw base64url). A sidebar panel with a Signature Check that takes an HMAC secret and verifies HS256 / HS384 / HS512 via SubtleCrypto (the browser-native primitive — no luxon / jose / jsonwebtoken dependency, keeps the JS payload under 50KB). A Claims panel that humanizes the registered claims (Issuer / Subject / Audience / Expires at / Not before / Issued at / JWT ID) with a relative-time line for the timestamp claims ("in 4 days" / "expired 12 minutes ago"). Share button writes the token to the URL hash + copies the share link. Visual: token vault — three brass-bevelled panels on a deep near-black canvas, a lock pill in the verify panel that glows green when the signature checks, amber when it doesn't, JetBrains Mono on every code surface.
- Create a JWT claims explorer for an OAuth / OpenID Connect debug page. Paste an access token or id token, get back the parsed payload as a sortable claims table — registered claims first (iss / sub / aud / exp), then the OIDC extensions (email / name / preferred_username / scope), then anything else alphabetically. Per-row copy button on the value. Highlight expired tokens with a red banner. Browser-only — useful for the on-call engineer who needs to debug "why is this token being rejected" without pasting a customer's bearer into a third-party site.
- Build a JWT generator + signer for a dev environment. Form inputs for the standard claims (issuer, subject, audience, expires-in-minutes, custom claims as JSON), an HS256 / HS384 / HS512 picker, and a secret. Generate + sign in the browser via SubtleCrypto, output the encoded token + a verify-roundtrip badge so the dev knows it'll decode cleanly. No server side; the page also decodes the most recent generated token in a side panel so you don't need to switch tools.
- Build a JWT debugger with five visual variants: brass vault (default — bevelled brass panels on near-black canvas with amber lock pill), blueprint (deep indigo paper, white drafting ink), terminal green (VT220 phosphor on black), paper light (cream canvas, slate ink, blue accent), and gunmetal noir (near-black with electric cyan accent). Same three-panel stack + monospace expression treatment across all of them — only the panel bevel colour + accent shade swap so the cohort reads as one identifiable tool.

**Frequently asked questions**

- **Q:** How is this different from jwt.io, jwt.ms, or jwtcheck?
  **A:** Hosted JWT debuggers work — they're built on the same base64url + JSON.parse + SubtleCrypto stack this template uses — but they're ad-supported, surrounded by sign-up modals, and crucially they're THIRD-PARTY SITES you're pasting your token into. Even with a trustworthy operator (Auth0 owns jwt.io; Microsoft owns jwt.ms), the act of pasting a real production bearer into someone else's domain shows up in logs, scrolls past coworkers in screen shares, and routes through their CDN's TLS-terminating proxies. The version FloopFloop generates is yours: nothing leaves the browser, no ads, no signup, and the visual (token-inspection vault with brass-bevelled panels) is a register no other JWT tool ships — most of them look like one-page docs sites.
- **Q:** Which signature algorithms can it verify?
  **A:** HS256, HS384, HS512 — the symmetric HMAC family. SubtleCrypto handles all three natively, so verification is a 5-line key-import + verify call. Paste the shared secret into the sidebar and the lock pill flips from neutral to green-Verified or amber-Mismatch in real time. RS* / ES* / PS* (RSA / ECDSA / RSA-PSS) verification is intentionally not included — those algorithms verify against the issuer's PUBLIC KEY, which must be fetched from the issuer's JWKS endpoint (`/.well-known/jwks.json` for OIDC). That would make the debugger a network-dependent tool requiring a server proxy for CORS, defeating the "runs in your browser, nothing leaves the page" promise. jwt.io ships example keys but doesn't actually fetch a real JWKS either — production RS* verification belongs server-side.
- **Q:** What claims does it humanize?
  **A:** All seven RFC 7519 registered claims (`iss` / `sub` / `aud` / `exp` / `nbf` / `iat` / `jti`) plus the common OIDC / Auth0 / Okta / Cognito extensions: `azp`, `scope`, `email`, `email_verified`, `name`, `given_name`, `family_name`, `preferred_username`, `nickname`, `picture`, `locale`, `zoneinfo`, `updated_at`, `client_id`, `cid`, `uid`, `groups`, `roles`, `permissions`, `cognito:username`, `cognito:groups`. Anything not in the dictionary renders with the raw key name in the side panel — we deliberately don't guess. Timestamp claims (`exp`, `nbf`, `iat`, `auth_time`, `updated_at`) automatically render as a human-readable ISO datetime plus a relative-time line ("in 4 days" / "expired 12 minutes ago") that ticks once a minute without a page refresh.
- **Q:** Can I share a token with a colleague to debug together?
  **A:** Yes — the Share button writes the current token to the URL hash and copies the full URL to your clipboard. A colleague opens the link and lands on the same decoded view + claims + verify state. By spec the URL fragment is never sent to the server, so the share itself doesn't leak the token to your hosting either. CAUTION: this is plain-text token sharing — only do it inside trusted channels (private Slack DM, encrypted notes), the same way you'd share a password. The Share UX is meant for dev / staging tokens, not production bearers.
- **Q:** Does it handle expired tokens differently?
  **A:** Yes. The `exp` claim's relative-time line flips to red and reads "Expired N minutes ago" instead of "in N minutes" when the token is past its `exp`. The Claims panel surfaces this on first paint so a quick scroll-to-claims tells you at a glance whether you're debugging a current token or a stale one. The expiration logic uses the user's local clock (browser `Date.now()`), which is the same clock the JWT spec expects servers to compare against — if a token is failing verification on the server because of clock skew, the debugger will reproduce the comparison correctly.
- **Q:** Is my token sent anywhere?
  **A:** No. The parse, the JSON pretty-print, the claim humanizer, the SubtleCrypto verify, the URL-hash share — all of it runs as plain JS in the browser. There's no fetch to anywhere except `/api/health` (which doesn't see your token). The page is force-static, so it's a CDN-cached HTML+JS bundle with no per-request server work. Even the auto-decode happens on every keystroke as a pure-function transform; there's no debounced server round-trip the way some hosted debuggers structure it.

### Tip Calculator
URL: https://www.floopfloop.com/en/build/tip-calculator

Build your Tip Calculator with AI in under 5 minutes

Build a browser-side tip calculator with preset percentages (15 / 18 / 20 / 22 / 25 + custom), people-stepper bill split, tax-aware mode, round-up toggle, and multi-currency support — wrapped in a vintage diner-receipt visual identity no other tip tool ships.

**Example prompts**

- Build a tip calculator. Bill amount input (big monospace numeric field) + currency picker (USD / EUR / GBP / JPY / CAD / AUD). Tip-percent row with five preset chips (15% Standard, 18% Good, 20% Great, 22% Generous, 25% Excellent) plus a custom-number chip. People stepper (1-99 with minus/plus buttons + direct numeric input). Live-computed receipt panel: subtotal, tip with effective-percent label, total, per-person amount in the active currency. Two power toggles: "Tip on pre-tax subtotal" (reveals a Tax field; subtracts the tax from the bill before applying the tip percent — American convention when the bill already includes tax) and "Round up to nearest currency unit" (folds the bump into the tip so the subtotal stays honest; useful for handing over cash without making change). All math in integer cents to avoid floating-point drift. Visual: vintage diner check — cream menu paper canvas, dashed separators between line items, monospace right-aligned amounts, cherry-red booth accent on the active preset chip.
- Create a gratuity calculator for the service industry. Same bill + tip + split logic, plus a per-service-type preset library (Restaurant 18%, Bar 15%, Hairdresser 20%, Spa 20%, Taxi 15%, Delivery 10%, Uber/Lyft 15%, Hotel housekeeping $2/night). Click a service type and the tip percent + label switches automatically.
- Build a bill-splitter for groups. Optimised for parties of 4-8: large per-person amount as the headline number, the breakdown (subtotal, tip, total) underneath in smaller type. Round-up toggle is on by default since groups dividing $73.42 by 5 want whole-dollar shares.
- Build a tip calculator with five visual variants: cherry diner red (default; cream paper + red booth accent), midnight booth (near-black with neon-sign red), brass cafe (dark walnut + amber brass accent), pastel donut (mint canvas + raspberry accent), and paper receipt (very pale white + slate ink — the thermal-printer aesthetic). Same receipt-shape + dashed separators + monospace amounts across all five so the cohort reads as one identifiable tool.

**Frequently asked questions**

- **Q:** How is this different from tipcalc.com, tipfree.app, or the iOS Tip Calculator?
  **A:** Hosted tip calculators work — they're built on the same `bill * percent / 100` math this template uses — but they're ad-supported, mostly look the same (one-input one-output one-banner), and the iOS built-in is locked to a single device. The version FloopFloop generates is yours: nothing leaves the browser, no ads, no install, no signup, and the visual (a vintage diner receipt with cream paper + dashed separators + cherry-red booth accent) is a register no other tip tool ships — most of them look like 2010-era utility pages.
- **Q:** Why does it use cents instead of decimals internally?
  **A:** Floating-point math drifts on common money values: `0.1 + 0.2` evaluates to `0.30000000000000004` in JavaScript, and `12.10 + 0.20` rounds differently than `12.1 + 0.2` if the order changes. Every tip math expression that touches the bill stays in *integer cents* (or the smallest currency unit — 1 yen for JPY) and only converts to a decimal string at display time via `Intl.NumberFormat`. That's the same approach Stripe, PayPal, and every shipping payment library uses — calculating in floats is the recipe for the "penny off" customer-support tickets that adult retailers stopped accepting decades ago.
- **Q:** Does it support tipping on pre-tax vs post-tax amounts?
  **A:** Yes — the toggle says "Tip on pre-tax subtotal." American restaurant convention is to tip on the pre-tax bill (sales tax is the government's, not the server's), but most printed checks show the post-tax total as the headline number. With the toggle on, an extra Tax field appears; the tip percent applies to `bill - tax` while the total still includes the tax. With the toggle off, the tip applies to the full visible bill (the more generous default — and the right behaviour in countries where the check doesn't break out tax).
- **Q:** What does "round up" do exactly?
  **A:** Round-up bumps the FINAL total to the next whole currency unit and folds the bump into the tip. Example: $50 bill at 20% = $10 tip, $60 total. With round-up still nets $60 (already even). Same shape on a $42.30 bill at 18% = $7.61 tip, $49.91 total → round-up nets $50, tip becomes $7.70. The effective-percent indicator on the tip line tells you what the actual tip percent ended up at after rounding. Useful for handing over cash without making change, and for keeping the per-person split clean when dividing by N.
- **Q:** Does the per-person split round evenly?
  **A:** Per-person displays the integer division (`total ÷ people` floored to the smallest currency unit). When the total doesn't divide evenly (`$23.45 ÷ 3 = $7.81 with $0.02 left over`), the last few cents are absorbed somewhere — the math acknowledges this by showing the floored amount as the per-person headline. If you want the split to be exact-to-the-cent, pair the round-up toggle with N people: rounding the total to the next whole unit divides cleanly more often than you'd expect (~half the time for groups of 2-4, more for 5+).
- **Q:** Is my bill amount sent anywhere?
  **A:** No. The parse, the tip math, the currency formatting all run as plain JS in the browser — there's no fetch to anywhere except `/api/health` (which doesn't see your bill). The page is force-static, so it's a CDN-cached HTML+JS bundle with no per-request server work. The displayed amount only exists in your browser tab.

### Timezone Meeting Picker
URL: https://www.floopfloop.com/en/build/timezone-meeting

Build your Timezone Meeting Picker with AI in under 5 minutes

Build a World-Time-Buddy-style meeting time picker with a 24-cell hour strip per participant, color-coded by working / early / evening / asleep tier, plus an automatic 'best meeting times' panel that surfaces UTC bands where everyone is awake — generated from a single prompt.

**Example prompts**

- Build a World-Time-Buddy-style meeting picker. Each participant has a name, an IANA time zone, and configurable working hours (default 9–18 local). Render a 24-cell horizontal strip per participant where each cell shows their local hour for the corresponding UTC hour, color-coded by tier (work / early / evening / asleep). Add a 'best meeting times' panel that surfaces UTC bands where everyone is in work hours, with per-participant local equivalents.
- Create a remote-team timezone dashboard. List every team member with their flag, name, current local time, and a live 'in / out / sleeping' status badge based on their working hours. Pin team members to a sidebar with one-click 'show in main strip' so the operator can compare an ad-hoc subset (e.g. the 4 people on the launch standup) without re-typing everyone every time.
- Design an Every-Time-Zone clone for a single-tenant intranet. Time strip across the top showing UTC reference, rows for each member showing their day-night shading, a draggable 'meeting marker' that snaps to 15-minute intervals and shows the local time for every member as you drag, and a 'send invite' button that opens the mail client with the time pre-filled.
- Build a stand-up rotation tool for a follow-the-sun team. List members in time-zone order (earliest local hour first), highlight whose working-hours window is starting next, generate a 'who's online right now' summary, and a /weekly button that picks one standup time per weekday that rotates fairly across time zones over the month.

**Frequently asked questions**

- **Q:** How does this compare to World Time Buddy / Every Time Zone / Calendly's timezone picker?
  **A:** World Time Buddy and Every Time Zone are great web tools for ad-hoc time conversion — they don't persist participants across sessions or surface 'best times' programmatically. Calendly's timezone picker is for 1-on-1 appointments, not group-of-N meetings. This template is the group-of-N case: persist participants, compute the overlap automatically, render the answer in one screen. It also runs entirely client-side in your own browser; nothing leaks to a third-party service.
- **Q:** How does the 'best meeting times' algorithm work?
  **A:** For every UTC hour 0–23, the template checks if EVERY participant is in their 'work' tier (between their configured workStart and workEnd). Consecutive 'yes' hours coalesce into bands. The panel shows the UTC range and the per-participant local equivalent so you can sanity-check at a glance. Evening / early hours intentionally don't count toward 'best' so the tool doesn't recommend a 9pm meeting unless you genuinely have no other choice (the SF↔Singapore problem) — in which case the panel surfaces a 'no overlap' state with an actionable suggestion to widen someone's working hours or accept the from-home call.
- **Q:** Does it handle daylight savings transitions?
  **A:** Yes — all timezone math goes through native Intl.DateTimeFormat, which uses the IANA tzdata rules in effect at the rendered instant. So a meeting picker rendered on March 1 sees Amsterdam as UTC+1 (CET); rendered on April 1 it sees Amsterdam as UTC+2 (CEST). No moment/dayjs/luxon dependency to fall out of date.
- **Q:** Where are participants stored?
  **A:** The default template uses browser localStorage so the picker works instantly with no signup. Refine with 'add a Postgres backend so my team's participant list syncs across browsers' to move to server storage — the codegen scaffolds the schema, the API routes, and the sync logic in one round. The scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can I share a meeting time as a link?
  **A:** Not in the default template. For sharing refine with 'add a /share/[meetingId] route that renders a read-only view of the picker with a specific UTC hour highlighted' — the codegen wires the route, the deep-link parser, and the highlight state. Pair it with 'add a Copy as iCal button' to generate a downloadable .ics file the recipient can drop into Outlook / Google Calendar / Apple Calendar.
- **Q:** How many participants can it handle?
  **A:** The strip render is O(N participants × 24 cells) = ~24 DOM nodes per row. Comfortably handles 50 participants on a laptop; past that the page scrolls but stays interactive. For 500+ participants (a global all-hands list) refine with 'add a virtualized list using react-window so only visible rows render' — the codegen wires the virtualizer and the row-renderer adapter in one round.
- **Q:** What timezones are supported?
  **A:** The full IANA database — ~430 zones via Intl.supportedValuesOf('timeZone'). The picker filters out legacy Etc/* and SystemV/* (relics of the old POSIX scheme) so the list is the modern continent/city set everyone recognises (Europe/Amsterdam, America/Los_Angeles, Asia/Singapore, etc.).

### Bookmark Manager
URL: https://www.floopfloop.com/en/build/bookmark-manager

Build your Bookmark Manager with AI in under 5 minutes

Build a Pocket / Pinboard / Raindrop-style personal link library with multi-tag organization, archive workflow, auto-favicon resolution, and full-text search — generated from a single prompt.

**Example prompts**

- Build a Pinboard-style bookmark manager. Three-column layout: tag-chip sidebar on the left (sorted by use count, with active / archived view tabs), bookmark grid in the middle, add form on the right. Each bookmark card pulls /favicon.ico from the URL's host with a Globe-icon fallback. Add form auto-prefixes https:// when the user pastes a bare domain, defaults the title to the hostname, accepts comma-separated tags. Full-text search across title / URL / description / tags. localStorage persistence.
- Create a 'read later' app like Pocket. Each saved page shows the title, hostname, estimated reading time (use 220wpm against character count as a proxy), and an /unread / /read / /archived state. Filter by state in the sidebar. Add a 'reader mode' toggle that opens the page in an iframe with a Reader-View-style typography overlay (max-w-prose, larger body type, dimmed chrome).
- Design an Instapaper clone with offline reading. Save a URL, fetch its OpenGraph metadata on the server side (title, description, image, author, published date) and persist it as the bookmark's stored shape so the cards render properly even when the original page is later edited / removed. Sort by 'most-recently-added' or 'longest-read-time' or 'random'. Daily-digest email of unread items via Resend.
- Build a research-notes link library. Each bookmark gets a notes field that supports markdown (render with marked + DOMPurify since multiple researchers can share the library). Per-bookmark backlinks: if note A links to bookmark B via [[B-title]] syntax, show 'mentioned in: A' on B's card. Per-tag RSS feed at /feed/[tag].xml so collaborators can subscribe.

**Frequently asked questions**

- **Q:** How does this compare to Pocket / Pinboard / Raindrop / Instapaper?
  **A:** Pocket is shutting down (Mozilla announced sunset in 2025), so 'Pocket alternative' is a real and active search. Pinboard is the closest functional match — both are tag-organized link libraries with archive workflow. The difference is ownership: this is YOUR app on YOUR subdomain that you can refine indefinitely. Raindrop and Instapaper are SaaS with paywalled features (more bookmarks, full-text-search, etc.); the FloopFloop-generated version has no row caps and the search-across-everything bar is free out of the box.
- **Q:** Where are my bookmarks stored?
  **A:** The default template uses browser localStorage so the manager works instantly with no signup. Bookmarks live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so bookmarks sync across devices via a login' to move to server storage — the codegen scaffolds the schema, the API routes, and the sync logic in one round. The scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Does it auto-fetch the title from the URL when I paste a link?
  **A:** The default template lets you enter the title manually and defaults to the URL's hostname when you leave it blank — no server-side fetch is needed for the localStorage-only flow. For auto-title (the Pocket / Raindrop experience) refine with 'add a /api/extract-metadata route that fetches the URL on the server, parses the <title> and OpenGraph tags from the HTML, and returns them to the add form'. The codegen wires the server-side fetch + the meta parser + the form-prefill in one round. Honors a 5-second timeout and a 1MB body cap so a hostile URL can't burn server time.
- **Q:** Can I import my Pocket / Pinboard / Raindrop export?
  **A:** Not in the default template. For import refine with 'add an /import page that accepts a Pocket .csv / Pinboard .json / Raindrop .html export, parses each row, and inserts it as a bookmark with the original timestamp + tag set preserved'. The Pocket CSV columns are stable (url, title, time_added, tags), Pinboard's JSON shape too — the codegen scaffolds the parser in a single round.
- **Q:** How are favicons fetched?
  **A:** Each bookmark card requests `/favicon.ico` from the URL's host directly — no third-party service involved (no Google s2/favicons, no DuckDuckGo /ip3/, none of the privacy-leaky favicon proxies). When the request fails or the host doesn't serve a favicon, the card falls back to a Globe icon. The ~20% of sites without a conventional favicon path don't break; they just render with the fallback.
- **Q:** Can I share a bookmark list with someone?
  **A:** Not in the localStorage default — bookmarks are per-device. For sharing refine with 'add a /share/[id] route that renders a read-only view of any tagged subset' OR 'add a public/private flag per bookmark and a /me page that lists my public bookmarks as a feed others can RSS-subscribe to'. The codegen wires the route + the privacy gate + the feed.xml in one round.
- **Q:** What's the biggest a single user's library can get?
  **A:** localStorage caps at 5–10MB depending on browser. A bookmark row averages ~300 bytes (URL + title + a few tags + a short note) so the floor is roughly 15,000–30,000 bookmarks before quota pressure shows up. The search bar uses a single-pass substring filter across all rows on every keystroke — comfortably handles 5,000 bookmarks at the typing rate of a human; past that, refine with 'add a debounced search and a lightweight inverted index built from tags + words in titles' to keep it responsive.

### Mood Journal
URL: https://www.floopfloop.com/en/build/mood-journal

Build your Mood Journal with AI in under 5 minutes

Build a Daylio-style daily mood tracker with a 52-week calendar heatmap, streak counter, 30-day rolling average, and optional per-day notes — generated from a single prompt.

**Example prompts**

- Build a Daylio-style mood journal. 5-emoji mood picker (Awful / Bad / OK / Good / Great) with an optional note field. One entry per day, re-submitting overwrites. 52-week × 7-day calendar heatmap as the signature visual — each cell colored by mood (negative-tier for Awful/Bad, muted for OK, positive-tier for Good/Great). Stats row: current streak with a grace-day so '0' doesn't surface at 9am, 30-day rolling average, total entries. Recent-entries list with relative-date labels.
- Create a CBT-style 'thought record' journal. Each entry captures: the situation, the automatic thought, the emotion (5-point intensity slider), the evidence for/against the thought, and a balanced reframe. Color-coded by emotion category (anxious / sad / angry / shame / joy). Weekly digest emails a summary of the most-frequent thought patterns via Resend.
- Design a 1-second-a-day video journal. Each entry is a short note (140 char max) + a single mood emoji. The home view stacks every entry in a stream sorted by date. A 'play through year' button cycles through all the year's entries one second each — a personal year-in-review montage.
- Build a sleep+mood correlation tracker. Each day captures hours slept, sleep quality (1-5), mood (1-5), and optional caffeine/exercise/screen-time flags. The dashboard plots a 30-day scatter of sleep-hours vs next-day-mood with a fitted line, so the user can see their own causal hint (this is the actionable feedback Daylio doesn't give you).

**Frequently asked questions**

- **Q:** How does this compare to Daylio / Moodflow / Reflectly / Stoic?
  **A:** Daylio is the dominant app in this space; the FloopFloop-generated version covers the same daily-checkin + heatmap-visualization pattern with no subscription paywall on history depth or export. Moodflow and Reflectly are more guided-prompt apps (CBT thought records, gratitude entries); the second example prompt above generates that style. Stoic is journaling-with-philosophy; refine with 'add a daily-quote field from the stoic-quotes table' for that variant. The key differentiator: ownership. Daylio's data lives in their cloud; the FloopFloop version lives in your browser (or your own Postgres) and exports as JSON whenever you want.
- **Q:** Where is my data stored?
  **A:** The default template uses browser localStorage so the journal works instantly with no signup. Entries live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so entries sync across devices via a login' to move to server storage — the codegen scaffolds the schema, the API routes, and the sync logic in one round. The scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema. Particularly important for mood data — it shouldn't end up training someone else's model.
- **Q:** Does the streak counter reset if I forget a day?
  **A:** Yes — the streak is consecutive-days-logged. With one twist: the counter has a grace-day at the start of the current day so the page doesn't read '0 streak' at 9am before you've had a chance to log today. If yesterday was logged but today isn't yet, the streak still counts yesterday's run. Once midnight passes without a new entry, the streak drops to zero. Refine with 'add a daily push-notification reminder at 9pm if today hasn't been logged' to keep streaks alive (the codegen wires the service worker + the daily-reminder check).
- **Q:** Why a calendar heatmap?
  **A:** The heatmap (GitHub-contribution-graph layout — 52 weeks × 7 days) is the highest-information-density visualization for daily binary-or-ordinal data. A user can spot mood-cycles, seasonal slumps, and the months they were most consistent at a glance without scrolling. Daylio buries the equivalent view behind a paid tier; here it's the first thing you see.
- **Q:** How private is this?
  **A:** Default template: data never leaves your browser. No analytics call, no server logging of the entries, no third-party scripts loaded on the page. The Floop platform itself (the chrome around the tenant project) does run analytics on aggregate page-views, but never on the entry content — that lives in localStorage on your device only.
- **Q:** Can I export my entries?
  **A:** Not in the default template. For export refine with 'add an /export button that downloads my entries as a single .json file' (one round to wire) or 'add a CSV export with date/mood/note columns'. For the import case (coming FROM Daylio): refine with 'add an /import page that accepts the Daylio backup .zip, parses the entries.json inside, and inserts each into my journal'. Daylio's export format is stable enough to parse in a single codegen round.
- **Q:** Does it handle multiple time zones if I travel?
  **A:** All date math is local-time (YYYY-MM-DD keys derived from `Date.get*` not `toISOString`). An 11pm entry in PT files under that calendar day in PT; the next morning in JST the SAME entry is still that PT date. Streaks compute against the browser's current local-time day boundary. If you cross the date line and log on both sides, you can technically log two entries for what feels like 'the same day' — the upsert-by-date logic dedupes against the calendar-day key, not the wall-clock 24-hour window.

### Subscription Tracker
URL: https://www.floopfloop.com/en/build/subscription-tracker

Build your Subscription Tracker with AI in under 5 minutes

Build a Bobby / Subby / TrackMySubs-style recurring-bills manager with renewal-countdown chips, monthly burn-rate stat, and category-grouped spend breakdown — generated from a single prompt.

**Example prompts**

- Build a Bobby-style subscription tracker. Vertical card list, one sub per card, color-coded by category (Streaming / Music / Software / Cloud / Hardware / Fitness / News / Gaming / AI / Other) via a left-edge strip. Renewal countdown chip per card colored by urgency tier (today/tomorrow red, ≤7 amber, ≤30 muted, >30 green). Three summary stats at the top: monthly burn (yearly subs normalized to /12), yearly projection, per-service average. Category bar showing each tier's slice of monthly spend. Add form + per-card 'mark renewed' + delete.
- Create a couples' shared subscription tracker. Two-payer mode (Alex pays / Sam pays / Split 50-50). Per-payer monthly burn surfaced separately so each person sees their share. 'Settle up' button at month-end computes who owes whom based on the split rules.
- Design a household-savings audit tool. Same subscription model plus a 'last used' field per service the user updates manually. Surface a 'haven't opened in 90+ days — cancel?' nudge per stale sub. Annual savings projection if the flagged subs are cancelled, with a 'mark cancelled (save $X/yr)' button.
- Build a SaaS-budget tracker for a freelancer. Tag each sub with a project / client. Per-project monthly burn so the operator can roll it into invoices ('Project Alpha costs $187/mo in SaaS subs, billed at 1.3x markup = $243'). Export the per-project breakdown as a CSV for the bookkeeper.

**Frequently asked questions**

- **Q:** How does this compare to Bobby / Subby / TrackMySubs / SubscriptionStats?
  **A:** Bobby is the dominant iOS app in this space; Subby and TrackMySubs cover web. All three are paywalled — Bobby caps free users at 5 subscriptions, TrackMySubs paywalls the export-as-CSV feature, SubscriptionStats charges $36/yr for the basic dashboard. The FloopFloop-generated version has no caps, no paywalled features, and lives on YOUR subdomain. The renewal-countdown chip + monthly-burn-with-yearly-normalization stats are the core of the Bobby UX, surfaced first-class out of the box.
- **Q:** Why normalize yearly subscriptions to monthly equivalent?
  **A:** Otherwise the monthly-burn stat is meaningless — a $48/yr GitHub Pro and a $48/mo enterprise SaaS would contribute the same number to the bar even though one is 12× the actual recurring cost. The template stores the raw amount + cycle, but the aggregate math always divides yearly by 12 before summing. The per-card display still shows the original $48/yr (truth) plus a small '($4/mo equiv)' for cross-comparison with monthly subs.
- **Q:** How are renewals handled when the date passes?
  **A:** Auto-roll-forward on page load. Any subscription whose nextRenewal is in the past gets advanced (potentially multiple cycles — caps at 24 iterations as a safety belt against a date-in-1995 absurdity) so the countdown chip never shows a negative. The user can also manually 'mark as renewed' from the per-card hover action — useful for canceling-and-resubscribing-fresh or for confirming an off-cycle renewal.
- **Q:** Does it auto-detect subscriptions from my bank?
  **A:** Not in the default template — bank-feed integration needs Plaid / Yodlee / Mastercard Open Banking with KYC, regional licensing, and per-call fees that don't make sense for a single-user app. For semi-automated detection refine with 'add a CSV import that parses a bank statement and flags lines matching common subscription names (Netflix, Spotify, Apple, Google, etc.) as candidates to confirm'. Most banks export 90 days of transactions to CSV in a stable column shape.
- **Q:** Where is my subscription data stored?
  **A:** The default template uses browser localStorage so the tracker works instantly with no signup. Subscriptions live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so subscriptions sync across devices via a login' to move to server storage. The scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can I get a notification before a subscription renews?
  **A:** Not in the default — the countdown chip is the visual cue. For active notifications refine with 'add a daily cron that emails me at 8am with subscriptions renewing in the next 3 days via Resend' (the codegen wires the cron + the SQL filter + the email template in one round). For a push-notification variant: 'add a service worker + Web Push subscription so my phone gets a notification 24 hours before any renewal'.
- **Q:** What if a service has a free trial that converts to paid later?
  **A:** Add it with the trial-end date as the nextRenewal and the post-trial price as the amount — the countdown chip will read 'X days' through the trial, then the auto-roll-forward will bump it to the next billing date as soon as the trial ends. Refine with 'add a trialUntil field so cards in trial show with a distinct purple ring + don't count toward the monthly burn until the trial ends' for explicit trial tracking.

### Plant Care Tracker
URL: https://www.floopfloop.com/en/build/plant-care-tracker

Build your Plant Care Tracker with AI in under 5 minutes

Build a Greg / Planta-style houseplant care app with per-plant vertical water-level gauges, urgency-tier countdown chips, a 'needs water today' hero greeting, light-requirement chips, and an append-only care timeline — generated from a single prompt.

**Example prompts**

- Build a Greg / Planta-style plant care tracker. Each houseplant card shows a vertical water-level gauge that fills as days-since-water approaches the configured watering interval, then turns red when overdue. Urgency-tier countdown chip per card (overdue red, due-today amber, soon yellow, ok green). Hero greeting at top: time-of-day + 'X plants need water today'. Add form captures name, species, emoji, water-every-N-days, light requirement (bright direct / bright indirect / low), and location. One-tap 'Water now' button per card advances lastWatered and appends a care event. Sidebar with light-needs distribution + recent-care timeline (water / fertilize / prune / repot events with color-coded dots).
- Create a single-room plant manager — same model but the dashboard groups plants by `location` (Living Room / Bedroom / Kitchen / Office) with one collapsible section per room. Each room shows its own 'needs water' count in the section header. Useful when the gardener walks the apartment in a pre-set route every morning.
- Design a beginner-friendly first-plant-care app. Same vertical water gauge but EVERY card also shows a 'Plant Confidence' meter (number of successful waterings in a row before missing one). After 10 in a row a small badge appears: 'Plant Pro'. Drop a 'Tip for today' card at the top with a rotating houseplant-care tip from a small built-in array. No species field — keep it absolute-beginner friendly.
- Build a serious horticulturalist's plant journal. Same model plus per-plant fields for soil mix, pot size, fertilizer schedule (every-N-waterings), last repot date, and a free-text observation log. Repot reminders surface as a separate urgency tier when lastRepot is more than 18 months ago. Export the full care history of a single plant as JSON for sharing with /r/houseplants when something looks off.

**Frequently asked questions**

- **Q:** How does this compare to Greg / Planta / Vera / Plant Daddy?
  **A:** Greg, Planta, and Vera are the dominant houseplant apps — all subscription-based ($30–$60/yr) and all keep your plant collection inside their cloud. The FloopFloop-generated version has no subscription, no plant cap, and lives on YOUR subdomain. The vertical water-gauge + urgency-tier countdown chip is the core of the Greg UX, surfaced first-class out of the box. Refine it however you want — the closed apps can't be changed.
- **Q:** How does the vertical water gauge work?
  **A:** Each plant card shows a thin vertical bar whose fill height is `daysSinceWater / waterEveryDays * 100%`. At 100% the plant is due today; over 100% it's overdue and the bar color flips from primary to destructive (the cap stays at 100% visible — the chip beside it shows the actual '3d overdue' count). When you tap 'Water now' the lastWatered date snaps to today and the gauge resets to ~0%, giving an immediate visual reward.
- **Q:** Where is my plant data stored?
  **A:** The default template uses browser localStorage so the tracker works instantly with no signup. Plants and care events live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so my plants sync across devices via a login' to move to server storage. The codegen scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can I get a push notification when a plant needs water?
  **A:** Not in the default — the urgency-tier chips + hero greeting on page load are the cues. For active notifications refine with 'add a daily cron that emails me at 9am with the list of plants that need water today via Resend' (the codegen wires the cron + the SQL filter + the email template in one round). For phone push: 'add a service worker + Web Push subscription so my phone gets a notification when any plant goes overdue'.
- **Q:** How are the watering intervals chosen?
  **A:** You set them per plant — the form defaults to 7 days because that's a reasonable median for the most common houseplants, but it accepts anything between 1 and 365. Real watering depends on plant species, pot size, soil mix, light, season, and your home's humidity — the app doesn't try to guess. Refine with 'add a season modifier: in winter (Dec–Feb) multiply all watering intervals by 1.5' if you want the app to handle dormancy automatically.
- **Q:** What if I have 50+ plants?
  **A:** The grid scales — there's no hard cap. Past ~30 plants the recommended refine is 'add a location filter so I can view just the plants in one room at a time', which keeps the dashboard scannable. The localStorage budget is generous (5MB+ in every browser); a single plant record is ~300 bytes, so the storage layer comfortably handles 10,000+ plants before quota becomes the bottleneck.
- **Q:** Does it track fertilizer / repotting / pruning too?
  **A:** Yes — the care log accepts four event types out of the box (water, fertilize, prune, repot), each color-coded in the timeline. The 'Water now' button is the only one wired to the per-card UI by default because that's the daily-driver action. Refine with 'add a per-card menu with Fertilize / Prune / Repot buttons that append a care event without affecting the water-gauge' to surface the other three actions inline.

### Personal CRM
URL: https://www.floopfloop.com/en/build/personal-crm

Build your Personal CRM with AI in under 5 minutes

Build a Clay / Dex / Monaru-style relationship tracker with per-contact warmth rings, configurable touch cadences, birthday reminders, channel-tagged interaction log, and a 'who to ping today' hero — generated from a single prompt.

**Example prompts**

- Build a Clay-style personal CRM. Each contact card shows a colored warmth ring around the avatar that fades as days-since-last-touch approach the configured cadence, then shifts to destructive when overdue. Per-contact cadence in days (Mom every 7d, college friend every 90d). Hero header surfaces a time-of-day greeting + 'X people to ping today' + the nearest upcoming birthday. Inline 'Log a touch' form per card with channel chips (call / text / in-person / video / email / social) and an optional note. Right rail with add-contact form, by-circle counts (Family / Close / Friend / Work / Other), and a recent-touches timeline.
- Create a family-only contact tracker — same model but the Family category is the only one. Defaults the cadence to 7d for everyone (the 'weekly check-in' habit). Adds a 'family tree' sidebar grouping contacts by household (children: [...], parents: [...]). Touch entries automatically include the day's photo of the kids if any in the note field.
- Design a networking-focused professional CRM. Same model but Work is the dominant category and the touch cadences default to 60-90 days. Per-contact fields for company, role, and where you met. The hero greeting becomes 'X people you should reach out to before Q-end'. Export the per-quarter touch log as a CSV for end-of-quarter networking-effort reflection.
- Build a 'remember every important date' app. Same contact model plus per-contact dates beyond birthday: anniversary, kids' birthdays, work anniversary, sobriety date, anything else. The hero strip rolls through 'X people to ping today, Y dates this week'. The interaction timeline groups by month so the operator can see 'I sent 12 birthday messages in March' patterns.

**Frequently asked questions**

- **Q:** How does this compare to Clay / Dex / Monaru / Levitate / Cloze?
  **A:** Clay, Dex, and Monaru are the dominant personal-CRM apps — all subscription-based ($10–$30/mo) and all keep your contact list inside their cloud. Cloze and Levitate are sales-CRM-flavored and over-built for the friends/family use case. The FloopFloop-generated version has no subscription, no contact cap, and lives on YOUR subdomain. The warmth-ring + 'who to ping today' hero is the core of the Dex/Monaru UX, surfaced first-class out of the box. Refine the categories, the cadences, the channel set, or the visual style — the closed apps can't be changed.
- **Q:** How is this different from the FloopFloop crm-dashboard template?
  **A:** crm-dashboard is a B2B sales pipeline — contacts are leads, the deal stages are kanban columns, and the dominant verbs are 'qualify', 'demo', 'close'. personal-crm is the OPPOSITE shape: contacts are people you care about, the cadence is configurable per person (weekly for mom, quarterly for a college friend), the dominant verb is 'reach out', and the failure mode is 'I forgot Mom's birthday' not 'I missed quota'. Both have a contact list; almost nothing else overlaps. Pick crm-dashboard for selling, personal-crm for relationships.
- **Q:** How does the warmth ring work?
  **A:** Each contact card has a colored ring around their avatar. The ring color is driven by `daysSinceContact / touchEveryDays`: under 50% of the cadence shows the vibrant warm gradient; 50-100% shows a cooler primary-to-accent; 1-2x overdue shows amber (stale); over 2x shows the destructive muted gradient (cold). When you tap 'Log a touch' and save, the contact's lastContacted snaps to today and the ring resets to warm — instant visual reward.
- **Q:** Where is my contact data stored?
  **A:** The default template uses browser localStorage so the CRM works instantly with no signup. Contacts and interactions live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so my contacts sync across devices via a login' to move to server storage. The codegen scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can I get a push notification when someone needs a ping?
  **A:** Not in the default — the warmth ring + 'X to ping today' hero on page load are the cues. For active notifications refine with 'add a daily cron that emails me at 8am with the list of people to ping today via Resend' (the codegen wires the cron + the SQL filter + the email template in one round). For phone push: 'add a service worker + Web Push subscription so my phone gets a notification when any contact goes cold'.
- **Q:** How do birthdays work?
  **A:** Each contact has an optional birthday field (YYYY-MM-DD). The hero strip surfaces the nearest upcoming birthday in the next 30 days with a relative countdown ('Mom's birthday in 3 days 🎂'). Feb 29 birthdays automatically roll to Mar 1 in non-leap years so they still surface annually. Refine with 'show every birthday in the next 90 days as a sidebar widget' if you want a longer planning window — the upcomingBirthdays() helper accepts a configurable window parameter.
- **Q:** What if I have 500+ contacts (real friends + acquaintances)?
  **A:** The grid scales — there's no hard cap. Past ~50 contacts the recommended refine is 'add a category filter so I can view just Family or just Work at a time', which keeps the dashboard scannable. The localStorage budget is generous (5MB+ in every browser); a single contact record is ~400 bytes plus 200 bytes per interaction, so the storage layer comfortably handles 10,000+ contacts and 100,000+ interactions before quota becomes the bottleneck.

### Movie & Show Watchlist
URL: https://www.floopfloop.com/en/build/watchlist

Build your Watchlist with AI in under 5 minutes

Build a Letterboxd / Trakt-style watchlist with a poster-grid view, status overlays (want / watching / watched / dropped), per-show episode progress, 5-star ratings, and an 'Up Next' hero that surfaces the show you're actively watching — generated from a single prompt.

**Example prompts**

- Build a Letterboxd-style movie + show watchlist. Each title is a poster card with the status (want / watching / watched / dropped) shown as a corner overlay and the poster background tinted by status. Shows have a totalEpisodes field with a per-card progress bar; clicking 'Mark episode watched' on the per-card primary button bumps the count and auto-flips status to 'watched' on the last episode. Hero strip at the top surfaces the show you're most actively watching ('Up next: Severance · Episode 12 of 19') with a one-click 'Mark episode watched' CTA so you can rip through episodes without scrolling. Stats strip: watched-this-year count, average rating, top platform. Status-chip filters above the grid for quick drill-down.
- Create a couples' shared watchlist — same model but every title has an 'agreed' flag (both Alex and Sam want to watch it) that surfaces those first in the 'want to watch' bucket. Each watched entry tracks who watched it (one of: Alex / Sam / both) so the 'watched together' subset can become its own filter chip. Useful for 'haven't watched anything together in a while, what's on the agreed list?'.
- Design a film-club tracker — same model plus per-title fields for the club member who recommended it, the meeting date it'll be discussed, and a 'club rating' (separate from your personal rating) that's the average of every member's score. Surfaces the queue for the next meeting in the hero strip instead of 'Up next'. Export a season summary as CSV at year-end so the club has a record.
- Build a streaming-platform optimiser — same watchlist but each title's `platform` field powers a sidebar that shows 'X titles currently on your watchlist are on Netflix, Y on Hulu, Z on Disney+'. Surface a 'top platform by want-to-watch count' so the operator can decide which subscription to keep paying for next month. Useful right before a cancel-or-keep decision.

**Frequently asked questions**

- **Q:** How does this compare to Letterboxd / Trakt / Reelgood / TV Time / Simkl?
  **A:** Letterboxd is the dominant film-diary app (paywalled features at $19/yr); Trakt is the show-and-movie tracker for the cord-cutter crowd (paywalled at $30/yr); Reelgood and JustWatch focus on 'where can I stream it'; TV Time and Simkl handle episode progress. All five keep your watch history inside their cloud. The FloopFloop-generated version lives on YOUR subdomain with no subscription and no cap. The poster-grid + 'Up next' hero is the core of the TV Time / Trakt UX, surfaced first-class out of the box.
- **Q:** Why use emoji posters instead of real movie images?
  **A:** Real poster images need a third-party API (TMDB, OMDb) with an API key and image-hosting, which adds two failure modes the operator has to manage. Emoji + a status-tinted gradient is theme-aware (works in all 5 globals.css palettes), purely client-side, and never breaks. Refine with 'fetch posters from TMDB by title — add a TMDB_API_KEY env var and lazy-load images with the size-w185 endpoint' if you want real artwork.
- **Q:** How is the 'Up next' show picked?
  **A:** Heuristic: it's the most-recently-added show with status='watching' and episodesWatched < totalEpisodes. Recently-added is a proxy for 'still excited about this one' — when an operator finishes a season and starts another show, the new one auto-surfaces as Up Next. Only one show is featured at a time so the hero stays focused. Refine with 'pick Up Next based on episodesWatched / totalEpisodes ratio (least progress first)' if you'd rather knock out long-in-progress shows.
- **Q:** Where is my watchlist data stored?
  **A:** The default template uses browser localStorage so the watchlist works instantly with no signup. Titles + episode progress live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so my watchlist syncs across devices via a login' to move to server storage. The codegen scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can I import my existing Letterboxd / Trakt / IMDb watchlist?
  **A:** Not in the default — manual entry is the simpler MVP. Refine with 'add a CSV import that accepts a Letterboxd export and creates one title per row, mapping the Letterboxd rating column to my rating field'. Letterboxd, Trakt, and IMDb all support CSV export from account settings. The codegen wires the file upload + the column mapping + the import button in one round.
- **Q:** What if I want to track per-season progress instead of just total episodes?
  **A:** The default model uses a flat totalEpisodes / episodesWatched pair — the simplest shape that supports the 'Up next' progress bar. Refine with 'track shows by season: each show has seasons[] with totalEpisodes per season, and the episodesWatched counter is the sum of per-season progress' for finer-grained tracking. The Up Next hero will then surface 'S2E3 of S2 (10 episodes)' instead of just 'Episode 12 of 19'.
- **Q:** Does it remind me when a new episode airs?
  **A:** Not in the default — that needs a third-party API call (TMDB or TVDB) on a daily cron to check air-dates. Refine with 'add a daily cron that calls TMDB for every watching-status show and emails me when a new episode airs' (the codegen wires the cron + the API call + the email template in one round). For phone push: 'add a service worker + Web Push subscription so my phone gets a notification on episode air-day'.

### Workout & Strength Tracker
URL: https://www.floopfloop.com/en/build/workout-tracker

Build your Workout Tracker with AI in under 5 minutes

Build a Strong / Hevy-style strength-training tracker with set-by-set weight × reps logging, per-exercise PR tracking via Brzycki estimated 1RM, an inline sparkline chart of progress over time, lb / kg unit toggle, and a 'headline PR' hero — generated from a single prompt.

**Example prompts**

- Build a Strong-style strength-training tracker. Per-set logging with weight × reps as the atomic unit. Exercise library seeded with Bench Press / Back Squat / Deadlift / Overhead Press / Barbell Row / Pull-Up / Bicep Curl / Plank covering all major muscle groups, plus an Add-Exercise form for accessories. Active-session form lets the operator stack pending sets locally then Save All — so a mid-workout phone-lock doesn't lose a half-typed set. PR card per exercise with a 12-point sparkline of estimated 1RM (Brzycki formula) over time, sorted by est-1RM descending so the operator's biggest lifts surface first. Hero strip shows headline PR (highest est-1RM across all exercises), current streak in days (1-day grace), and total workouts. lb / kg unit toggle in the navbar — units are global so the operator can't log a 100 kg bench as 100 lb because they forgot which mode the form was in.
- Create a powerlifting cycle tracker — same model focused on the Big 3 (squat / bench / deadlift) plus their supplemental lifts. Add a cycle field per workout (Hypertrophy / Strength / Peak) with a sidebar showing the current cycle phase and the planned lift maxes for the week. PR strip filtered to just the Big 3 with comparison against the operator's competition meet maxes (separate target field).
- Design a fitness-coach client tracker — same model but every workout has an athlete name. The PR strip becomes per-athlete (filter chips above the grid). Coach hero shows aggregate: '4 athletes hit a PR this week' instead of a single headline PR. Useful for a personal trainer with 5–10 clients who want a shared FloopFloop instance instead of separate spreadsheets.
- Build a CrossFit WOD log — same model plus a WOD-type field per session (AMRAP / EMOM / For Time / Strength). For-Time WODs replace the weight column with a duration ('Fran: 3:42') and rank against personal bests. AMRAP / EMOM track rounds + reps. The PR strip shows time PRs alongside weight PRs.

**Frequently asked questions**

- **Q:** How does this compare to Strong / Hevy / Boostcamp / FitNotes?
  **A:** Strong is the dominant iOS strength tracker (paywalled at $30/yr); Hevy is the cross-platform competitor with social features; Boostcamp is the program-following app (templated cycles); FitNotes is the Android-only free option. All four keep your log inside their cloud. The FloopFloop-generated version has no subscription, no log cap, and lives on YOUR subdomain. The PR-sparkline strip is the core of the Strong / Hevy progression UX, surfaced first-class out of the box. Refine the exercise library, cycle structure, or PR formula — the closed apps can't be changed.
- **Q:** How is the PR ranked?
  **A:** Brzycki estimated 1RM: weight × 36 / (37 − reps), capped at 10 reps. This lets a heavy 3-rep set 'beat' a light 8-rep set when ranking PRs, which matches how serious lifters care about strength (vs volume). Reps over 10 are clamped to 10 because the formula loses accuracy beyond that — a 20-rep set isn't really a strength PR, it's a conditioning PR. Refine with 'rank PRs by Epley formula instead' or 'rank by raw weight only ignoring reps' to swap algorithms.
- **Q:** How does the streak counter work?
  **A:** Counts consecutive distinct workout dates back from today, with a 1-day grace allowance so a missed rest day doesn't break the streak. Same convention as habit-tracker-app. The streak is conservative — only one missed day is forgiven, two in a row resets to zero. Refine with 'allow 2-day grace' if you want a more forgiving variant for periodisation cycles.
- **Q:** Where is my workout data stored?
  **A:** The default template uses browser localStorage so the tracker works instantly with no signup. Exercises, sets, and the unit preference live on whatever device you're typing on and don't sync across devices. Refine with 'add a Postgres backend so my workouts sync across devices via a login' to move to server storage. The codegen scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Why is the lb / kg toggle global instead of per-set?
  **A:** Two reasons: (1) Mixing units within one exercise's history makes the PR sparkline meaningless (180 kg ≈ 397 lb — the line would zigzag wildly between data points logged in different units). (2) A per-set toggle introduces an entire class of operator errors — logging 100 kg as 100 lb because the form was in lb mode when they meant kg — that the data layer can't auto-correct after the fact. Global toggle means the operator picks a system once at signup and the entire app stays consistent. Refine with 'auto-convert all logged weights when the unit toggles' if you really want a converting toggle.
- **Q:** Can I import my Strong / Hevy / FitNotes history?
  **A:** Not in the default — manual entry is the simpler MVP. Refine with 'add a CSV import that accepts a Strong export (columns: Date, Exercise Name, Set Order, Weight, Reps) and creates one WorkoutLog per row, grouping consecutive same-exercise rows into a single session'. Strong / Hevy / FitNotes all support CSV export from account settings. The codegen wires the file upload + the column mapping + the import button in one round.
- **Q:** What about supersets / drop sets / rest-pause?
  **A:** The default model treats each entry as a flat list of {weight, reps} sets — the simplest shape that supports the PR sparkline. Refine with 'add a setType field per set (normal / dropset / rest-pause) and a supersetGroup field that pairs sets across two exercises into a single block' for finer-grained logging. The PR algorithm still picks the heaviest set regardless of type, so the rest-pause variant won't artificially inflate PRs.

### Wishlist & Gift Registry
URL: https://www.floopfloop.com/en/build/wishlist

Build your Wishlist with AI in under 5 minutes

Build an Amazon Wishlist / MyRegistry / Zola-style shareable gift list with per-item anonymous claiming (so friends don't bring three of the same toaster), priority stars, optional store links + prices, category grouping, and a 'most wanted' hero — generated from a single prompt.

**Example prompts**

- Build an Amazon Wishlist-style shareable wishlist. Each item card has an emoji 'poster', the title, price + priority stars (1-3), an optional store link with hostname-only chip, and a notes line. Per-item 'I'll get this' button opens an inline name input then flips the card to a faded 'Claimed by Sarah' state with a diagonal stripe overlay so friends visiting the share-URL can immediately see what's still available. Hero strip surfaces the highest-priority unclaimed wish as a 'Most wanted' callout, plus stats: total wishes, % claimed, open value. Status-chip filter row (all / open / claimed). Right rail with add-wish form + by-category counts.
- Create a wedding registry — same model with category preset to Home / Kitchen / Experiences / Honeymoon Fund. Add a couple's-names hero band above the wishlist, and a 'cash gift' card type (no link, just amount) for the honeymoon fund. Defaults priority to 'Would love' so the operator doesn't have to think about it for every item.
- Design a baby-shower registry — same model but with categories preset to Clothing (0-3mo / 3-6mo / etc) / Feeding / Sleep / Travel / Toys. Add a registry-name header band. Each item has a 'quantity needed' field so a parent can register for 3 pacifiers and the claim flow tracks remaining count instead of binary claimed/not-claimed.
- Build a Christmas wishlist for the whole family. Each item gets a 'from' field (which family member it's for: Dad / Mom / Eli / Mia). Cards group by recipient in collapsible sections. Anonymous claim works across the whole family page — Mom can claim a gift for Eli without Eli seeing.

**Frequently asked questions**

- **Q:** How does this compare to Amazon Wishlist / MyRegistry / The Knot / Zola?
  **A:** Amazon Wishlist is free but limited to Amazon products and shows the buyer's name to the recipient (which spoils the surprise). MyRegistry is universal but paywalled at $30/yr for full features. The Knot and Zola are wedding-specific and bundle the registry with planning tools you may not want. The FloopFloop-generated version has no subscription, no item cap, no platform lock-in (any store link works), and the anonymous-claim flow keeps the gift a surprise. Refine the layout/categories for any occasion — the closed apps can't be changed.
- **Q:** How does the anonymous claim work?
  **A:** Each item has a 'I'll get this' button that opens an inline name input. The claimer types their name (or leaves it blank — defaults to 'anonymous') and clicks Claim. The card flips to a faded state with a diagonal stripe overlay + 'Claimed by Sarah' chip so other visitors see the item is spoken for. There's no auth — anyone with the URL can claim or un-claim, on the same principle as a low-friction wedding RSVP. For a heavier-trust model refine with 'add a per-claim email confirmation that requires the claimer to enter their email and receive a confirm link before the claim sticks'.
- **Q:** Where is my wishlist data stored?
  **A:** The default template uses browser localStorage so the wishlist works instantly with no signup. Items + claim state live on whatever device any visitor is using and don't sync across devices. This means a friend who claims an item from their phone only sees that claim on their phone — the owner sees their own browser's view. Refine with 'add a Postgres backend so claims sync across all visitors' to move to server storage. The codegen scanner blocks every external database (Supabase / Firebase / MongoDB) so the data stays on your own per-tenant Postgres schema.
- **Q:** Can I share the URL without the 'Add' form showing?
  **A:** The default template shows the add-form to every visitor — appropriate for a personal wishlist where the operator IS the only visitor doing real edits. For a public-share model refine with 'hide the AddWishForm + remove buttons when the URL has a ?view-only query param' so the operator shares `mywishlist.com?view-only` with friends and `mywishlist.com` for editing. The codegen wires the conditional + the URL-param read in one round.
- **Q:** Does it auto-import from Amazon / other stores?
  **A:** Not in the default — manual entry is simpler and works for any store. Refine with 'add an Amazon URL-paste flow that fetches the page title + price + image with a server action using cheerio for HTML parsing'. Note: Amazon, Etsy, and most large stores block scraping — the fetch will work for niche sites but fail on the big ones. For a more reliable path refine with 'add a OpenGraph URL-paste flow that fetches the og:title + og:image from any page' (most stores set OG tags even when they block scrapers).
- **Q:** What happens to the data if I want to delete the wishlist?
  **A:** Browser localStorage — visit the FloopFloop URL, open DevTools, Application tab → Local Storage → delete the `wishlist:items:v1` key. Or in the app: delete each wish via the per-card trash button. There's no server-side data to GDPR-delete (no DB, no signup). If you've migrated to the Postgres backend via refinement, the cleanup of the tenant project (Account → Delete Project) drops the schema.
- **Q:** How are the priority stars used in sorting?
  **A:** Items are sorted by priority descending (3 stars first), then unclaimed before claimed (so a friend sees what's still available without filtering), then most-recently-added. The 'Most wanted' hero picks the single highest-priority unclaimed item using the same algorithm. Operator changes priority via the form when adding — change isn't editable post-add in the default; refine with 'add a priority editor to the card hover state' if you want in-place editing.

### Typing Speed Test
URL: https://www.floopfloop.com/en/build/typing-test

Build your Typing Speed Test with AI in under 5 minutes

Build a monkeytype-style typing speed test with live WPM, accuracy, and a consistency score across time, word-count, and quote modes — per-mode personal bests saved in the browser, generated from a single prompt.

**Example prompts**

- Build a typing speed test with time (15/30/60s), word-count (10/25/50), and quote modes. Show the prompt text with a blinking caret and colour every character as it's typed — correct in the foreground colour, wrong with a red underline, untyped dimmed. Track live WPM and accuracy while typing, and on finish show net WPM, raw WPM, accuracy, a consistency score, and the elapsed time, plus a per-mode personal best saved to localStorage. Visual: a dark 'typing arena' HUD with one glowing prompt panel on a faint accent grid, monospace throughout.
- Create a monkeytype-style WPM test. Random words from a common-word bank, restart on Tab/Enter, a results card with words-per-minute and accuracy, and a copy-result button. Keep everything client-side and hydration-stable so the first word set matches on the server and client.
- Build a typing trainer for practice. Quote mode that pulls from a small set of public-domain quotes, a clean caret that follows the cursor, and a consistency graph of per-second WPM at the end so the typist can see where they slowed down. Add a daylight theme variant alongside the dark default.
- Build a typeracer-style speed test focused on a 60-second sprint. Endless word feed, a large live WPM readout, accuracy percentage, and a leaderboard of the user's own last ten runs stored locally. Make the wrong-key feedback obvious so the typist self-corrects without looking at the keyboard.

**Frequently asked questions**

- **Q:** How is this different from monkeytype or 10fastfingers?
  **A:** Those are great shared sites — but they're somebody else's product, with their word lists, their themes, and their telemetry. The version FloopFloop generates is yours: it lives on your subdomain, runs entirely in the browser, saves your personal bests locally, and you can swap the word bank, add your own quotes, change the theme, or wire it to a team leaderboard without asking anyone for a quota.
- **Q:** How is the WPM actually calculated?
  **A:** Using the standard convention that five typed characters equal one word. Net WPM counts only the characters you typed correctly over the elapsed time; raw WPM counts every keystroke. Accuracy is the share of typed characters that matched the prompt, and the consistency score is derived from how steady your per-second WPM stayed across the run.
- **Q:** Is anything I type sent to a server?
  **A:** No. The test, the timer, the WPM/accuracy maths, and your personal-best history all run in the browser and persist to localStorage. The only outbound surface is the /api/health probe, which just confirms the Lambda is reachable.
- **Q:** Can I add my own text or quotes to type?
  **A:** Yes. The word bank and quote list are plain data files — ask the AI to add a programming-keywords mode, a numbers/punctuation drill, or your company's onboarding script, and it ships in the next refinement.
- **Q:** Can I turn it into a team typing competition?
  **A:** Out of the box, bests are per-browser. Ask the AI to move the scores into the project's Postgres database with a small login, and you get a shared leaderboard — useful for support teams, transcription teams, or a friendly office contest.

### Diff Checker
URL: https://www.floopfloop.com/en/build/diff-checker

Build your Diff Checker with AI in under 5 minutes

Build a diffchecker.com-style text and code comparison tool with side-by-side and unified views, line-by-line add/remove highlighting, and ignore-whitespace / ignore-case options — runs entirely in the browser, generated from a single prompt.

**Example prompts**

- Build a diff checker that compares two blocks of text or code. Two line-numbered input panels, then a result that highlights differences line by line using a longest-common-subsequence diff so unchanged lines stay aligned — additions in green, deletions in red. Offer a side-by-side view and a unified (+/-) view, ignore-whitespace and ignore-case toggles, a +adds/-removes stat, and a copy-as-unified-diff button. Persist the last comparison to localStorage. Visual: a clean light 'code-review desk' with a central seam between the two panels and monospace code.
- Create a text-compare tool like diffchecker.com or text-compare.com. Paste original and changed text, see the differences highlighted instantly, swap the two sides with one click, and clear both. Keep it entirely client-side — nothing the user pastes should leave the browser.
- Build a code diff viewer for reviewing snippets. Unified view with +/- gutters and line numbers from both sides, syntax-neutral monospace rendering, and an ignore-whitespace option so reindentation doesn't drown the real changes. Add a GitHub-dark theme variant.
- Build a side-by-side document comparison tool. Align matching lines, render inserted lines on the right with a blank cell opposite and removed lines on the left, show a summary of how many lines were added and removed, and cap very large pastes so the tab never hangs.

**Frequently asked questions**

- **Q:** How is this different from diffchecker.com or text-compare.com?
  **A:** Those hosted tools work, but free tiers paste your text onto someone else's server (sometimes with size limits or ads), and you can't change how they look or behave. The version FloopFloop generates runs the diff entirely in your browser, keeps your last comparison in localStorage only, and is yours to restyle, extend with a word-level diff, or wire to your repo — no quota, no telemetry.
- **Q:** What diff algorithm does it use?
  **A:** A longest-common-subsequence (LCS) line diff — the same family git diff uses. It finds the longest run of shared lines and only flags the real insertions and deletions, so a one-line change in the middle of a file doesn't mark everything after it as different the way a naive line-by-line compare would.
- **Q:** Is my text uploaded anywhere?
  **A:** No. Both inputs, the comparison, and the rendered result stay in the browser; only your last comparison is saved, and only to this device's localStorage. The single outbound surface is the /api/health probe.
- **Q:** Does it handle large files?
  **A:** It diffs up to a few thousand lines per side instantly and caps pathological pastes with a truncation notice so a multi-megabyte dump can't lock up the tab. Ask the AI to raise the cap or add a Web Worker if you routinely compare very large files.
- **Q:** Can it do word-level or JSON-aware diffing?
  **A:** The default is a line diff. Ask the AI to add an intra-line word diff (highlighting the changed words within a modified line) or a JSON-aware mode that normalises key order before comparing — both are templated additions, not rewrites.

### Color Contrast Checker
URL: https://www.floopfloop.com/en/build/color-contrast-checker

Build your Color Contrast Checker with AI in under 5 minutes

Build a WCAG color contrast checker that grades any foreground/background pair against AA and AAA for normal text, large text, and UI components — with a live preview and an auto-accessible-text suggestion, generated from a single prompt.

**Example prompts**

- Build a color contrast checker. Two colour inputs (a native picker plus a hex field) for foreground and background, then a big contrast-ratio readout and a WCAG pass/fail grid: AA and AAA for normal text (4.5 / 7), large text (3 / 4.5), and UI components (3). Add a live foreground-on-background preview specimen with sample text, a swap button, and an 'auto text colour' button that picks black or white for the best contrast. Visual: a clean light 'accessibility inspection lab' — instrument-style ratio readout, green/red compliance chips.
- Create a WCAG contrast tool like the WebAIM contrast checker. Compute the contrast ratio from the relative-luminance formula in the browser, show whether it passes AA/AAA, and update everything live as the colours change. Keep it entirely client-side — nothing about the colours leaves the page.
- Build an accessibility colour tester for designers. Paste two hex values, see the ratio and AA/AAA badges, and preview real headings, body copy, and a button rendered in those colours so the result is concrete rather than just a number. Add a dark theme variant.
- Build a contrast-ratio checker that helps fix failures, not just flag them. Show the current ratio and, when it fails AA, suggest the nearest accessible foreground (black or white) with a one-click apply. Remember the last colour pair on the device.

**Frequently asked questions**

- **Q:** How is this different from the WebAIM contrast checker or Coolors?
  **A:** Those are great, but they're someone else's page — fixed layout, fixed feature set, sometimes ads. The version FloopFloop generates is yours: it lives on your subdomain, runs the WCAG maths entirely in the browser, and you can restyle it, add a palette of brand colours to test against, or wire it into your design system without asking anyone for anything.
- **Q:** Which WCAG thresholds does it check?
  **A:** The WCAG 2.1 minimums: normal body text needs 4.5:1 for AA and 7:1 for AAA; large text (18pt+, or 14pt+ bold) needs 3:1 for AA and 4.5:1 for AAA; and UI components and graphical objects need 3:1. The ratio itself comes from the relative-luminance formula and ranges from 1:1 to 21:1.
- **Q:** Are my colours sent anywhere?
  **A:** No. The luminance and ratio maths, the AA/AAA grading, and the live preview all run in your browser, and the last pair you checked is saved to localStorage only. The single outbound surface is the /api/health probe.
- **Q:** What does the 'auto text colour' button do?
  **A:** It picks pure black or pure white — whichever has the higher contrast against your current background. It's the single safest text colour for any background and a fast way to get to a passing combination before you fine-tune the hue.
- **Q:** Can it check a whole palette at once?
  **A:** The default checks one pair at a time. Ask the AI to add a matrix mode that grids every colour in your brand palette against every other and flags the failing cells — it's a templated extension, not a rewrite.

### Unit Converter
URL: https://www.floopfloop.com/en/build/unit-converter

Build your Unit Converter with AI in under 5 minutes

Build a unit converter for length, weight, temperature, volume, area, speed, time, and digital storage — instant two-way conversion that runs entirely in the browser, generated from a single prompt.

**Example prompts**

- Build a unit converter with categories for length, weight/mass, temperature, volume, area, speed, time, and digital storage. Pick a category, choose 'from' and 'to' units, type a value, and see the result update instantly with a swap button to reverse the direction. Handle the offset-based temperature conversions (Celsius/Fahrenheit/Kelvin) correctly, not just ratios. Visual: a precision-instrument bench — a brushed-metal face plate, recessed unit selectors, and a glowing readout like a machinist's calliper.
- Create a measurement converter like rapidtables or unitconverters.net. Factor-based conversion for length, mass, volume, area, and speed run entirely in the browser with no network calls. Common pairs front and centre: km to miles, kg to lbs, cm to inches, Celsius to Fahrenheit.
- Build a metric-to-imperial converter for everyday use. Big input, a category switcher, and a live result, plus a short list of common conversions (miles to km, lbs to kg, inches to cm) as one-tap shortcuts. Remember the last category and units on the device.
- Build a developer-friendly converter that includes a data-storage category (bytes / KB / MB / GB / TB, both decimal and binary) alongside the everyday length / weight / temperature ones. Keep the arithmetic exact enough that round-tripping a value returns the same number.

**Frequently asked questions**

- **Q:** How is this different from the Google unit converter or rapidtables?
  **A:** Those work, but they're someone else's page wrapped in ads and tracking, and you can't change the categories or the look. The version FloopFloop generates is yours: it runs every conversion in the browser, has no telemetry, and you can add the units you actually use (nautical miles, troy ounces, your own custom factor) without asking for an API quota.
- **Q:** Does it handle temperature correctly?
  **A:** Yes. Temperature isn't a simple ratio — Celsius, Fahrenheit, and Kelvin need offset-based formulas — and the template handles those properly, so 0°C converts to 32°F rather than 0. The other categories (length, mass, volume, area, speed, storage) are factor-based and exact.
- **Q:** Is it accurate enough to rely on?
  **A:** The conversions use standard published factors and run in double precision, so round-tripping a value (convert A→B then B→A) returns the original number. For most everyday and engineering uses it's as accurate as the factors themselves; ask the AI to add more decimal places or a specific high-precision factor if you need it.
- **Q:** Can I add my own units or categories?
  **A:** Yes. The unit factors are a plain data file — ask the AI to add a cooking category (cups / tablespoons / millilitres), currency-style custom factors, or a fuel-economy converter, and it ships in the next refinement.
- **Q:** Does it work offline?
  **A:** Once the page has loaded, yes — there are no network calls for the conversions themselves. The only server surface is the /api/health probe, so the converter keeps working even on a flaky connection.

### CSS Gradient Generator
URL: https://www.floopfloop.com/en/build/css-gradient-generator

Build your CSS Gradient Generator with AI in under 5 minutes

Build a CSS gradient generator with linear, radial, and conic gradients, a draggable colour-stop track, a live preview, and copy-ready CSS — everything runs in the browser, generated from a single prompt.

**Example prompts**

- Build a CSS gradient generator. Linear, radial, and conic gradient types; a draggable colour-stop track where clicking the bar adds a stop in the colour already there and dragging a handle moves it; per-stop colour + position editing; an angle dial for linear/conic; a randomise button; a big live preview canvas; and a copy-ready CSS output block. Persist the last gradient to localStorage. Visual: a dark 'gradient studio' where the gradient is the hero, with a frosted control panel and a monospace CSS block.
- Create a gradient maker like cssgradient.io or uigradients. Pick two or more colours, drag the stops, switch between linear and radial, rotate the angle, and copy the `background: linear-gradient(...)` CSS. Keep it fully client-side — the gradient never leaves the browser.
- Build a gradient tool for designers with a large preview that fills the top of the page and a control strip below: gradient type tabs, a colour-stop editor, an angle slider, and one-click copy of the CSS. Add a daylight theme variant alongside the dark default.
- Build a CSS background-gradient generator that outputs clean, copy-paste CSS and supports multi-stop gradients (add as many stops as you like, each with its own colour and position). Include a randomise button for quick inspiration and remember the last design on the device.

**Frequently asked questions**

- **Q:** How is this different from cssgradient.io or uigradients?
  **A:** Those are great, but they're someone else's page with their preset gradients and their ads. The version FloopFloop generates is yours: it lives on your subdomain, runs entirely in the browser, and you can add your brand colours as presets, change the output format, or extend it with new gradient types without asking anyone for a quota.
- **Q:** Which gradient types does it support?
  **A:** Linear (along an angle), radial (spreading from the centre), and conic (sweeping around the centre) — the three CSS gradient functions. You add as many colour stops as you want, each with its own colour and position, and the tool writes the exact `linear-gradient` / `radial-gradient` / `conic-gradient` CSS.
- **Q:** Is the CSS production-ready?
  **A:** Yes — it outputs a standard `background:` declaration you can paste straight into a stylesheet, a Tailwind arbitrary value, or a styled-component. The colour stops are emitted in order with explicit percentages so it renders identically across browsers.
- **Q:** Does my gradient get sent anywhere?
  **A:** No. The gradient maths, the live preview, and the CSS output all run in your browser, and your last design is saved to localStorage only. The single outbound surface is the /api/health probe.
- **Q:** Can I add more than two colours?
  **A:** Yes — click anywhere on the colour-stop track to add a stop (it drops in the colour that's already at that point), drag it to fine-tune, and edit its exact colour and position. Remove a stop just as easily. There's no two-colour limit.

### Text Case Converter
URL: https://www.floopfloop.com/en/build/text-case-converter

Build your Text Case Converter with AI in under 5 minutes

Build a text case converter that turns any text into UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE and more — every format at once, with one-click copy. Runs entirely in the browser.

**Example prompts**

- Build a text case converter. One input field, then a grid of output cards — one per case — each showing the converted text with a copy button: lower, UPPER, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Train-Case, aLtErNaTiNg, and InVeRsE. Split the input into words first, handling spaces, hyphens, underscores, camelCase and acronym boundaries (XMLHttpRequest → XML Http Request), so every case re-joins cleanly. Show a live word/char count and persist the input to localStorage.
- Create a case converter like convertcase.net. Type once and see every case at the same time, each with a one-click copy button. Keep it fully client-side — nothing the user types leaves the browser.
- Build a developer-focused case tool that converts variable names between camelCase, PascalCase, snake_case, kebab-case, and CONSTANT_CASE, with correct word-splitting for acronyms (parseHTMLString → parse, HTML, string). Add a dark theme variant.
- Build a text transformer that converts case and copies the result. Include the writing-oriented cases (UPPERCASE, lowercase, Title Case, Sentence case) alongside the programming ones, plus fun ones like aLtErNaTiNg and InVeRsE, each in its own card.

**Frequently asked questions**

- **Q:** How is this different from convertcase.net?
  **A:** It does the same core job, but it's yours: it lives on your subdomain, runs entirely in the browser, shows every case at once (no clicking through a dropdown), and you can add your own cases, change the layout, or wire it into a build step without ads or limits.
- **Q:** Does it handle camelCase and acronyms correctly?
  **A:** Yes — that's the tricky part and it's done properly. The converter splits the input into words first, recognising camelCase boundaries and acronym runs, so `XMLHttpRequest` becomes `XML`, `Http`, `Request` and `the_quick brown-Fox` becomes `the`, `quick`, `brown`, `Fox` before every case re-joins them. That's why you get clean `xmlHttpRequest`, `xml-http-request`, and `XML_HTTP_REQUEST` outputs.
- **Q:** Which cases does it support?
  **A:** Thirteen: lower case, UPPER CASE, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Train-Case, aLtErNaTiNg, and InVeRsE. Ask the AI to add more (slug, Header-Case, etc.) and they ship in the next refinement.
- **Q:** Is my text sent anywhere?
  **A:** No. Every transform runs in your browser and the input is saved to localStorage only. The single outbound surface is the /api/health probe.
- **Q:** Can I convert a whole list at once?
  **A:** Paste as much as you like — it converts the entire input. Ask the AI to add a per-line mode if you want each line converted independently (handy for turning a column of headers into snake_case keys).

### Base64 Encoder & Decoder
URL: https://www.floopfloop.com/en/build/base64-encoder

Build your Base64 Encoder/Decoder with AI in under 5 minutes

Build a Base64 encoder/decoder that converts text to Base64 and back — with full Unicode support, a URL-safe (base64url) option, and one-click copy. Everything runs in the browser.

**Example prompts**

- Build a Base64 encoder and decoder. Two stacked panes — plain text on top, Base64 below — with an Encode/Decode toggle, a URL-safe (base64url) option, a swap button that feeds the output back as input and flips direction, and one-click copy. Encode UTF-8 correctly so emoji and accented characters round-trip (use TextEncoder/TextDecoder, not a bare btoa). When decoding, auto-detect standard vs URL-safe and ignore line wraps; show a clear error for invalid input. Show a live char/byte count and persist the input to localStorage.
- Create a Base64 tool like base64encode.org. Paste text to get Base64, or paste Base64 to get text back. Make it handle Unicode properly and offer a URL-safe variant. Keep it 100% client-side — nothing the user types is uploaded.
- Build a developer encoding tool that converts strings to and from Base64, with a base64url mode (- and _ instead of + and /, no padding) for use in URLs and JWTs. Add a dark theme variant and copy buttons.
- Build a Base64 converter with a big input box and an instant output box, an encode/decode switch, and a URL-safe toggle. It should tolerate pasted Base64 with newlines and tell me plainly when the input isn't valid Base64.

**Frequently asked questions**

- **Q:** How is this different from base64encode.org?
  **A:** Same core job, but it's yours: it lives on your subdomain, runs entirely in the browser, encodes and decodes in one view (with a swap button to chain them), and you can restyle it or add features — a file-to-data-URI mode, a JSON pretty-printer on decode — without ads or limits.
- **Q:** Does it handle emoji and accented characters?
  **A:** Yes. It encodes through a UTF-8 byte array, so `café` and `😀` round-trip cleanly. A naive `btoa()` throws on those — this avoids that whole class of bug, and decoding uses a strict UTF-8 decoder so you're told when bytes aren't valid text.
- **Q:** What is the URL-safe (base64url) option?
  **A:** Standard Base64 uses `+` and `/`, which have special meaning in URLs and filenames. base64url swaps them for `-` and `_` and drops the `=` padding, so the output is safe to drop into a query string, a path, or a JWT. Decoding accepts either flavour automatically.
- **Q:** Is Base64 encryption?
  **A:** No — it's a transport encoding, not encryption. Anyone can decode Base64, so never use it to hide secrets. It exists to move binary data safely through text-only channels (email, JSON, data URIs, HTTP headers).
- **Q:** Is my data sent anywhere?
  **A:** No. Encoding and decoding happen entirely in your browser, and your input is saved to localStorage only. The single outbound surface is the /api/health probe.

### Lorem Ipsum Generator
URL: https://www.floopfloop.com/en/build/lorem-ipsum-generator

Build your Lorem Ipsum Generator with AI in under 5 minutes

Build a lorem ipsum generator that produces placeholder text by paragraphs, sentences, or words — with a classic 'Lorem ipsum dolor sit amet' start and plain / HTML / list copy formats. Everything runs in the browser.

**Example prompts**

- Build a lorem ipsum generator. Let me choose how many paragraphs, sentences, or words, with a toggle to start with the classic 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' Show the generated text as the hero — set in a justified serif column with a drop cap, like a type specimen — and a Regenerate button for a fresh take. Copy it as plain text, HTML (<p> tags), or a bulleted list. Generate deterministically from a seed so the first render is hydration-safe, and remember my settings in localStorage. Everything client-side.
- Create a placeholder-text tool like lipsum.com. Pick a count and a unit (paragraphs / sentences / words), generate dummy Latin text, and copy it. Add a 'start with Lorem ipsum' option and an HTML output mode for pasting into markup.
- Build a dummy text generator for designers. Big, beautiful serif specimen of the generated copy, a slim control bar (amount, unit, regenerate), and one-click copy. Include a dark theme variant.
- Build a filler-text generator that outputs a precise number of words or paragraphs, with plain-text, HTML, and list copy formats, so I can drop placeholder content into mockups, CMS fields, and component stories.

**Frequently asked questions**

- **Q:** What is lorem ipsum?
  **A:** Lorem ipsum is scrambled Latin used as placeholder copy since the 1500s and throughout the desktop-publishing and web eras. Because the words carry no meaning, they let you judge layout, spacing, and typography without being distracted by real content — which is exactly why designers reach for it.
- **Q:** How is this different from lipsum.com?
  **A:** Same idea, but it's yours: it lives on your subdomain, runs entirely in the browser, and you can restyle the specimen, change the word pool, add output formats, or wire it into a design system without ads. The version FloopFloop ships sets the text like a real type specimen rather than dumping it in a textarea.
- **Q:** Can I generate a specific number of words or paragraphs?
  **A:** Yes — choose paragraphs, sentences, or an exact word count. There's also a toggle to begin with the familiar 'Lorem ipsum dolor sit amet…' opener, and a Regenerate button to get a fresh sample at the same settings.
- **Q:** Can I copy it as HTML?
  **A:** Yes. Pick the copy format — plain text, HTML (each block wrapped in a <p> tag), or a bulleted list — so it drops straight into markup, a CMS field, or a component story without reformatting.
- **Q:** Does anything get sent to a server?
  **A:** No. The text is generated in your browser and your settings are saved to localStorage only. The single outbound surface is the /api/health probe.

### Date & Age Calculator
URL: https://www.floopfloop.com/en/build/date-calculator

Build your Date & Age Calculator with AI in under 5 minutes

Build a date and age calculator that finds the time between two dates, your exact age, or adds and subtracts days, months, and years — with full year/month/day breakdowns. Everything runs in the browser.

**Example prompts**

- Build a date and age calculator with three modes. Difference: pick two dates and show the gap as years, months, and days plus total days, weeks, and months, with the weekday of each date. Age: enter a birthdate and show the exact age as of today, the day of the week they were born, and a countdown to their next birthday. Add/subtract: take a date and add or subtract years, months, and days to get a new date and its weekday. Handle leap years and month-ends correctly (Jan 31 + 1 month = Feb 28), compute everything at UTC midnight so daylight saving never shifts a day, and read 'today' on the client so the first render is hydration-safe. Show a big plain-language answer card; keep it 100% client-side.
- Create an age calculator like the ones that tell you 'you are 25 years, 11 months, and 21 days old.' Enter a date of birth, get the exact age plus total days lived and days until the next birthday. No sign-up, runs in the browser.
- Build a 'days between two dates' calculator: two date pickers and a clear result in days, weeks, and months, plus the calendar breakdown. Add a dark theme.
- Build a date math tool that adds or subtracts a number of days, weeks, months, or years from a starting date and tells me the resulting date and what day of the week it falls on — useful for deadlines and due dates.

**Frequently asked questions**

- **Q:** How is the age / difference calculated?
  **A:** The way you'd count by hand: whole years first, then whole months, then the leftover days. So from 2000-06-15 to 2026-06-05 is 25 years, 11 months, 21 days — not just a pile of days. It also reports the totals (total days, weeks, months) for when you need a single number.
- **Q:** Does it handle leap years and awkward month-ends?
  **A:** Yes — that's the part naive calculators get wrong. Leap days (Feb 29) are counted correctly, and month-end math is intuitive: adding one month to January 31 lands on the last day of February rather than spilling into March. A Feb-29 birthday's countdown rolls to Feb 28 in common years.
- **Q:** Why are the results sometimes off by a day in other tools?
  **A:** Usually a timezone bug: doing date math with local time means a daylight-saving change can nudge a result across midnight. This tool computes everything at UTC midnight, so the day count is stable no matter where you are or when DST flips.
- **Q:** What can I use it for?
  **A:** Working out your exact age or someone's age, counting down to a wedding, launch, or due date, finding how many days a project ran, or adding a notice period or deadline to a start date and seeing which weekday it falls on.
- **Q:** Is anything sent to a server?
  **A:** No. Every calculation runs in your browser and your inputs are saved to localStorage only. The single outbound surface is the /api/health probe.

### UUID Generator
URL: https://www.floopfloop.com/en/build/uuid-generator

Build your UUID Generator with AI in under 5 minutes

Build a UUID generator that creates v4 (random) and v7 (time-ordered) UUIDs in bulk, with uppercase / no-hyphen / braces formatting and one-click copy — plus an inspector that decodes any UUID. Everything runs in the browser.

**Example prompts**

- Build a UUID generator with two modes. Generate: choose v4 (random) or v7 (time-ordered), pick how many (1–100), toggle uppercase / hyphens / braces, and list the results as monospace rows with copy-per-row and copy-all and a regenerate button. Inspect: paste any UUID and show its version, variant, whether it's the nil or max UUID, and — for v7 — the embedded millisecond timestamp as a date. Generate with the browser's crypto API (crypto.randomUUID for v4; a 48-bit ms timestamp + random bytes for v7). Generate the first batch in an effect so the first render is hydration-safe, and remember the options in localStorage. 100% client-side.
- Create a UUID / GUID generator like the popular online ones. Bulk-generate version 4 UUIDs, copy them individually or all at once, and offer uppercase and no-hyphen variants. Keep it fast and fully in the browser.
- Build a developer tool that generates UUID v7 (the new time-sortable UUID that's great as a database primary key) as well as classic v4, and that can also decode a pasted UUID to tell me its version and, for v7, when it was created.
- Build a UUID generator with a clean technical look — a list of generated IDs, format options, and a one-click copy — plus a dark theme.

**Frequently asked questions**

- **Q:** What's the difference between UUID v4 and v7?
  **A:** v4 is 122 bits of randomness — the everyday choice when you just need a unique value. v7 puts a millisecond timestamp in the first 48 bits, so the IDs sort in roughly creation order. That makes v7 an excellent database primary key: it keeps B-tree indexes from fragmenting the way random v4 keys do, while staying globally unique.
- **Q:** How is this different from other UUID sites?
  **A:** It's yours: it lives on your subdomain, generates everything in the browser with the Web Crypto API (nothing is sent to a server), and you can add formats, versions, or a bulk-export your team needs without ads. It also inspects UUIDs, not just generates them.
- **Q:** Are the UUIDs cryptographically random?
  **A:** Yes — v4 uses the platform's crypto.randomUUID(), and v7's random bits come from crypto.getRandomValues(). Both draw on the browser's cryptographically secure random source, not Math.random().
- **Q:** Can it decode a UUID I already have?
  **A:** Yes — paste any UUID into the inspector and it reads back the version, the variant, whether it's the special nil (all-zero) or max (all-F) UUID, and for a v7 it decodes the embedded timestamp into a readable date.
- **Q:** Is anything stored or uploaded?
  **A:** No. Generation and inspection happen entirely in your browser and your format options are saved to localStorage only. The single outbound surface is the /api/health probe.

### Unix Epoch & Timestamp Converter
URL: https://www.floopfloop.com/en/build/epoch-converter

Build your Unix Epoch Converter with AI in under 5 minutes

Build a Unix epoch / timestamp converter that turns timestamps into human dates and back — seconds, milliseconds, microseconds, or nanoseconds — with the live current epoch, ISO-8601 UTC, local time, and a relative 'x ago'. Everything runs in the browser.

**Example prompts**

- Build a Unix epoch / timestamp converter. Show the live current Unix time at the top (updating every second) with a 'use now' button. Below it, one smart input that accepts a numeric epoch — auto-detecting seconds vs milliseconds vs microseconds vs nanoseconds from the magnitude, with a manual override — or a date string. From it, show the ISO-8601 UTC string, the local time, a relative 'x ago / in x', the day of the week, and the timestamp in every unit (s / ms / µs / ns) with one-click copy. Make it hydration-safe: render the deterministic ISO/unit values during SSR and gate the live clock, local time, and relative time on mount. Persist the input to localStorage. 100% client-side.
- Create a tool like epochconverter.com / unixtimestamp.com: paste a Unix timestamp and see the human date in UTC and my local timezone, or paste a date and get the epoch. Auto-detect seconds vs milliseconds. Keep it fully in the browser.
- Build a developer timestamp tool with a live epoch clock and a converter that handles seconds, milliseconds, and nanoseconds, shows ISO-8601, and copies any value. Add a dark console theme.
- Build an epoch-to-date converter that's fast and ad-free — one box, instant results in every unit and format, and a relative-time readout so I can sanity-check a timestamp from a log.

**Frequently asked questions**

- **Q:** What is a Unix timestamp?
  **A:** It's the number of time units since 00:00:00 UTC on 1 January 1970 — the 'Unix epoch' — not counting leap seconds. Because it's a single timezone-free number, it's the standard way logs, databases, and APIs record time.
- **Q:** Seconds or milliseconds — how does it know?
  **A:** By magnitude. A current timestamp is about 10 digits in seconds, 13 in milliseconds, 16 in microseconds, and 19 in nanoseconds, so the converter auto-detects the unit — and you can pin it manually if your value is from an unusual range.
- **Q:** How is this different from epochconverter.com?
  **A:** Same job, but it's yours: it lives on your subdomain, runs entirely in the browser, shows the value in every unit and format at once, and you can add your team's timezone, a custom format, or a batch mode without ads. The live clock and conversions never hit a server.
- **Q:** Does it show my local time as well as UTC?
  **A:** Yes — it shows the ISO-8601 UTC string, your browser's local time, the UTC day of the week, and a relative 'x ago / in x' so you can place a timestamp at a glance.
- **Q:** Is anything uploaded?
  **A:** No. Every conversion runs in your browser and your last input is saved to localStorage only. The single outbound surface is the /api/health probe.

### SHA Hash Generator
URL: https://www.floopfloop.com/en/build/hash-generator

Build your SHA Hash Generator with AI in under 5 minutes

Build a SHA hash generator that produces SHA-1, SHA-256, SHA-384, and SHA-512 digests of any text or file in the browser, with one-click copy and a verify field to check a file against an expected checksum. Nothing is uploaded.

**Example prompts**

- Build a SHA hash generator with two modes. Text: type or paste text and show its SHA-1, SHA-256, SHA-384, and SHA-512 digests live, each in a monospace row with a copy button and an uppercase toggle. File: drop a file and hash it locally to the same four algorithms (great for verifying a download). Add a verify field — paste an expected checksum and highlight the row whose digest matches. Compute everything with the Web Crypto API (crypto.subtle.digest); the file never leaves the browser. Compute digests in an effect so the first render is hydration-safe, and remember the text in localStorage. 100% client-side.
- Create a hash tool like the online SHA-256 generators: paste text, get the SHA-256 (and SHA-1 / 384 / 512) hash, copy it. Make it work on files too, and keep everything in the browser.
- Build a checksum verifier: drop a downloaded file, get its SHA-256, and paste the published checksum to confirm they match with a green tick. Add a dark theme.
- Build a developer hashing tool for SHA-1, SHA-256, SHA-384, and SHA-512 with copy buttons and an uppercase option, computed client-side with no uploads.

**Frequently asked questions**

- **Q:** Which hash algorithms does it support?
  **A:** SHA-1, SHA-256, SHA-384, and SHA-512 — the SHA family provided by the browser's Web Crypto API. MD5 is deliberately left out: it's cryptographically broken and isn't part of Web Crypto, so a tool that offered it would have to ship a hand-rolled implementation.
- **Q:** Can I hash a file, not just text?
  **A:** Yes — switch to File mode and drop a file in. It's read and hashed entirely in your browser, which is exactly what you want for verifying that a download wasn't corrupted or tampered with against a published checksum.
- **Q:** How do I verify a checksum?
  **A:** Paste the expected hash into the verify box. The row whose digest matches lights up green, so you can confirm a file or string at a glance — case-insensitively, so it doesn't matter whether the published value is upper or lower case.
- **Q:** Are my text and files uploaded anywhere?
  **A:** No. Every digest is computed with the browser's built-in crypto, so your text and files never leave the device. The single outbound surface is the /api/health probe.
- **Q:** Should I use this to store passwords?
  **A:** Not directly. A plain SHA digest is fine for integrity checks and content addressing, but passwords should be hashed with a slow, salted algorithm (bcrypt, scrypt, or Argon2) — ask FloopFloop to build that into your app's auth instead.

### Number Base Converter
URL: https://www.floopfloop.com/en/build/number-base-converter

Build your Number Base Converter with AI in under 5 minutes

Build a number base converter that translates between binary, octal, decimal, and hexadecimal — and any base from 2 to 36 — with linked fields that update as you type, a bit view, and exact big-integer math. Everything runs in the browser.

**Example prompts**

- Build a number base converter. Show linked fields for binary, octal, decimal, and hexadecimal (plus one custom base from 2 to 36) that stay in sync — type a value in any field and the others reformat instantly. Use BigInt for the math so values beyond 2^53 convert exactly with no float rounding, validate each field's digits against its base (highlight invalid input), and show a grouped bit view with the bit count. Add per-field copy. Keep it deterministic so the first render is hydration-safe, and remember the value in localStorage. 100% client-side.
- Create a binary/decimal/hex converter like rapidtables: enter a number in one base and see it in the others. Handle big numbers correctly and let me copy any value. Keep everything in the browser.
- Build a radix converter for developers — binary, octal, decimal, hex, and arbitrary bases up to 36 — with a bit-grouped view and a dark theme.
- Build a tool to convert between number bases (base 2 through 36) with live linked inputs and exact integer math, for reading hex dumps, bitmasks, and binary literals.

**Frequently asked questions**

- **Q:** Which bases does it support?
  **A:** Binary (2), octal (8), decimal (10), and hexadecimal (16) as dedicated fields, plus a custom field for any base from 2 to 36 (digits 0–9 then a–z). Type in any field and the rest update.
- **Q:** Does it handle very large numbers?
  **A:** Yes. All conversion goes through arbitrary-precision integers (BigInt), so values far beyond JavaScript's usual 2^53 safe-integer limit convert exactly — no silent rounding the way a naive parseInt-based tool would produce.
- **Q:** What's the bit view for?
  **A:** It shows the binary representation grouped into 4-bit nibbles with the total bit count — handy when you're working with bitmasks, flags, or checking how many bits a value needs.
- **Q:** How is this different from a unit converter?
  **A:** A unit converter changes physical units (kilometres to miles); a base converter changes how the same integer is written (255 = 0xFF = 0b11111111). The value never changes, only its representation.
- **Q:** Is anything sent to a server?
  **A:** No. Every conversion happens in your browser and your last value is saved to localStorage only. The single outbound surface is the /api/health probe.

### IP Subnet Calculator
URL: https://www.floopfloop.com/en/build/subnet-calculator

Build your IP Subnet Calculator with AI in under 5 minutes

Build an IPv4 subnet / CIDR calculator that turns an address and prefix into the network and broadcast address, subnet mask, wildcard mask, usable host range, host count, IP class, and public/private — all in the browser, with a live prefix slider.

**Example prompts**

- Build an IPv4 subnet calculator. Enter an address in CIDR notation (e.g. 192.168.1.0/24) and show the network address, broadcast address, subnet mask, wildcard mask, first and last usable host, the usable host count, the total addresses, the IP class, and whether it's private (RFC 1918) or public. Add a prefix slider (0–32) that updates everything live. Do the IPv4 math with plain numbers in the 0…2^32-1 range (not 32-bit bitwise ops, so /0 doesn't sign-overflow), and handle the /31 (RFC 3021, both addresses usable) and /32 (single host) special cases. Make each value copyable, keep it deterministic so the first render is hydration-safe, and remember the input in localStorage. 100% client-side.
- Create a CIDR calculator like the ones network engineers use: type 10.0.0.0/8 and see the mask, address range, and how many hosts it holds. Keep it in the browser.
- Build a subnet mask calculator with a slider for the prefix length so I can watch the host count and range change as I drag it. Add a dark console theme.
- Build a tool that takes an IP and CIDR prefix and breaks out the network, broadcast, netmask, wildcard, and usable range — handy for planning VLANs and firewall rules.

**Frequently asked questions**

- **Q:** What does it calculate from a CIDR like 192.168.1.0/24?
  **A:** The network address (192.168.1.0), the broadcast (192.168.1.255), the subnet mask (255.255.255.0), the wildcard mask (0.0.0.255), the first and last usable host (192.168.1.1–192.168.1.254), the usable host count (254), the total addresses (256), the IP class, and whether the block is private or public.
- **Q:** Why are there 254 usable hosts in a /24, not 256?
  **A:** A /24 holds 256 addresses, but the first is the network address and the last is the broadcast address, neither of which is assigned to a host — leaving 254 usable. The calculator handles the exceptions too: a /31 has 2 usable addresses for point-to-point links (RFC 3021), and a /32 is a single host.
- **Q:** What's the wildcard mask for?
  **A:** It's the inverse of the subnet mask (0.0.0.255 for a /24) and is what ACLs and routing protocols like OSPF use to match an address range — so it's handy to have alongside the netmask.
- **Q:** How is this different from a number base converter?
  **A:** A base converter changes how a single integer is written (hex vs binary). A subnet calculator works out network addressing — which block an IP belongs to, its range, and its mask — which is a different kind of math built on IPv4 addresses.
- **Q:** Is anything sent to a server?
  **A:** No. Every calculation runs in your browser and your last input is saved to localStorage only. The single outbound surface is the /api/health probe.

### Loan & Mortgage Calculator
URL: https://www.floopfloop.com/en/build/loan-calculator

Build your Loan & Mortgage Calculator with AI in under 5 minutes

Build a loan and mortgage calculator that finds the monthly payment, total interest, and full amortization schedule for any loan — adjust the amount, interest rate, and term with live sliders. Everything runs in the browser.

**Example prompts**

- Build a loan and mortgage calculator. Sliders and number fields for the loan amount, annual interest rate, and term in years. Show the monthly payment as the headline figure, plus total interest, total paid, and the principal — with a bar that splits principal vs interest. Below that, a full month-by-month amortization schedule (payment, principal, interest, remaining balance) in a scrollable table. Use the standard amortization formula, handle the 0%-interest case, and true up the final payment so the balance ends exactly at zero. Format money with a fixed locale so it's deterministic and hydration-safe, and remember the inputs in localStorage. 100% client-side.
- Create a mortgage calculator like the ones on bank sites: enter the loan amount, rate, and years, and see the monthly payment and how much interest you'll pay over the life of the loan. Keep it in the browser.
- Build a car-loan / personal-loan calculator with a monthly payment figure and an amortization table, and a dark theme.
- Build a loan calculator with sliders so I can drag the amount and rate and watch the monthly payment and total interest update instantly.

**Frequently asked questions**

- **Q:** How is the monthly payment calculated?
  **A:** With the standard amortization formula: the payment is the amount that pays off the principal plus interest in equal instalments over the term. At a 0% rate it's simply the principal divided by the number of months. The calculator also builds the full schedule, trueing up the last payment so the balance lands exactly on zero.
- **Q:** What's an amortization schedule?
  **A:** A month-by-month breakdown of each payment into interest and principal, plus the remaining balance. Early payments are mostly interest (on the large balance); later ones are mostly principal. Seeing it laid out is why people are often surprised how much total interest a long mortgage costs.
- **Q:** Does it work for any loan, not just mortgages?
  **A:** Yes — the same math applies to car loans, personal loans, and student loans. Set the amount, rate, and term to match and you get the payment and schedule for any fixed-rate amortizing loan.
- **Q:** Does it include taxes, insurance, and fees?
  **A:** By default it calculates principal and interest only — the core of the payment. Property tax, insurance, PMI, and fees vary a lot, so they're left out for clarity; ask FloopFloop to add the fields you need and they're one refinement away.
- **Q:** Is anything sent to a server?
  **A:** No. Every calculation runs in your browser and your last inputs are saved to localStorage only. The single outbound surface is the /api/health probe.

### Aspect Ratio Calculator
URL: https://www.floopfloop.com/en/build/aspect-ratio-calculator

Build your Aspect Ratio Calculator with AI in under 5 minutes

Build an aspect ratio calculator that finds the ratio of any width and height, resizes dimensions while keeping the ratio, and previews the shape — with presets like 16:9 and 4:3. Everything runs in the browser.

**Example prompts**

- Build an aspect ratio calculator. Width and height number fields with a lock toggle: when locked, changing one dimension fills in the other to keep the same ratio (proportional resize). Show the simplified ratio (reduce with the GCD so 1920×1080 reads as 16:9), the decimal ratio, and the pixel size. Render a live preview frame in the current ratio using the CSS aspect-ratio property. Add preset chips (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 2:1, 5:4) that set the ratio and highlight when the current one matches. Keep it deterministic so the first render is hydration-safe, and remember the size in localStorage. 100% client-side.
- Create an aspect ratio tool: type a width and height and get the ratio like 16:9, and let me lock the ratio so resizing one side updates the other. Keep it in the browser.
- Build a tool for resizing images and video frames that keeps the aspect ratio — enter the original size and a new width, get the matching height. Add a dark theme and a live preview.
- Build an aspect ratio calculator with common presets for video and social (16:9, 9:16, 1:1) and a visual preview of the frame.

**Frequently asked questions**

- **Q:** How does it work out the ratio?
  **A:** It reduces the width and height by their greatest common divisor, so 1920×1080 and 1280×720 both come out as 16:9. It also shows the decimal ratio (16:9 ≈ 1.78) for when you need a single number.
- **Q:** What does locking the ratio do?
  **A:** With the ratio locked, changing one dimension automatically fills in the other so the proportions stay identical — exactly what you want when resizing an image or video frame without stretching it. Unlock it to edit width and height freely.
- **Q:** Why does a 21:9 monitor show as 64:27?
  **A:** Because 21:9 is a marketing label that isn't fully reduced. The true ratio of a 2560×1080 ultrawide is 64:27 — the calculator shows the exact reduced ratio while still offering 21:9 as a preset, so you get both the convention and the maths.
- **Q:** Can I resize to a specific width or height?
  **A:** Yes — lock the ratio, then type the dimension you know (say a new width) and the calculator computes the matching height that preserves the shape. It works the same way in either direction.
- **Q:** Is anything uploaded?
  **A:** No. Every calculation runs in your browser and your last size is saved to localStorage only. The single outbound surface is the /api/health probe.

### Percentage Calculator
URL: https://www.floopfloop.com/en/build/percentage-calculator

Build your Percentage Calculator with AI in under 5 minutes

Build a percentage calculator that answers the everyday questions in plain language — what is X% of Y, X is what percent of Y, percentage change, and increase or decrease by a percent — all in the browser.

**Example prompts**

- Build a percentage calculator with plain-language cards. Card 1: 'What is P% of N?' Card 2: 'X is what percent of Y?' Card 3: 'Percentage change from A to B?' with an up/down arrow and colour. Card 4: a value increased and decreased by P%, showing both. Inline number inputs inside the sentences, results that update live, and a copy button on each. Guard against dividing by zero (show a dash). Keep it deterministic so the first render is hydration-safe, and remember every input in localStorage. 100% client-side.
- Create a percentage calculator like the popular ones: type two numbers and get the percent. Cover 'what is X% of Y', 'X is what % of Y', and percentage increase/decrease. Keep it in the browser.
- Build a friendly percent calculator for everyday maths — discounts, tips, grade percentages, percentage change — with a clean card layout and a dark theme.
- Build a tool to work out percentage change between two numbers, showing whether it went up or down and by how much.

**Frequently asked questions**

- **Q:** What can it calculate?
  **A:** The four everyday percentage questions: what is X% of a number, what percent one number is of another, the percentage change from one value to another (up or down), and a value increased or decreased by a percent. Each is its own little calculator that updates as you type.
- **Q:** How do I work out a percentage of a number?
  **A:** Multiply the number by the percent and divide by 100 — so 15% of 200 is 200 × 15 ÷ 100 = 30. The first card does exactly this; just fill in the two blanks.
- **Q:** What's the difference between percentage change and percentage points?
  **A:** Percentage change is relative to the starting value — going from 50 to 75 is a 50% increase. Percentage points are an absolute difference between two percentages (e.g. 20% to 25% is 5 points). This calculator does percentage change; ask FloopFloop if you also want a points mode.
- **Q:** What happens if I divide by zero?
  **A:** Questions like 'X is what percent of 0' have no answer, so the calculator shows a dash instead of a misleading number — it never returns Infinity or NaN.
- **Q:** Is anything sent to a server?
  **A:** No. Every calculation runs in your browser and your last numbers are saved to localStorage only. The single outbound surface is the /api/health probe.

### Color Converter
URL: https://www.floopfloop.com/en/build/color-converter

Build your Color Converter with AI in under 5 minutes

Build a color converter that turns any color between HEX, RGB, HSL, HSV, and CMYK. Pick or paste a color and copy it in any format, with a live swatch and a tints-and-shades strip — all in the browser.

**Example prompts**

- Build a color converter. A native color picker plus a text field that accepts hex, rgb(), or hsl(). Show the colour in HEX, RGB, HSL, HSV, and CMYK, each in a row with a copy button, and a large swatch preview with readable overlay text. Add a clickable tints-and-shades strip generated by varying the lightness. Do all the maths in the browser (hex↔rgb↔hsl↔hsv↔cmyk), keep it deterministic so the first render is hydration-safe, and remember the colour in localStorage. 100% client-side.
- Create a hex to rgb converter that also shows HSL and CMYK, with a color picker and copy buttons. Keep it in the browser.
- Build a tool to convert a colour between every common format — HEX, RGB, HSL, HSV, CMYK — and show a strip of lighter and darker shades. Add a dark theme.
- Build a color code converter for designers: paste any format, get all the others, and grab nearby tints and shades.

**Frequently asked questions**

- **Q:** Which formats does it convert between?
  **A:** HEX, RGB, HSL, HSV, and CMYK. Pick or paste a colour in hex, rgb(), or hsl() and it shows all five at once, each with a copy button.
- **Q:** How is this different from a palette generator?
  **A:** A palette generator builds a set of harmonious colours from a starting one. A converter takes a single colour and expresses it in every format — what you want when you have a hex code and need the RGB or HSL, or vice versa. (FloopFloop has a separate palette generator and a WCAG contrast checker if you need those.)
- **Q:** What are HSL and HSV good for?
  **A:** They describe a colour by hue, saturation, and lightness/value, which makes it intuitive to nudge a colour lighter, darker, or more muted — much easier than editing raw hex. The tints-and-shades strip uses exactly this to give you nearby variants.
- **Q:** Can I paste an rgb() or hsl() string?
  **A:** Yes — the input accepts hex (with or without #, 3- or 6-digit), rgb()/rgba(), and hsl()/hsla(), and normalises whatever you paste into all the other formats.
- **Q:** Is anything uploaded?
  **A:** No. Every conversion runs in your browser and your last colour is saved to localStorage only. The single outbound surface is the /api/health probe.

### Morse Code Translator
URL: https://www.floopfloop.com/en/build/morse-code-translator

Build your Morse Code Translator with AI in under 5 minutes

Build a Morse code translator that converts text to Morse and back, plays the message as audio beeps, and blinks a signal lamp in time — international (ITU) Morse, all in the browser.

**Example prompts**

- Build a Morse code translator with two linked panes: type text to get Morse, or paste Morse to decode it, updating live in both directions. Use the international (ITU) alphabet (A–Z, 0–9, punctuation), separate letters with a space and words with a slash. Add a Play button that beeps the message through the Web Audio API at real Morse timing (a dash is three dots, letter gaps three, word gaps seven) while a signal lamp blinks in sync. Create the AudioContext on click so the first render is hydration-safe, and remember the message in localStorage. 100% client-side.
- Create a text to Morse code converter that also decodes Morse back to text, with copy buttons. Keep it in the browser.
- Build a Morse code tool that plays the dots and dashes out loud and flashes a light, with a vintage telegraph look and a dark theme.
- Build a translator for Morse code that handles letters, numbers, and punctuation, and lets me hear the message.

**Frequently asked questions**

- **Q:** Does it translate both ways?
  **A:** Yes — type plain text to get Morse, or paste Morse (dots, dashes, spaces between letters and a slash between words) to decode it back to text. Both panes update live as you edit either one.
- **Q:** Can I hear the Morse?
  **A:** Yes. Press play and the message is beeped through the Web Audio API at proper Morse timing — a dash lasts three times a dot, with the standard gaps between letters and words — while a lamp blinks in time so you can read it visually too.
- **Q:** Which characters are supported?
  **A:** The full international (ITU) set: A–Z, the digits 0–9, and common punctuation (period, comma, question mark, slash, and more). Letters are case-insensitive, and any character without a Morse code is simply skipped.
- **Q:** How are letters and words separated?
  **A:** Within a word, letters are separated by a single space; words are separated by a forward slash ( / ). That's the convention the decoder expects, and the encoder produces.
- **Q:** Is anything uploaded?
  **A:** No. Translation and audio all happen in your browser, and your last message is saved to localStorage only. The single outbound surface is the /api/health probe.

### BMI Calculator
URL: https://www.floopfloop.com/en/build/bmi-calculator

Build your BMI Calculator with AI in under 5 minutes

Build a BMI calculator that works out your Body Mass Index in metric or imperial, shows your WHO category on a colour-coded gauge, and gives your healthy weight range — all in the browser.

**Example prompts**

- Build a BMI calculator with a metric/imperial toggle. Metric takes weight in kg and height in cm; imperial takes weight in pounds and height in feet + inches. Show the BMI to one decimal, the WHO category (underweight / normal / overweight / obese) as a coloured pill, and a colour-coded gauge (blue→green→yellow→red on a 15–40 scale) with a pointer at the result. Also show the healthy weight range for the height. Compute everything in the browser, keep it deterministic so the first render is hydration-safe, and remember the inputs in localStorage. 100% client-side.
- Create a BMI calculator like the health-site ones: enter weight and height, get the number and whether it's in the healthy range. Support metric and imperial. Keep it in the browser.
- Build a body mass index tool with a visual gauge showing where I fall, and a dark theme.
- Build a BMI calculator that also tells me the weight range that would put me in the normal BMI band for my height.

**Frequently asked questions**

- **Q:** How is BMI calculated?
  **A:** BMI is your weight divided by the square of your height. In metric that's kilograms ÷ (metres)²; in imperial it's 703 × pounds ÷ (inches)². The calculator does both — just flip the unit toggle.
- **Q:** What are the BMI categories?
  **A:** The World Health Organization bands for adults are: under 18.5 underweight, 18.5–25 normal, 25–30 overweight, and 30 or above obese. The gauge colours and the category pill follow exactly these cut-offs.
- **Q:** What's the healthy weight range it shows?
  **A:** It's the weight band that would put your BMI between 18.5 and 25 for your current height — handy as a target. It's computed by inverting the BMI formula at those two boundaries.
- **Q:** Is BMI accurate for everyone?
  **A:** No — it's a quick screen, not a diagnosis. BMI doesn't distinguish muscle from fat or account for age, sex, or build, so very muscular people can read as 'overweight' while perfectly healthy. Use it as a rough guide and talk to a clinician for anything that matters.
- **Q:** Is my data uploaded?
  **A:** No. Every calculation runs in your browser and your last inputs are saved to localStorage only. The single outbound surface is the /api/health probe.

### Roman Numeral Converter
URL: https://www.floopfloop.com/en/build/roman-numeral-converter

Build your Roman Numeral Converter with AI in under 5 minutes

Build a Roman numeral converter that turns numbers into Roman numerals and back — type a number (1–3999) to get the numeral or a numeral to get the number, with strict canonical validation and a symbol chart. Runs in the browser.

**Example prompts**

- Build a Roman numeral converter with a single smart input that auto-detects direction: type a number (1–3999) to get its Roman numeral, or type a numeral to get the number. Use proper subtractive notation (4 = IV, 9 = IX, 40 = XL, 90 = XC, 400 = CD, 900 = CM), and validate strictly so non-canonical forms like IIII or VV are rejected. Render the result large in a serif like a carved inscription, with a copy button, and show a chart of the seven symbols (I V X L C D M) below. Keep it deterministic so the first render is hydration-safe, and remember the input in localStorage. 100% client-side.
- Create a tool to convert numbers to Roman numerals and Roman numerals to numbers, with a reference chart. Keep it in the browser.
- Build a Roman numeral converter for dates and tattoos — type a year and get the numeral — with a clean classical look and a dark theme.
- Build a number-to-Roman-numeral converter that also decodes numerals back to numbers and rejects invalid ones.

**Frequently asked questions**

- **Q:** What range does it cover?
  **A:** The standard 1 to 3999. There's no single Roman letter larger than M (1000), so 3999 (MMMCMXCIX) is the largest value writable with the classic symbols and subtractive notation.
- **Q:** What is subtractive notation?
  **A:** Putting a smaller symbol before a larger one to mean 'subtract' — so 4 is IV (one less than five) rather than IIII, and 9 is IX. The six subtractive pairs are IV, IX, XL, XC, CD, and CM. The converter produces and requires this canonical form.
- **Q:** Does it reject invalid numerals?
  **A:** Yes — it only accepts the canonical spelling. IIII, VV, and IC are rejected because the correct forms are IV, X, and XCIX. Decoding round-trips through the encoder, so anything that wouldn't be produced is refused.
- **Q:** How do I write a year as a Roman numeral?
  **A:** Just type the year — 2024 becomes MMXXIV, 1994 becomes MCMXCIV. It's handy for dates on buildings, film credits, clock faces, and tattoos.
- **Q:** Is anything uploaded?
  **A:** No. Every conversion runs in your browser and your last input is saved to localStorage only. The single outbound surface is the /api/health probe.

### Caesar Cipher & ROT13
URL: https://www.floopfloop.com/en/build/caesar-cipher

Build your Caesar Cipher tool with AI in under 5 minutes

Build a Caesar cipher tool that encodes and decodes text by shifting the alphabet, applies ROT13, and brute-forces all 25 shifts to crack an unknown one — with a live substitution strip. Runs in the browser.

**Example prompts**

- Build a Caesar cipher encoder/decoder. An encode/decode toggle, a shift slider from 0 to 25, and a ROT13 shortcut. Shift A–Z and a–z (wrapping around the alphabet) and leave digits, spaces, and punctuation untouched, preserving case. Show a live substitution strip — the plain alphabet over the shifted one — and a brute-force panel that lists all 25 possible decodings so an unknown shift can be cracked by eye; clicking a row applies that shift. Keep it deterministic so the first render is hydration-safe, and remember the message in localStorage. 100% client-side.
- Create a ROT13 and Caesar cipher tool that encodes and decodes text, with a brute-force option to try every shift. Keep it in the browser.
- Build a secret-message cipher for a puzzle: type text, pick a shift, get the coded version, and a way to crack codes you receive. Add a spy-dossier look and a dark theme.
- Build a shift cipher tool that shows the alphabet mapping and lets me slide the shift to watch the text change.

**Frequently asked questions**

- **Q:** What's the difference between Caesar cipher and ROT13?
  **A:** ROT13 is just a Caesar cipher with a shift of 13. Because 13 is half of 26, applying ROT13 twice returns the original text, which makes it handy for hiding spoilers. The Caesar cipher lets you pick any shift from 1 to 25.
- **Q:** How do I decode a message if I don't know the shift?
  **A:** Use the brute-force panel. With only 25 possible shifts, it shows every decoding at once — you just scan for the one that reads as English and click it to lock that shift in.
- **Q:** What happens to numbers and punctuation?
  **A:** They're left exactly as they are. Only the 26 letters shift (wrapping from Z back to A), and the original upper/lower case is preserved, so spacing and symbols still line up in the output.
- **Q:** Is the Caesar cipher secure?
  **A:** No — with just 25 shifts it's trivially broken (this very tool does it in one click), so it's for puzzles, games, and learning how ciphers work, not for protecting real secrets. For that, ask FloopFloop to build proper encryption.
- **Q:** Is anything uploaded?
  **A:** No. All the cipher logic runs in your browser and your last message is saved to localStorage only. The single outbound surface is the /api/health probe.

### Number to Words Converter
URL: https://www.floopfloop.com/en/build/number-to-words

Build your Number to Words Converter with AI in under 5 minutes

Build a number-to-words converter that spells any number in plain English and writes amounts the way you would on a check (one thousand two hundred thirty-four and 50/100). Runs in the browser.

**Example prompts**

- Build a number-to-words converter with two modes. Number mode spells a whole number in English (with a capitalise toggle) — handle hyphenation like twenty-one, scale groups (thousand, million, billion, trillion), and skip all-zero groups so 1,000,001 reads as 'one million one'. Check mode writes an amount the way you would on a cheque: 'One thousand two hundred thirty-four and 50/100 DOLLARS', handling the cents rounding carry, plus the spoken 'dollars and cents' form. Do it all in the browser, keep it deterministic so the first render is hydration-safe, and remember the input in localStorage. 100% client-side.
- Create a tool that spells out numbers in words — type 1234 and get 'one thousand two hundred thirty-four'. Add a mode for writing check amounts. Keep it in the browser.
- Build an 'amount in words' converter for invoices and checks, with a bank-cheque look and a dark theme.
- Build a number speller that handles big numbers up to the trillions and writes currency amounts as words.

**Frequently asked questions**

- **Q:** How big a number can it spell?
  **A:** Up to the quadrillions — anything within the safe integer range. Numbers are read in groups of three digits, each followed by its scale (thousand, million, billion, trillion), so even very large values come out correctly.
- **Q:** How does it write a check amount?
  **A:** In the standard form: the dollars spelled out, then the cents as a fraction over 100 — 'One thousand two hundred thirty-four and 50/100', followed by DOLLARS. That's exactly what you write on the amount line of a cheque, and it's handled in Check mode.
- **Q:** Does it hyphenate and handle zeros correctly?
  **A:** Yes — two-digit numbers from 21 to 99 are hyphenated (twenty-one), and groups that are all zeros are skipped, so 1,000,001 is 'one million one', not 'one million zero thousand one'.
- **Q:** What about cents that round up?
  **A:** It handles the carry. An amount like 0.999 rounds to 'one dollar and zero cents' rather than producing an impossible 100 cents — the extra cent rolls into the dollars.
- **Q:** Is anything uploaded?
  **A:** No. Every conversion runs in your browser and your last input is saved to localStorage only. The single outbound surface is the /api/health probe.

### GPA Calculator
URL: https://www.floopfloop.com/en/build/gpa-calculator

Build your GPA Calculator with AI in under 5 minutes

Build a GPA calculator on the 4.0 scale: add your courses with their letter grade and credit hours to get a credit-weighted grade point average, total credits, and an honours band. Runs in the browser.

**Example prompts**

- Build a GPA calculator on the 4.0 scale. An editable table of courses, each with an optional name, a letter-grade dropdown (A+ down to F, where A is 4.0, A- is 3.7, B+ is 3.3, and so on), and credit hours; add and remove rows. Compute the credit-weighted GPA — multiply each course's grade points by its credits, sum, and divide by the total credits — and show the GPA, total credits, and an honours band. Skip rows with an unknown grade or zero credits. Keep it deterministic so the first render is hydration-safe, and remember the courses in localStorage. 100% client-side.
- Create a college GPA calculator: I enter my grades and credit hours and it tells me my GPA. Use the 4.0 scale with pluses and minuses. Keep it in the browser.
- Build a GPA calculator with a transcript look and a dark theme, showing my grade point average and total credits.
- Build a tool to work out my semester GPA from a list of courses, grades, and credits.

**Frequently asked questions**

- **Q:** How is GPA calculated?
  **A:** It's a credit-weighted average. Each letter grade is worth a number of grade points (A = 4.0, B = 3.0, etc.); multiply each course's points by its credit hours, add those up, and divide by the total credit hours. So a 4-credit course counts twice as much as a 2-credit one.
- **Q:** What grade scale does it use?
  **A:** The common unweighted 4.0 scale with pluses and minuses — A and A+ are 4.0, A- is 3.7, B+ is 3.3, B is 3.0, down to F at 0.0. Some schools count A+ as 4.3 or weight honours classes; this is the standard estimate, which you can ask FloopFloop to adjust.
- **Q:** What's the difference between weighted and unweighted GPA?
  **A:** Unweighted GPA caps every course at 4.0 regardless of difficulty. Weighted GPA gives honours or AP classes a higher ceiling (often 5.0). This calculator does the standard unweighted, credit-weighted average.
- **Q:** What if I leave a row blank or with no credits?
  **A:** Rows with an unknown grade or zero credit hours are simply skipped, so a half-filled row won't throw your GPA off — only complete courses count toward the average.
- **Q:** Is anything uploaded?
  **A:** No. Every calculation runs in your browser and your courses are saved to localStorage only. The single outbound surface is the /api/health probe.

### Markdown Table Generator
URL: https://www.floopfloop.com/en/build/markdown-table-generator

Build your Markdown Table Generator with AI in under 5 minutes

Build a Markdown table generator: fill in a spreadsheet-style grid, set each column's alignment, add or remove rows and columns, and copy clean GitHub-flavoured Markdown. Runs in the browser.

**Example prompts**

- Build a Markdown table generator with a spreadsheet-style grid editor. Let me edit any cell, cycle each column's alignment (left / centre / right), and add or remove rows and columns. Generate GitHub-flavoured Markdown below — a header row, an alignment separator row using :-- / :-: / --:, and the body — escaping any pipe characters in the text. Add a toggle to pad the cells so the raw source lines up, and a copy button. Keep it deterministic so the first render is hydration-safe, and remember the grid in localStorage. 100% client-side.
- Create a tool to make Markdown tables without counting pipes by hand: type into a grid and get the Markdown. Support column alignment. Keep it in the browser.
- Build a Markdown table builder with a grid editor and a dark theme, outputting GitHub-flavoured Markdown I can paste into a README.
- Build a generator that turns a grid of data into a properly aligned Markdown table with per-column alignment.

**Frequently asked questions**

- **Q:** What is a Markdown table?
  **A:** It's a table written in plain text with pipes (|) separating cells and a row of dashes marking the header. GitHub, GitLab, Obsidian, Notion, and most static-site generators render it as a real table. The fiddly part is getting the pipes and the alignment row right by hand — this builds it for you.
- **Q:** How do I set column alignment?
  **A:** Click the alignment icon at the top of each column to cycle left, centre, or right. That sets the markers in the separator row — :-- for left, :-: for centre, and --: for right — which is what controls how the rendered table aligns each column.
- **Q:** What does the 'align source' option do?
  **A:** It pads every cell with spaces so the raw Markdown lines up into neat columns in your editor. It renders identically either way; padded source is just easier to read and edit by hand. Turn it off for the most compact output.
- **Q:** What if my text contains a pipe character?
  **A:** It's escaped automatically (as \|) so it doesn't break the table, and line breaks inside a cell become <br>. You can paste freely without worrying about the syntax.
- **Q:** Is anything uploaded?
  **A:** No. The table is built entirely in your browser and your grid is saved to localStorage only. The single outbound surface is the /api/health probe.

### CSV to JSON Converter
URL: https://www.floopfloop.com/en/build/csv-json-converter

Build your CSV ⇄ JSON Converter with AI in under 5 minutes

Build a CSV to JSON converter (and JSON to CSV) that handles quoted fields, headers, type coercion, and custom delimiters — entirely in the browser, so your data never leaves the page.

**Example prompts**

- Build a bidirectional CSV ⇄ JSON converter with two panes. CSV → JSON parses CSV following RFC 4180 (quoted fields can contain commas, newlines, and "" escaped quotes), uses the first row as the object keys when 'header' is on, and optionally coerces numbers and booleans (but leaves zero-padded ids as strings). JSON → CSV turns an array of objects into CSV, using the union of all keys as the header and quoting any field that contains the delimiter, a quote, or a newline. Add a delimiter selector (comma / tab / semicolon / pipe), a pretty-JSON toggle, a swap button that round-trips the output back in, and copy. Show an inline error for invalid JSON. Keep it deterministic so the first render is hydration-safe, and remember the input in localStorage. 100% client-side.
- Create a CSV to JSON converter: paste CSV, get JSON. Handle quoted values with commas in them, and let me pick whether the first row is a header. Keep it in the browser.
- Build a tool to convert JSON to CSV and CSV to JSON, with a dark theme, for cleaning up API and spreadsheet data.
- Build a CSV parser that outputs JSON, coercing numbers and booleans, with a custom delimiter option for TSV files.

**Frequently asked questions**

- **Q:** Does it handle commas inside a field?
  **A:** Yes. It follows the RFC 4180 rules, so a field wrapped in quotes can contain commas, line breaks, and escaped quotes ("") without breaking the parse — exactly where a naive split-on-comma would go wrong.
- **Q:** Can it convert JSON back to CSV?
  **A:** Yes — it's bidirectional. JSON → CSV takes an array of objects, builds the header from the union of all keys, and quotes any value that needs it. The swap button flips the direction and feeds the output back in, so you can round-trip and check.
- **Q:** What is type coercion?
  **A:** CSV values are all text, but JSON has real types. With coercion on, '42' becomes the number 42 and 'true' becomes the boolean true, while things that look like ids — '0042', leading-zero values — stay strings so you don't lose data. Turn it off to keep everything as strings.
- **Q:** Does it work with tab-separated (TSV) files?
  **A:** Yes — pick Tab from the delimiter selector and it parses TSV the same way, or any other delimiter (semicolon, pipe) your data uses.
- **Q:** Is my data uploaded?
  **A:** No. All parsing and conversion happens in your browser and your input is saved to localStorage only — nothing is sent to a server, which matters when the data is sensitive. The single outbound surface is the /api/health probe.

### URL Parser
URL: https://www.floopfloop.com/en/build/url-parser

Build your URL Parser with AI in under 5 minutes

Build a URL parser that breaks a URL into its parts — scheme, host, port, path, query parameters, and hash — lets you edit any piece (including the query string), and rebuilds it. Runs in the browser.

**Example prompts**

- Build a URL parser and editor. Paste a URL and break it into colour-coded, editable parts: scheme, host, port, path, and hash, plus the query string as a key/value table where I can add, edit, and remove parameters. Use the browser's URL and URLSearchParams APIs so parsing matches the platform; percent-decode query values for editing and re-encode them when rebuilding. Editing any part should update the URL field live, and editing the URL should re-parse the parts. Assume https:// for a bare host. Keep it deterministic so the first render is hydration-safe, and remember the input in localStorage. 100% client-side.
- Create a tool that parses a URL into its components and shows the query parameters as a table I can edit. Keep it in the browser.
- Build a query-string editor: paste a URL, tweak the parameters, and copy the new URL. Add a dark theme.
- Build a URL inspector that decodes the query string and lets me rebuild the URL after changing parameters.

**Frequently asked questions**

- **Q:** What parts of a URL does it show?
  **A:** The scheme (https:), host and optional port, path, the query string as individual key/value parameters, and the hash. Each is shown separately and is editable, so you can see and change exactly the piece you care about.
- **Q:** Can I edit the query parameters?
  **A:** Yes — they're laid out as a key/value table where you can edit, add, or remove parameters. Values are percent-decoded so they're readable while you edit, and re-encoded automatically when the URL is rebuilt, so you won't accidentally break the encoding.
- **Q:** How does it handle percent-encoding?
  **A:** A query value like 'hello world' is stored in a URL as 'hello%20world', and an ampersand as '%26'. The parser decodes these for display and editing, then re-encodes when it reassembles the URL — so a space stays a space while you work and becomes a valid escape in the output.
- **Q:** Does it work with a URL that has no scheme?
  **A:** Yes — if you paste a bare host like 'example.com/path', it assumes https:// so it can still parse. A malformed URL (or a scheme with no host) is flagged rather than mangled.
- **Q:** Is anything uploaded?
  **A:** No. Parsing uses the browser's own URL engine and runs entirely on your device; your input is saved to localStorage only. The single outbound surface is the /api/health probe.

### Running Pace Calculator
URL: https://www.floopfloop.com/en/build/pace-calculator

Build your Running Pace Calculator with AI in under 5 minutes

Build a running pace calculator: give any two of distance, time, and pace and get the third, in min/km or min/mile, with predicted 5K, 10K, half, and marathon finish times. Runs in the browser.

**Example prompts**

- Build a running pace calculator. A 'solve for' switch (pace / time / distance): the user fills the other two fields and the chosen one is calculated, related by time = pace × distance. Support both min/km and min/mile with a unit toggle that converts distance and pace. Parse times as mm:ss or h:mm:ss and paces as m:ss, and validate (seconds under 60). Show a board of predicted finish times for 5K, 10K, half marathon (21.0975 km), and marathon (42.195 km) at the current pace. Keep it deterministic so the first render is hydration-safe, and remember the inputs in localStorage. 100% client-side.
- Create a pace calculator for runners: enter a distance and time, get my pace per km and per mile, and my predicted race times. Keep it in the browser.
- Build a tool that tells me my marathon finish time if I hold a given pace, with a track-style look and a dark theme.
- Build a running calculator where I can solve for pace, time, or distance, switching between kilometres and miles.

**Frequently asked questions**

- **Q:** How do I calculate running pace?
  **A:** Pace is your time divided by the distance — run 10 km in 50:00 and your pace is 5:00 per kilometre. The three quantities (distance, time, pace) are linked by time = pace × distance, so the calculator works out whichever one you leave blank from the other two.
- **Q:** Can it switch between km and miles?
  **A:** Yes — a unit toggle converts both the distance and the pace, so you can read your pace as min/km or min/mile and enter distances in whichever you train in.
- **Q:** What race times does it predict?
  **A:** It shows your projected finish for the 5K, 10K, half marathon (21.0975 km), and marathon (42.195 km) at the pace you're holding — handy for setting a goal or pacing a long run. (These are simple constant-pace estimates, not fade-adjusted models.)
- **Q:** What time formats does it accept?
  **A:** Times can be mm:ss (like 50:00) or h:mm:ss (like 1:45:30), and paces are m:ss. It validates the input — minutes and seconds have to be under 60 — so a typo is flagged rather than silently miscalculated.
- **Q:** Is anything uploaded?
  **A:** No. Every calculation runs in your browser and your last inputs are saved to localStorage only. The single outbound surface is the /api/health probe.

## Compare

### FloopFloop vs Base44
URL: https://www.floopfloop.com/en/compare/base44

**AI app builder platform**

Base44 builds apps from prompts with database support. It provides quick prototyping but has more limited customization and deployment options.

### FloopFloop vs Bolt
URL: https://www.floopfloop.com/en/compare/bolt

**Prompt-to-app platform**

Bolt lets you build web apps from prompts with in-browser code editing. It provides instant previews but deployment and hosting require additional steps.

### FloopFloop vs Cursor
URL: https://www.floopfloop.com/en/compare/cursor

**AI-powered code editor**

Cursor is an AI-enhanced code editor that helps developers write code faster. It is powerful for experienced developers but requires coding knowledge and manual deployment.

### FloopFloop vs Lovable
URL: https://www.floopfloop.com/en/compare/lovable

**AI app builder**

Lovable generates full-stack apps from prompts with AI. It offers a visual editor and deployment, but requires more manual setup for hosting and access control.

### FloopFloop vs Replit
URL: https://www.floopfloop.com/en/compare/replit

**Browser IDE with AI**

Replit is an online IDE with AI coding assistance and built-in deployment. It is versatile but more developer-oriented with a steeper learning curve for non-coders.

### FloopFloop vs V0
URL: https://www.floopfloop.com/en/compare/v0

**AI UI generator by Vercel**

V0 generates UI components from text descriptions. It excels at creating individual components but does not provide full app deployment or backend capabilities.

## Showcase

URL: https://www.floopfloop.com/en/library

Public Library — a community gallery of FloopFloop projects that users have chosen to share. Every listing is a real, live site built and deployed by another user from a single prompt. Filterable by category: sites, apps, bots, APIs, internal tools, and games. Each entry shows the original prompt, the live URL, screenshots, and a clone button — any signed-in user can fork a listed project as their own starting point.

## Blog

Blog index: https://www.floopfloop.com/en/blog
RSS feed: https://www.floopfloop.com/en/feed.xml

### How to Monetize a Web App You Built Without Code
URL: https://www.floopfloop.com/en/blog/how-to-monetize-web-app-no-code
Published: 2026-07-09
Tags: monetize-web-app, no-code, saas-pricing, freemium, ai-app-builder, checkout-and-billing

Learn how to monetize a web app from first visitor to paying customer — covering pricing models, checkout flows, email conversion, and AI-powered upsells for no-code founders.

You built a working web [app without writing](/en/blog/votestay-floopfloop-no-code-case-study) a single line of code. Now the question keeping you up at night is: *how do I actually make money from this?* This guide walks you through every step of learning how to monetize a web app — from choosing the right pricing model to activating checkout, running email campaigns, and adding AI-powered premium features that justify a higher price.

## What Are the Most Effective Ways to Monetize a Web App?

The most effective ways to monetize a web app are **subscriptions, one-time payments, freemium upgrades, usage-based billing, and advertising**. Subscriptions generate predictable monthly recurring revenue (MRR) and suit tools users open daily. One-time payments work for utilities with clear standalone value. Freemium builds an audience fast, then converts a slice of free users to paid. Usage-based billing aligns cost with value and is ideal for AI-feature-heavy apps. Advertising is viable only at significant traffic volume — typically 50,000+ monthly visits — and damages UX if overused.

> **Rule of thumb:** choose the model that removes friction for your *best* user, not your *cheapest* u

[…truncated — see full post at URL above]

### How One User Built a Group Voting App Without Writing Code
URL: https://www.floopfloop.com/en/blog/votestay-floopfloop-no-code-case-study
Published: 2026-07-09
Tags: case-study, no-code, group-collaboration, vacation-planning, ai-builder

Learn how VoteStay.com was built in days using natural language—a group voting app that lets friends democratically choose vacation rentals without touching a line of code.

## The Vacation Planning Problem

Planning a group vacation is straightforward until people disagree about where to stay. A handful of friends scattered across different time zones each have a rental property they love—but how do you settle it fairly without endless messaging chains and hurt feelings? The founder of VoteStay faced this exact friction and decided to solve it by building a dedicated voting app. The catch: they wanted results fast, and writing a traditional full-stack application from scratch wasn't an option.

Enter natural language app generation. Instead of scaffolding a React project, wiring up a database, and deploying to cloud infrastructure, the builder described VoteStay's core feature set in plain English and let [an AI](/en/blog/add-ai-chatbot-web-app-without-api-keys) generate the entire application [in minutes](/en/blog/build-event-promo-website-floopfloop).

## What VoteStay Does

[VoteStay.com](https://votestay.com) is a lightweight group decision-making tool built specifically for vacation accommodation voting. The workflow is simple:

1. **Create or join a voting room** — A trip organizer generates a unique voting link that friends can access
2. **Subm

[…truncated — see full post at URL above]

### How to Store API Keys Securely in a Web App Without Leaking Them
URL: https://www.floopfloop.com/en/blog/how-to-store-api-keys-securely-web-app
Published: 2026-07-07
Tags: api-keys, web-security, secrets-management, environment-variables, web-app-development, best-practices

Learn how to store API keys securely in a web app by using environment variables, secrets managers, and encrypted vaults — so your credentials never appear in code, logs, or version history.

Leaked API keys are one of the most preventable — and most expensive — security mistakes a web developer can make. A single exposed credential can rack up thousands of dollars in fraudulent cloud charges overnight or hand an attacker access to your users' private data. This article explains exactly [how to store API](/en/blog/store-api-keys-securely-web-app) keys securely in a web app, why common shortcuts fail, and what a properly designed secrets management pipeline looks like.

**The safest way to store API keys in a web app is to keep them server-side, outside your codebase, and encrypted at rest. Use environment variables injected at runtime, backed by a secrets manager like AWS KMS or HashiCorp Vault. Never place a key directly in source code, a frontend JavaScript bundle, or a public repository — even temporarily.**

## What Are the Risks of Hardcoding API Keys in Source Code?

When you paste an API key directly into your code — even behind a comment that says "remove before pushing" — you are creating a permanent record. Git history is forever. A key committed at 9 a.m. and deleted at 9:05 a.m. is still readable in `git log` for the lifetime of the repository. Automated sca

[…truncated — see full post at URL above]

### AI Gateway for Web Apps: Route LLMs, Rate Limits & Credits
URL: https://www.floopfloop.com/en/blog/ai-gateway-web-apps-llm-routing-rate-limits-credits
Published: 2026-07-05
Tags: ai-gateway, llm-routing, web-app-development, rate-limiting, api-security, nextjs

Learn how an AI Gateway centralizes LLM routing, enforces rate limits, and manages API credits so your web app never exposes raw API keys in code or build logs.

Dropping a raw `OPENAI_API_KEY` into your `.env` file feels fast — until a leaked build log, a scraped client bundle, or a runaway fetch loop costs you thousands of dollars overnight. An **AI Gateway for web apps** solves this problem by acting as the single intelligent intermediary between your application and every LLM provider you use. This article explains exactly how a gateway works, why it matters for production apps, and [how to](/en/blog/how-to-add-payments-to-web-app-nextjs) wire one into a Next.js project.

**What is an AI Gateway and how does it work?** An AI Gateway is a proxy layer — deployed between [your web app](/en/blog/add-ai-chatbot-web-app-without-api-keys) and upstream LLM APIs — that handles authentication, model routing, rate limiting, and credit accounting in one place. Your app sends a request to the gateway; the gateway selects the right model, injects the real API key at runtime, enforces usage policies, and forwards the call. Your code never sees the raw key.

## What Is an AI Gateway and Why Do Raw API Keys Create Risk?

When you embed [API keys](/en/blog/store-api-keys-securely-web-app) directly in application code, you create several compounding probl

[…truncated — see full post at URL above]

### How to Add Payments to a Web App: Monetize Your Next.js Project Fast
URL: https://www.floopfloop.com/en/blog/how-to-add-payments-to-web-app-nextjs
Published: 2026-07-03
Tags: payments, nextjs, stripe-integration, web-app-monetization, checkout-flow, billing

Learn how to add payments to a web app — from choosing a pricing model and designing a high-converting billing page to integrating Stripe and shipping your first paying customer.

Shipping a web app is one milestone. Getting paid for it is another. Most developers delay monetization because it feels like a separate project — new APIs, compliance questions, and a whole billing UI to design. But the gap between "working app" and "paying customers" is smaller than you think, especially when you understand how to add payments to a web app before you've built everything else.

**The fastest path to accepting payments is to wire up a hosted checkout — like Stripe Checkout — to a single pricing page, then redirect users to it before you build any custom card UI. You can go from zero to a live payment link in under an hour, which means you can validate pricing and demand on day one.**

---

## Why Charging Early Validates Demand (Before You Over-Build)

Delaying your billing page until "the product is ready" is one of the costliest mistakes in indie development. Here's what that delay actually costs you:

- **No real signal.** Free users tolerate broken features. Paying users tell you what actually matters.
- **Sunk cost risk.** Building 90% of a feature set before learning nobody will pay for it is a waste of months.
- **Pricing inertia.** Users who sign up for fre

[…truncated — see full post at URL above]

### How to Add an AI Chatbot to Your Web App Without Managing API Keys
URL: https://www.floopfloop.com/en/blog/add-ai-chatbot-web-app-without-api-keys
Published: 2026-07-01
Tags: ai-chatbot, web-app-development, llm-integration, ai-gateway, no-code, chatbot-api

Learn how to add an AI chatbot to your web app in minutes — covering model routing, rate limits, and API key security — without writing a single line of backend boilerplate.

Adding an AI chatbot to your web app is one of the highest-leverage features you can ship right now — users stay longer, get answers faster, and bounce less. But the engineering path between "I want a chatbot" and "the chatbot is live" is littered with API keys, model versioning headaches, rate-limit errors, and surprise billing. This article maps that path clearly and shows you [how to](/en/blog/how-to-monetize-web-app-no-code) skip most of the hard parts.

## What Does It Actually Mean to Add an AI Chatbot to a Web App?

To **[add an AI chatbot](/en/blog/add-ai-chatbot-website-no-api-keys) to [a web app](/en/blog/how-to-store-api-keys-securely-web-app)** means embedding a conversational interface — typically a floating widget or a dedicated chat panel — backed by a large language model (LLM) that processes user messages and returns contextually relevant replies. The integration involves a frontend UI component, a backend route that proxies requests to the LLM provider, authentication for the API key, and logic to handle conversation history. Done from scratch, that's several days of work before you write a single line of business logic.

> The fastest way to ship an AI chatbot is

[…truncated — see full post at URL above]

### How to Get Traffic to Your Web App: A 1,000-Visitor Playbook
URL: https://www.floopfloop.com/en/blog/how-to-get-traffic-to-your-web-app
Published: 2026-06-29
Tags: web-app-marketing, traffic-growth, seo, product-hunt, content-marketing, non-technical-founders

A practical, channel-by-channel marketing playbook for non-technical founders who want to drive their first 1,000 real visitors to an AI-built web app — without a growth team or ad budget.


You built a web app — maybe in an afternoon, maybe in a week — and now it's live. The problem nobody warns you about is this: a working product and a visited product are two completely different things. Learning **how to get traffic to your web app** is a separate skill from building it, and for most non-technical founders it's the harder one.

This playbook gives you a concrete, channel-by-channel plan to reach your first 1,000 visitors. No growth team required. No five-figure ad budget. Just repeatable moves you can start today.

## The fastest way to get traffic to a web app

The fastest path to real, lasting traffic combines a community launch (Product Hunt or Hacker News) for a day-one spike, paired with keyword-targeted landing page copy and at least one blog post for compounding organic search. Founders who hit 1,000 visitors within their first month almost always used both: a launch event for immediate attention and SEO for long-tail volume that keeps arriving after the excitement fades.

---

## Why Distribution Beats Code Quality for Early-Stage Apps

Investors, accelerators, and growth advisors have said it for years: *build something people want, then tell everyone abo

[…truncated — see full post at URL above]

### How to Store API Keys Securely in Any AI Web App
URL: https://www.floopfloop.com/en/blog/store-api-keys-securely-web-app
Published: 2026-06-23
Tags: api-security, secrets-management, web-app-security, environment-variables, ai-apps, next-js

Hardcoding API keys in frontend code exposes them to anyone who views your source — here's a practical, framework-aware guide to storing and using secrets safely in AI-powered web apps.

Leaking an API key is one of the fastest ways to rack up a five-figure cloud bill or hand attackers access to your users' data. It happens more often than you'd think — and almost always starts with a single line like `const apiKey = "sk-live-abc123"` committed to a codebase. This article explains exactly how secret exposure happens, what the correct architecture looks like, and the concrete steps you can take right now [to store API keys](/en/blog/how-to-store-api-keys-securely-web-app) securely in any web app.

**The safest way to store API keys in a web application is to keep them exclusively on the server side — encrypted at rest in a secrets manager, injected into the runtime environment at startup, and never bundled into client-side JavaScript.** Keys should never appear in source code, version-control history, build logs, or any HTTP response that reaches a browser.

## What Are the Risks of Hardcoding API Keys in Source Code?

Hardcoding a key directly in your JavaScript or TypeScript file creates at least three distinct attack surfaces:

1. **Public repository exposure.** GitHub's secret-scanning bot catches some keys, but it runs *after* the push. In the minutes between p

[…truncated — see full post at URL above]

### Build a SaaS Landing Page with Checkout Using AI Prompts
URL: https://www.floopfloop.com/en/blog/build-saas-landing-page-checkout-ai-prompts
Published: 2026-06-22
Tags: saas, landing-page, checkout, no-code, ai-builder, conversion-optimization

Learn how to build a SaaS landing page with checkout flow using plain-language AI prompts — no coding required, from hero section to first paid signup.

Getting from "I have a SaaS idea" to "I have a paying customer" has historically required a designer, a frontend developer, a payments integration, and a DevOps engineer. That bottleneck kills momentum. This article shows you exactly [how to](/en/blog/add-ai-chatbot-website-no-api-keys) build a SaaS landing page with checkout flow using nothing but natural language prompts — and have it live on a custom domain before the day is out.

**The direct answer:** To build a SaaS landing page with checkout, you need five core sections (hero, features, pricing, social proof, FAQ), a connected payment flow, and a deployment target. Modern AI app builders let you describe all of this in plain English and generate production-ready Next.js/TypeScript code automatically — including the billing logic — without you writing a single line of code.

## Why a Landing Page + Checkout Combo Is Your Fastest Path to SaaS Revenue

Most early-stage founders make the same mistake: they build the full product before validating that anyone will pay for it. A tightly scoped landing page with a real checkout flow lets you test pricing, messaging, and demand in hours, not months.

The numbers back this up. Accord

[…truncated — see full post at URL above]

### How to Add a Custom Domain to Your Web App With Auto SSL
URL: https://www.floopfloop.com/en/blog/custom-domain-web-app-ssl-setup
Published: 2026-06-10
Tags: custom-domain, ssl, dns, web-app, https, deployment

Learn how to connect a custom domain to your web app and provision SSL automatically — no manual DNS wrestling, no cert renewals, no downtime.

Your app is live, your code works, but the URL reads `my-project.floop.tech`. The moment a potential user or client sees that, credibility takes a hit. This guide walks you through connecting a custom domain [to your web app](/en/blog/add-stripe-payments-web-app-no-backend), getting HTTPS provisioned automatically, and doing it without ever editing a zone file by hand.

**To add a custom domain to your web app, you register a domain, log into your DNS registrar, point a CNAME or ALIAS record at your hosting platform's target hostname, and let the platform issue an SSL certificate via ACM or Let's Encrypt. The whole process — from DNS record to live HTTPS — typically takes under an hour once propagation completes.**

## Why a Custom Domain Matters for Credibility, SEO, and Brand Trust

Search engines use the domain as a primary authority signal. A site that has lived on `yourbrand.com` for two years accumulates backlink equity, crawl history, and E-E-A-T signals that a subdomain URL simply cannot replicate. Beyond ranking, user behavior tells the same story: studies consistently show higher bounce rates on URLs that look auto-generated — visitors assume the project is a prototype, n

[…truncated — see full post at URL above]

### How to Add an AI Chatbot to Your Website Without API Keys
URL: https://www.floopfloop.com/en/blog/add-ai-chatbot-website-no-api-keys
Published: 2026-06-09
Tags: ai-chatbot, web-app-builder, no-code, ai-gateway, llm-integration, chatbot-development

Learn how to add an AI chatbot to your website in minutes using FloopFloop's built-in AI Gateway — no API keys, no backend code, and no infrastructure to manage.

Adding a chatbot to a website used to mean wrangling OpenAI API keys, writing serverless functions, worrying about rate limits, and hoping your credentials never ended up in a GitHub commit. FloopFloop's built-in AI Gateway eliminates every one of those friction points. This article shows you exactly [how to add an](/en/blog/add-ai-chatbot-website-without-api-keys) AI chatbot to your website — from a plain-language description to a live, deployed conversational UI — without touching [a single](/en/blog/build-crypto-trading-bot-without-coding-2026) API key or line of backend code.

**Adding [an AI chatbot to](/en/blog/add-ai-chatbot-web-app-without-api-keys) a website means embedding a conversational interface that can answer questions, qualify leads, or recommend products in real time. [With FloopFloop](/en/blog/create-custom-ai-assistants-floopfloop)'s AI Gateway, you describe the chatbot's behavior in natural language, and the platform generates the UI, wires up LLM calls, manages model routing, and handles credentials automatically — no backend code required.**

## Why Adding an AI Chatbot to Your Website Drives Real Engagement

Website visitors who get an instant answer stay lo

[…truncated — see full post at URL above]

### Earn Passive Income Online: Launch Projects on FloopFloop
URL: https://www.floopfloop.com/en/blog/earn-passive-income-floopfloop-projects
Published: 2026-06-08
Tags: passive-income, no-code, web-apps, monetization, ai-codegen

Learn how to build and monetize web applications without coding, turning your ideas into revenue streams with AI-powered deployment and minimal operational overhead.

## The Case for Building and Monetizing Web Projects Fast

Turning ideas into passive income typically requires months of development, ongoing maintenance, and deep technical expertise. But the internet has changed. AI-powered code generation now lets you launch monetizable web projects in hours, not months—drastically lowering both your time-to-revenue and the operational burden of keeping them running.

This guide shows you [how to](/en/blog/add-ai-chatbot-website-floopfloop-gateway) identify revenue-generating project ideas, build them with modern AI tools, and structure them for sustainable passive income.

## Identifying High-Potential Passive Income Ideas

Not every web project will generate passive income. The best candidates solve a specific problem or serve a defined audience, and they either attract recurring traffic or lock in long-term customer relationships.

### Types of Ideas That Generate Passive Income

**Audience-first projects** attract organic traffic through SEO, community, or brand reputation:
- Niche blogs or content hubs (e.g., productivity tips for remote workers, gardening guides)
- Comparison tools or calculators (mortgage calculators, savings trackers)
-

[…truncated — see full post at URL above]

### Build an Event Promo Website in Minutes with FloopFloop
URL: https://www.floopfloop.com/en/blog/build-event-promo-website-floopfloop
Published: 2026-06-01
Tags: event-website, wedding-website, party-planner, ai-builder, no-code

Create a stunning wedding, party, or birthday website in under 10 minutes using FloopFloop's AI-powered builder—no coding required.

## The Event Website Problem

You're hosting a celebration—a wedding, birthday party, engagement, or corporate event—and you need a dedicated website to share details, collect RSVPs, and impress your guests. Traditional approaches demand either hiring a developer (expensive and slow), wrestling with template builders (clunky and time-consuming), or settling for a bare-bones social media post. What if you could describe your vision in plain English and have a production-ready site deployed in minutes?

## Why Event Websites Matter

A dedicated event website is far more than vanity. It serves concrete functions:

- **Centralized information**: Venue, date, time, dress code, dietary restrictions—one authoritative source.
- **RSVP collection**: Automated headcount tracking instead of scattered emails and texts.
- **Guest engagement**: Photo galleries, countdowns, travel tips, and accommodations foster anticipation.
- **Professional impression**: A polished website signals respect for your guests' time and reflects well on the occasion.
- **Accessibility**: Guests can find details on any device, any time.

> A well-designed event website reduces friction for guests and eliminates the "W

[…truncated — see full post at URL above]

### How to Get and Attract Visitors to Your FloopFloop Project
URL: https://www.floopfloop.com/en/blog/attract-visitors-floop-project
Published: 2026-05-25
Tags: traffic-generation, user-acquisition, seo-marketing, web-app-growth, audience-building

Learn proven strategies to drive traffic to your FloopFloop web app, from SEO and content marketing to social sharing and community engagement.

## The Challenge of Getting Your Web App in Front of Users

You've built a web app with FloopFloop—now comes the harder part: getting people to actually use it. Whether your project is a productivity tool, a community platform, or a niche service, traffic won't appear by accident. The good news is that web apps built with modern hosting infrastructure are well-positioned for growth if you combine the right marketing tactics with a clear understanding of where your audience spends time online.

## Start with SEO and Content Visibility

SEO remains one of the most reliable long-term traffic sources. Your FloopFloop project is automatically deployed to a `<project>.floop.tech` subdomain or your custom domain, both of which are crawlable by search engines. Here's how to optimize visibility:

### Keyword Research and On-Page Optimization

Identify the keywords your target users search for. Use free tools like Google Keyword Planner, Semrush, or Ahrefs to find search volume and difficulty. Then:

- Write descriptive, keyword-rich page titles and meta descriptions (160 characters max)
- Structure your content with clear H1, H2, and H3 headings
- Create internal links between related pages

[…truncated — see full post at URL above]

### Create Custom AI Assistants with FloopFloop: Step-by-Step Guide
URL: https://www.floopfloop.com/en/blog/create-custom-ai-assistants-floopfloop
Published: 2026-05-10
Tags: ai-assistants, no-code, llm-integration, web-apps, ai-agents

Learn how to build and deploy your own AI assistants in minutes using FloopFloop's AI-powered web app builder, from concept to live agent.

## The Promise of Custom AI Assistants

Off-the-shelf chatbots and AI tools often feel generic. They follow preset rules, can't access your internal data, and rarely integrate seamlessly into your workflow. What if you could build [an AI](/en/blog/add-ai-chatbot-website-floopfloop-gateway) assistant that does *exactly* what you need—trained on your domain, connected to your systems, and deployed as a live web app in minutes?

That's the opportunity. Building custom AI assistants used to require deep backend expertise, API wrangling, and deployment infrastructure knowledge. FloopFloop changes that equation: describe what you want, and the platform generates a production-ready Next.js app with LLM integration, deploys it automatically, and keeps it running.

## Understanding AI Assistants vs. Generic Chatbots

Before diving into the build, let's clarify what makes [an AI](/en/blog/add-ai-chatbot-website-no-api-keys) assistant custom:

**Generic chatbots** are pre-trained and often limited to scripted responses or broad conversation. They lack domain knowledge and rarely tie into your specific business logic.

**Custom AI assistants** (or agents) are tailored to your use case. They mi

[…truncated — see full post at URL above]

### Launch a Paid Membership Site in 2026 — Without Hiring a Developer
URL: https://www.floopfloop.com/en/blog/launch-paid-membership-site-without-coding-2026
Published: 2026-04-30
Tags: membership site, no-code, stripe, subscriptions, paid newsletter, creator economy, ai

Memberful, Patreon, Substack, and Podia each take a cut and lock you into their UX. In 2026 you can launch a fully owned paid-membership site — gated content, recurring billing, member tiers, login portal — in a single afternoon, without writing code. Here's the playbook.

## The membership-site math nobody mentions

Every hosted membership platform charges you in two currencies. The first is a percentage of every dollar your members pay — usually 5% to 10% on top of payment-processor fees. The second is your roadmap. You can't move the email-capture form, you can't change how the paywall renders, you can't add a tier between $9 and $29 without their pricing page approving the layout. By year three of running a $100K/year membership site on a hosted platform, you've paid $15K–$30K in platform fees and accepted dozens of small UX compromises that quietly cost you signups.

In 2026, neither of those bills is mandatory. You can describe the membership site you want, generate the full codebase from a prompt, plug in your own Stripe account, deploy it on your own URL, and own every layer. The math flips: zero platform percentage, zero feature backlog you don't control, and a codebase you can actually grow into.

Here's the exact playbook.

## Step 1 — Decide the shape of your membership before you write the prompt

The most expensive mistake in launching a membership site is shipping the tiers wrong on day one. Spend twenty minutes answering five question

[…truncated — see full post at URL above]

### From Spreadsheet to App: Turn Your Most Painful Excel into a Real Web App in an Afternoon (2026 Guide)
URL: https://www.floopfloop.com/en/blog/spreadsheet-to-app-without-coding-2026
Published: 2026-04-29
Tags: no-code, excel, spreadsheet, internal tools, smb, ai, ops

Every SMB has at least one Excel sheet doing the work of an app — and breaking under it. Here's a 2026 walkthrough for replacing that spreadsheet with a hosted, multi-user web app in an afternoon, without writing code.

## The shared-spreadsheet trap

Every SMB has the same artifact. It started as a quick way to track one thing — leads, inventory, expenses, project tasks, gym memberships, whatever — and it grew. Three people now type into it. There are conditional-formatting rules nobody fully understands. The "do not edit" tab is edited weekly. The most senior person in the company spends two hours a month merging conflicting versions back together. Everybody knows it should be an app. Nobody has the budget for a developer to build one.

In 2026, the spreadsheet-to-app gap closed. You no longer need a developer for this jump. You need a clear description of what the spreadsheet wants to be, and an AI that can turn that description into a hosted, multi-user web app in minutes.

This guide walks through the exact migration most SMBs end up doing the first time they try.

## Step 1 — Describe the spreadsheet you want to replace

Open the spreadsheet. Look at the columns. Look at the formulas. Look at the manual rituals — "every Friday Sarah copies the totals from sheet 2 into sheet 3" is a ritual the app should automate away.

Then write a short description in plain English. Specific is better than 

[…truncated — see full post at URL above]

### Build Your Own AI Crypto Trading Bot Without Writing a Single Line of Code (2026 Guide)
URL: https://www.floopfloop.com/en/blog/build-crypto-trading-bot-without-coding-2026
Published: 2026-04-29
Tags: crypto, trading bot, ai, no-code, cryptohopper, automation

A practical 2026 walkthrough for traders who want a custom crypto trading bot — RSI, MACD, DCA, multi-coin portfolio — without touching a code editor. Powered by FloopFloop's AI builder and live execution through Cryptohopper.

## Why 2026 changed crypto bot building

A year ago, building a custom crypto trading bot meant one of three painful paths. Path one: learn enough Python to wire CCXT into a strategy, deploy it on a VPS, and pray your reconnect logic works at 4am. Path two: pay a freelancer $2,000–$8,000 and wait six weeks. Path three: use a pre-built bot platform with rigid templates that don't quite do what you want.

In 2026 there's a fourth path: describe the strategy in plain English, let an AI generate the code, and let an established trading platform handle the exchange execution. That's the path this guide walks through. By the end you'll have a working, live, schedulable trading bot you wrote zero code for.

## The two pieces: FloopFloop + Cryptohopper

FloopFloop is an AI app builder. You give it a prompt — anything from "a landing page for my dog walking business" to "an RSI signal bot that watches BTC/USDT" — and it generates the full project, deploys it to a hosted environment, and hands you a live URL. The generated code is yours to keep, edit, fork, or self-host.

Cryptohopper is a long-running crypto trading platform with REST APIs for placing orders, managing balances, and connecti

[…truncated — see full post at URL above]

### 10 Profitable Websites You Can Build with FloopFloop Today
URL: https://www.floopfloop.com/en/blog/profitable-websites-build-floopfloop
Published: 2026-04-28
Tags: side-hustle, saas-ideas, passive-income, no-code, web-apps, monetization

Discover ten revenue-generating website ideas you can launch in minutes using FloopFloop's AI-powered builder, complete with practical monetization strategies.

## The Opportunity: Building Profitable Sites Faster Than Ever

The barrier to launching a revenue-generating website has never been lower. With AI-powered builders, you no longer need to hire developers, manage servers, or spend weeks on infrastructure. The real bottleneck today isn't technical—it's identifying the right idea and validating demand. This guide walks you through ten proven website concepts you can launch with FloopFloop, each with clear monetization paths and real earning potential.

## 1. AI Tool Directory & Review Platform

As AI tools explode in number, buyers are desperate for curated, honest comparisons. Build a directory where users discover tools filtered by category, price, and use case—then review each one.

**Monetization:**
- Affiliate commissions when users sign up via your links (SaaS tools pay 20–40% recurring commissions)
- Sponsored listings for premium tool creators
- Freemium tier with paid "verified review" badges

**Why it works:** Low content cost, high affiliate payouts, and evergreen search traffic. Tools like Zapier and N8N actively recruit affiliates.

## 2. No-Code Template Marketplace

No-code builders are mainstream, but templates save us

[…truncated — see full post at URL above]

### Build a Company Website in Minutes with AI-Powered Code Generation
URL: https://www.floopfloop.com/en/blog/build-company-website-ai-minutes
Published: 2026-04-22
Tags: website-builder, ai-codegen, no-code, next-js, web-deployment

Discover how natural language descriptions and AI code generation let you launch a professional company website without writing code—from concept to live deployment in under 15 minutes.

## The Old Way vs. the New Way

Building a company website has traditionally meant weeks of planning, months of development, and thousands of dollars in engineering costs. You'd hire a designer, coordinate with developers, set up hosting, manage DNS records, and deploy through a labyrinth of CI/CD pipelines. Today, that entire workflow can happen in minutes.

AI-powered code generation has flipped the script: instead of *writing* code, you *describe* what you want—and the system writes, tests, and deploys it for you. This article walks through the real workflow of launching a professional company website using natural language prompts and automatic deployment.

## How AI Code Generation Works for Web Apps

At its core, AI code generation for web apps follows three steps:

1. **Prompt interpretation** – You describe your site in plain English ("Build a marketing homepage with a hero section, three feature cards, and a contact form").
2. **Code generation** – An LLM generates production-ready code (Next.js + TypeScript in a sandboxed container).
3. **Instant deployment** – The app is automatically deployed to a live URL as soon as generation completes.

Unlike older "drag-and-drop" b

[…truncated — see full post at URL above]

### Build Web Games with AI: FloopFloop's No-Code Approach
URL: https://www.floopfloop.com/en/blog/web-games-ai-no-code-floopfloop
Published: 2026-04-21
Tags: game-development, no-code, web-apps, ai-codegen, next-js

Discover how to develop interactive web games without writing code, using AI-powered generation and instant deployment on modern infrastructure.

## The Game Development Barrier Is Dropping

Building a web game traditionally meant choosing between tight proprietary engines (Unity WebGL, Unreal Pixel Streaming) or hand-coding a custom renderer in WebGL or Canvas. Both paths demand deep technical expertise. AI-powered code generation is flipping this equation: describe your game concept in plain English, and the platform generates a playable prototype in seconds.

This shift opens game development to designers, artists, and product people who were previously locked out by the sheer friction of "learn a new language and a rendering pipeline." At the same time, it compresses iteration cycles for experienced developers, letting them test wild ideas without boilerplate.

## What Makes Web Games Different From Desktop or Mobile?

### Instant Distribution and No Installation

Web games live in the browser. Players click a link and play immediately—no app store review, no installer, no version management headaches. This makes web the ideal platform for experimental, educational, or casual games where time-to-player is critical.

### Performance Trade-offs

Web games run inside a JavaScript sandbox with throttled GPU access compared t

[…truncated — see full post at URL above]

### Create Your First Project Successfully on FloopFloop: The Vibe Code Guide
URL: https://www.floopfloop.com/en/blog/create-first-project-floopfloop-vibe-code
Published: 2026-04-15
Tags: no-code-development, web-app-builder, vibe-code, project-setup, beginner-guide

Learn the step-by-step process to build your first project on FloopFloop using vibe code, from setup to deployment, with zero coding experience required.

## Getting Started with FloopFloop's Vibe Code

Building your first web project shouldn't require months of coding bootcamp tuition or wrestling with complex frameworks. FloopFloop's vibe code system changes that equation by letting you describe what you want to build in natural language, then watching it materialize in real time. This guide walks you through creating your first successful project from concept to live deployment.

Vibe code is FloopFloop's proprietary approach to low-code development—it bridges the gap between visual builders and traditional coding by understanding your intent and generating the underlying logic automatically. You'll be amazed how fast you can move once you grasp the fundamentals.

## Define Your Project Scope Before You Start

The most common mistake first-time builders make is diving into the interface without a clear plan. Spend 15 minutes writing down exactly what you're building.

### What to Document

- **Primary purpose**: Is this a portfolio site, a todo app, a marketplace, a feedback form?
- **Core features**: List 3-5 features you absolutely need. Ignore "nice-to-haves" for now.
- **User flow**: Who uses it, what do they do first, what's 

[…truncated — see full post at URL above]

## Pricing

Full pricing page: https://www.floopfloop.com/en/pricing

- **Free** — $0/month. One project and one build to see your idea running; refinements and further builds need a paid plan.
- **Starter** — $19/month (monthly) or billed annually with ~15% off. For solo builders who want more projects and credits per month.
- **Pro** — $39/month. Higher project + credit limits, priority build queue, remove-branding.
- **Business** — $79/month. Team workspaces, highest limits, and dedicated support.

Credits cover project builds, refinements, AI-gateway calls, and code edits. Annual plans bill upfront and include the same monthly credit grants. Top-ups are available on any paid plan.

## Support FAQs

Hub: https://www.floopfloop.com/en/support

### General
URL: https://www.floopfloop.com/en/support/general

- **Q:** What is FloopFloop?
  **A:** FloopFloop is an AI app builder. You describe what you want in plain language, and our AI writes a real Next.js application, deploys it, and gives you a live URL on *.floop.tech (or your own domain). You can refine it through chat, add secrets, schedule cron jobs, and ship updates without leaving the browser. It is aimed at founders, indie hackers, and developers who want to skip the boilerplate.
- **Q:** Do I need to know how to code to use FloopFloop?
  **A:** No. Most users never look at the source code. You write your idea in plain English (or any of our 13 supported languages), and FloopFloop handles the technical work — choosing the framework, structuring the database, deploying the site, and provisioning SSL. If you do know how to code, you can connect your project's GitHub repo and edit it directly, but it is fully optional.
- **Q:** How long does it take to build a project?
  **A:** A typical first build runs 2 to 9 minutes. The pipeline has five stages: understand the prompt, write the code, create the GitHub repo, build & deploy to AWS, and wire up DNS + the database. You see live progress for each stage. Refinements (changes after the first build) usually finish in under 90 seconds because we only rebuild what changed.
- **Q:** How do I create my first project on FloopFloop?
  **A:** Sign in, click "New project" on your dashboard, type a description of what you want to build (the more specific, the better), and pick a subdomain. FloopFloop will then design, code, and deploy your app automatically. You will see five build stages run in real time. When the build finishes, your project is live at https://your-subdomain.floop.tech and you can chat with it to make changes.
- **Q:** What can I describe in a prompt? What details help the AI build better?
  **A:** Anything from a landing page to a SaaS dashboard, a small CRM, a portfolio, a booking site, or an internal tool. The more concrete you are, the better the result. Helpful details: who the users are, what actions they take, what data the app stores, what the home page should show first, the visual style you want, and which integrations matter (Stripe, Google Sheets, an API). Vague prompts produce generic apps; specific prompts produce something closer to your idea.
- **Q:** Can I upload screenshots, PDFs, or sample data with my prompt?
  **A:** Yes. The prompt box accepts images (screenshots, sketches, mockups), PDFs (for reference docs or specs), and CSV/JSON sample data the AI can use as a starting schema. The AI reads them as part of the same instruction. This is the fastest way to get pixel-close UI or to seed the database with realistic shapes. Files are stored privately and only used for your project's build.
- **Q:** Will the AI ask me clarifying questions, or does it guess?
  **A:** On the very first build it does not pause to ask — it commits to the most reasonable interpretation so the build can finish in one shot. After the build is live, the chat does ask follow-up questions when something is ambiguous, especially around data shape or destructive changes ("delete all users — are you sure?"). If you want a clarification round on the first build, write "ask me before deciding" in your initial prompt.
- **Q:** How do I clone a project from the public library?
  **A:** Browse /library, open any public project, and click "Clone". A copy is created in your account with a fresh subdomain. The original is untouched — the author keeps theirs, you own yours. Cloning costs 2 credits (the same on every paid plan). After cloning, the project is fully yours: you can refine, change, deploy, or delete it independently.
- **Q:** Can I make a project private after I've already built it as public?
  **A:** Yes, on Starter and above. Open the project's Settings → Visibility and switch to "Private". The change takes effect immediately: the public URL begins requiring login, the project is removed from the library, and search engines that have already indexed it will drop it on their next crawl. You can flip back to public any time. Free-plan projects must stay public.
- **Q:** What's the difference between archiving and deleting a project?
  **A:** Archiving keeps everything (code, database, secrets, deployment URL) but takes the project offline and stops it counting against your project quota. You can unarchive any time and the URL comes back. Deleting is permanent: after a 30-day grace window the GitHub repo, S3 assets, database, and DNS records are all wiped. Use archive when you might come back, delete when you really won't.
- **Q:** Can I roll back to a previous version of my project?
  **A:** Yes. Every successful build is snapshotted. Open the project's Versions tab, pick any past build, and click "Restore". The site is rolled back to that exact code in under a minute and any chat refinements you made after it become a fresh chain of changes on top of the restored point. You don't lose history — every snapshot stays available for 90 days.
- **Q:** How long are project snapshots kept?
  **A:** 90 days for every plan. The most recent successful build is always restorable, even past 90 days, but the longer history beyond 90 days is pruned to keep storage costs predictable. If you need a build preserved beyond that, fork it (clone) — the clone keeps its own independent snapshot timeline.

### Billing
URL: https://www.floopfloop.com/en/support/billing

- **Q:** What's included on the Free plan?
  **A:** One project and one build — enough to see your idea running. Refinements (changing or extending the app) are part of the paid plans. Your project lives at *.floop.tech with a small "Built with FloopFloop" badge and stays publicly visible. You get 500 MB of storage and 10 K AI tokens per day. There is no time limit — you can stay on Free as long as you want. To refine your app, remove the badge, go private, or build more than one project, upgrade to Starter or higher.
- **Q:** What does a credit buy me?
  **A:** Credits are FloopFloop's currency for AI work. A new project build costs 5 credits, a chat refinement costs 1, redeploying without changes costs 1, and cloning a public project costs 2. Paid plans include a monthly credit allowance (Starter 75 / Pro 200 / Business 500). If you need more, you can buy top-up packs at any time without changing your plan.
- **Q:** What happens when I run out of credits mid-month?
  **A:** Existing projects keep running normally — public URLs do not go down, scheduled jobs keep firing, custom domains stay live. What stops is new AI work: you cannot start new builds, run refinements, or clone from the library until you either buy a top-up pack, upgrade your plan, or wait for next month's allowance to reset on your billing date.
- **Q:** Do unused credits roll over?
  **A:** Yes, but only for a limited window. Unused credits from your monthly allowance roll over for one month on Starter and two months on Pro and Business. After that they expire. Top-up credits you buy à la carte don't expire — they sit in your account until you spend them.
- **Q:** Can I buy more credits without changing plans?
  **A:** Yes. Open Billing → Top-up and pick a pack: 25 credits for $5, 75 for $12, or 200 for $25. Top-ups are charged once, applied instantly, and don't change your subscription. Top-up credits never expire, and they are spent only after your monthly allowance is used up — so you don't accidentally burn the pack you paid for.
- **Q:** What happens to my projects if I downgrade?
  **A:** Nothing is deleted, but anything beyond the lower plan's quota is suspended. If you have 10 projects on Pro and downgrade to Starter (5 projects), 5 of them go offline — you choose which. Custom domains revert to floop.tech subdomains on Free, the FloopFloop branding badge comes back, and private projects are forced public on Free. Re-upgrade and everything reactivates exactly as it was.
- **Q:** Can I switch between monthly and annual billing?
  **A:** Yes. From Billing → Plan, switch any direction: monthly to annual, annual to monthly, or annual to a different plan. Switching to annual prorates: we credit the unused portion of your monthly subscription against the annual price. Switching from annual to monthly takes effect at the end of the current annual period — we don't refund the year mid-cycle, but you keep all the perks until the year is up.
- **Q:** Can I get a refund?
  **A:** Yes, within 14 days of the original payment, as long as you have not consumed more than 25% of that period's credits. Email support with your account email and the invoice number. Top-up packs are non-refundable once any of the credits in the pack have been spent. We always refund 100% in cases of duplicate charges, accidental upgrades, or technical failures we caused.
- **Q:** What happens to my credits when I cancel?
  **A:** Your subscription stays active until the end of the period you've already paid for, and your monthly allowance for that period is fully usable. After the period ends, the unused monthly credits expire. Top-up credits stick around — they belong to your account, not your plan, so you can still spend them on Free or after re-subscribing. Projects move to the Free quotas (1 project, public, with the FloopFloop badge).
- **Q:** Is my payment information secure?
  **A:** Yes. All payments are processed by Stripe, which is PCI-DSS Level 1 certified. We never see or store your raw card data — Stripe holds the card vault and we only keep an opaque customer ID. You can manage cards, view invoices, and cancel directly from the Stripe-hosted billing portal we link from your account.
- **Q:** Can I get a VAT-compliant invoice?
  **A:** Yes. Open Billing → Invoices and add your company name, address, and VAT/Tax ID under "Tax details". Future invoices generated by Stripe will include those fields and the appropriate tax line. Past invoices can be re-issued with the new details on request — email support with the invoice numbers you need updated.
- **Q:** Do team members each get their own credit allocation?
  **A:** No — credits are shared at the workspace level on Business. Every team member draws from the same monthly pool of 500 credits. The Owner and Admins can see who spent what under Workspace → Usage. If you want to cap individual usage, set a per-member soft limit in the same panel; the user gets a warning before they go over.
- **Q:** What happens to my account if my payment fails?
  **A:** Stripe automatically retries failed cards three times over a week and emails you each time. Your account stays fully functional during this grace period. If all retries fail, the subscription cancels and the account moves to Free quotas — projects beyond the Free limit are suspended (not deleted). Updating the card and re-subscribing reactivates everything in its previous state.
- **Q:** Are there bulk-credit or agency discounts?
  **A:** Yes. If you spend more than $500/month or operate as an agency building projects for clients, contact sales — we offer 10–25% off bulk credit packs (1 000+) and a separate "Agency" workspace tier with multi-client billing, branded invoices, and a higher project quota. The standard Business plan covers most use cases below that threshold.

### Technical
URL: https://www.floopfloop.com/en/support/technical

- **Q:** What should I do if my project deployment fails?
  **A:** First, open the build's status page — every stage has a Logs button that shows exactly where it failed. Most failures fall into three buckets: a transient infrastructure hiccup (just click Retry), a code error the AI can fix on its own (start a chat with "the build failed, the error is: …" and paste the relevant log line), or an upstream issue with a connected service (Stripe, GitHub, your custom domain provider). If none of those apply, message support with the project ID — we can re-run the pipeline manually.
- **Q:** Why does my newly deployed project show a blank page or broken layout?
  **A:** Three common causes. (1) The DNS hasn't fully propagated yet — wait 5–15 minutes and hard-refresh. (2) Your browser cached an older asset — open in an incognito window. (3) The first build's output was syntactically valid but logically wrong — start a chat with "the page is blank when I open the home page" and the AI will fix it on the next refinement. The browser console (F12 → Console tab) usually shows the underlying error.
- **Q:** Why is my build stuck "in queue"?
  **A:** Builds run in a shared queue. Free and Starter plans have standard priority and may wait a few minutes during peak hours; Pro and Business get priority slots and almost never queue. If your build has been queued for more than 10 minutes, that's unusual — refresh the page (the status updates over websocket and sometimes the connection drops), and if it still hasn't started, message support with the project ID.
- **Q:** Can I redeploy without making any changes?
  **A:** Yes. Open the project, click the three-dot menu, and choose "Redeploy". Your code stays exactly the same — but new environment variables get picked up, expired build artifacts get rebuilt, and any platform-side improvements (security patches in the runtime, for example) are applied. A no-change redeploy costs 1 credit and finishes in under a minute.
- **Q:** Where is my project actually hosted?
  **A:** On AWS, in the us-east-1 region by default. Static assets serve from CloudFront's global edge network, so your visitors hit a nearby PoP regardless of where the origin lives. Server-side rendering runs on AWS Lambda, your project's database is on Amazon RDS Postgres, and uploaded files live in S3. EU data residency is on the roadmap but not yet available — let support know if it is a hard requirement for you.
- **Q:** Can I export my code and host it myself?
  **A:** Yes — your project's code lives in a GitHub repo we created in your name. Open the project's Settings → Repository to see the URL and grant your account write access. Clone, fork, or move it to another GitHub org as you would with any repo. The same goes for your database (we expose a Postgres connection string under Settings → Database → Export). You keep ownership of the code and the data; FloopFloop is a deployment + AI layer on top.
- **Q:** How do I connect a custom domain?
  **A:** On Pro or higher: open the project, go to Settings → Domains, click "Add domain", and enter your domain (root or subdomain). FloopFloop shows two DNS records to add at your registrar — a CNAME (or A/ALIAS for an apex domain) and a TXT record for verification. Once both are detected, SSL provisions automatically and the domain goes live, usually in 5–30 minutes. Free and Starter plans don't support custom domains; upgrade to use this.
- **Q:** Why isn't my custom domain resolving?
  **A:** Most issues are DNS-side. Check that the CNAME (or A/ALIAS) record exists, points to the value FloopFloop showed you, and is not behind a proxy that blocks our verification (Cloudflare "orange cloud" needs to be off until verification finishes — flip it back on after). Use `dig your-domain.com +short` from a terminal to verify what the world sees. Verification usually takes under 15 minutes; if it's been an hour and the dashboard still shows "Pending", message support with the domain.
- **Q:** How are environment variables and secrets stored?
  **A:** All secrets are encrypted at rest with AES-256 in AWS Secrets Manager and only decrypted at request time inside your project's runtime — they're never written to disk or build logs. Once you save a secret, the value is write-only: you can update or delete it but never read it back from the dashboard. FloopFloop staff don't have access to plaintext values; what we see is the key name and the audit metadata.
- **Q:** Can I rotate a secret without redeploying?
  **A:** Yes. Open Settings → Secrets, find the entry, click "Rotate", and paste the new value. Within ~30 seconds the running runtime starts reading the new value (we hot-reload secrets and don't restart the function). If the secret is part of a build-time config (rare), you'll see a banner asking you to redeploy — that takes about a minute and costs 1 credit.
- **Q:** How do I add a scheduled / cron job to my project?
  **A:** Tell the AI in chat: "add a cron job that runs every day at 9 AM and emails me a summary of new sign-ups". The AI generates a `/api/cron/<name>` route in your code, registers the schedule (cron expression or interval), and on every redeploy our scheduler keeps the registration in sync. Each invocation arrives with a project-scoped bearer token so only our scheduler can trigger it. View runs and logs under Settings → Schedules.
- **Q:** How do I install the FloopFloop CLI?
  **A:** On macOS and Linux: `curl -fsSL https://floop.tech/install.sh | sh`. On Windows: download the latest installer from the GitHub Releases page of the floop-cli repo, or use `winget install FloopFloopAI.floop`. Once installed, run `floop login` — that opens a browser to authorise this device. From there, `floop new`, `floop refine`, `floop deploy` and the rest of the commands work without further setup.
- **Q:** What's the difference between a CLI token and an API key?
  **A:** A CLI token is the credential `floop login` writes to your local config — it identifies the human user on a specific device, and you can revoke it from /account/devices when you stop using a laptop. An API key is for unattended access from scripts, CI, or third-party apps — you create them under /account/api-keys, scope them per project if you want, and rotate them whenever. Both call the same `/api/v1/*` surface, but only API keys should be checked into automation.
- **Q:** Are the SDKs at feature parity across languages?
  **A:** Yes — the eight first-party SDKs (Node, Python, Go, Rust, Ruby, PHP, Swift, Kotlin) all wrap the same `/api/v1/*` surface and ship matching method names. When we add an endpoint, we mirror it across every SDK in the same release. The MCP server (`@floopfloop/mcp`) re-exposes the Node SDK to LLM agents and gets the new method automatically. If you spot a gap, it's a bug — open an issue on the relevant SDK repo.

### Account
URL: https://www.floopfloop.com/en/support/account

- **Q:** How do I reset a forgotten password?
  **A:** On the sign-in page, click "Forgot password". Enter the email on your account and we'll send a reset link that's valid for 30 minutes. The email comes from `accounts@floop.tech` — check spam if you don't see it. If your account was created via Google sign-in only, there's no password to reset; sign back in with the same Google account instead.
- **Q:** Can I sign in with Google?
  **A:** Yes. The sign-in screen has a "Continue with Google" button. If you already have an account with the same email as your Google address, the two are linked automatically — both methods work from then on. New accounts created via Google can add a password later under /account/security so they're not locked into one auth method.
- **Q:** How do I enable two-factor authentication?
  **A:** Open /account/security → Two-factor auth, scan the QR code with any TOTP app (Google Authenticator, 1Password, Bitwarden, Authy, etc.), and enter the 6-digit code to confirm. Save the recovery codes we show you afterwards somewhere safe — they're the only way back into the account if you lose your authenticator. Once 2FA is on, every new browser session and CLI device authorisation will ask for a code.
- **Q:** What if I lose my 2FA device?
  **A:** Sign in with one of the recovery codes you saved when you enabled 2FA — at the code prompt, click "Use a recovery code instead". Each code works exactly once. Once you're back in, regenerate a fresh set under /account/security. If you've lost the device and don't have any recovery codes, contact support from the email address on the account; we'll verify your identity manually before unlocking the account, which usually takes 24–48 hours.
- **Q:** How do I change the email address on my account?
  **A:** Open /account/profile, edit the email field, and click Save. We send a confirmation link to the new address — clicking it completes the change. The old address gets a notification (in case it wasn't you), and any pending sessions on the account are kept active. If your account uses Google sign-in tied to a Google address, change the Google email itself or unlink Google first under /account/security.
- **Q:** How do I delete my FloopFloop account?
  **A:** Open /account/danger-zone and click "Delete account". We send a confirmation email — clicking the link starts a 30-day grace window, during which your account is locked but recoverable. After 30 days everything is wiped: projects, GitHub repos we created, S3 assets, the project database, secrets, billing details on file, and audit logs. We notify you on day 7 and day 25 in case you change your mind.
- **Q:** Can I merge two FloopFloop accounts?
  **A:** Not directly through the dashboard, but support can do it. Email us with both account emails and tell us which one to keep as the primary. We move all projects, credits, custom domains, secrets, and team memberships from the secondary into the primary, then close the secondary. The whole process is usually done within 48 hours; we don't merge if either account has an active dispute or chargeback open.
- **Q:** Can I sign in to two accounts at once?
  **A:** Yes, but in separate browser profiles or windows. The dashboard stores its session in cookies scoped to the floop.tech domain, so a second account in the same profile would overwrite the first. The cleanest setup is one Chrome profile / Firefox container / Safari profile per account. The CLI handles this differently — `floop login --profile=work` lets you keep multiple credentials side by side and switch with `floop use work`.
- **Q:** What does the Cryptohopper integration do?
  **A:** It lets a project you build on FloopFloop talk to your Cryptohopper account through Cryptohopper's official OAuth2 REST API — list your hoppers, read trade history, place orders, and react to events. The integration is a one-click OAuth flow; no manual API key copy-pasting. Common use cases: a custom dashboard for your hoppers, automated reporting, signal generation hooked to your strategies, and notifications. The connection is per-user, so each project user authorises their own Cryptohopper account.
- **Q:** How do I connect my Cryptohopper account to FloopFloop?
  **A:** Open your project's Settings → Integrations and click "Connect Cryptohopper". You'll be redirected to Cryptohopper's login page; sign in if needed and approve the requested scopes. We get a refresh token (never your password), encrypt it, and store it as a per-user secret on the project. From then on, the project's code can call Cryptohopper's API on your behalf. The same flow works whether your project is hosted on a *.floop.tech subdomain or a custom domain.
- **Q:** What permissions does FloopFloop request from Cryptohopper?
  **A:** Only the scopes your project actually uses. By default that's `read:hoppers`, `read:trades`, and `read:positions`. If your prompt asks for trade execution, the code will additionally request `write:orders`. The OAuth consent screen always shows you the exact list before you approve, and you can revoke it any time from Cryptohopper's authorised-apps page. We never request password-equivalent scopes, and we never store your Cryptohopper login.
- **Q:** How do I disconnect my Cryptohopper account?
  **A:** Two equivalent options: (1) From the FloopFloop side — open Settings → Integrations on the project, find Cryptohopper, and click "Disconnect". We immediately delete the encrypted refresh token from the project. (2) From Cryptohopper's side — go to your Cryptohopper account's authorised-apps page and revoke FloopFloop. The next API call from the project will fail and the app will prompt the user to reconnect.
- **Q:** Where are my Cryptohopper credentials stored?
  **A:** Only the OAuth refresh token is stored, never your password or your Cryptohopper API keys. The token sits in AWS Secrets Manager encrypted with AES-256, scoped to the user inside the project. At request time, your project's runtime exchanges the refresh token for a short-lived access token, makes the API call, and discards the access token. FloopFloop staff cannot read the plaintext token, and we never have access to your Cryptohopper account itself.
- **Q:** How many team members can I have?
  **A:** Free, Starter, and Pro are single-user accounts (you cannot invite teammates). The Business plan includes a workspace with up to 5 seats; if you need more, contact sales for an Agency tier with custom seat counts. Inviting a teammate is one click — open Workspace → Members, paste their email, choose a role, and they get an email with a sign-up link.
- **Q:** What's the difference between Owner, Admin, and Member?
  **A:** Owner: full control — billing, plan changes, workspace deletion, plus everything Admins can do. There is exactly one Owner per workspace; transfer the role from Workspace → Members → "Make Owner". Admin: manage members and projects, edit secrets, deploy, view usage; cannot change billing or delete the workspace. Member: build and refine projects assigned to them, deploy, manage their own secrets; cannot invite, remove, or change roles of other members.
- **Q:** Can I transfer a personal project into a team workspace?
  **A:** Yes. As Owner, open the project's Settings → Workspace, pick the destination workspace from the dropdown, and confirm. The project's GitHub repo, deployment, secrets, custom domain, and credit-spend history all move atomically. The reverse also works — moving a project out of a workspace back to your personal account is the same one-click action. We never split a project across workspaces.
- **Q:** Where does FloopFloop store my data?
  **A:** All your data lives in AWS, primarily in us-east-1 (N. Virginia). The platform database, project databases, S3 file uploads, and audit logs all sit there. CloudFront caches static assets at edge locations worldwide for speed, but the source-of-truth copy stays in us-east-1. We can move you to another region under contract if you have a hard data-residency requirement (EU mostly), but it's not yet self-serve.
- **Q:** Can I request a GDPR data export?
  **A:** Yes. Open /account/privacy and click "Export my data". We generate a ZIP within 72 hours containing your profile, billing history, list of projects, refinement chat history, audit log entries that reference you, and any uploaded files we still hold. We email a download link valid for 7 days. The export is GDPR Art. 20 compliant; you can also email privacy@floop.tech if you need it in a specific structured format.
- **Q:** Can I request data deletion under GDPR?
  **A:** Yes. Account deletion (see /account/danger-zone) covers GDPR Art. 17 — after the 30-day grace window everything personal is wiped. If you only want a specific item gone — a chat conversation, an uploaded file, an old support ticket — email privacy@floop.tech and we'll process it within 30 days. Some records (legally required tax invoices, fraud-investigation logs) we keep for the period the law requires, then delete. We'll always tell you what we kept and why.
- **Q:** How do I report a bug or get support?
  **A:** Three channels, in order of speed: (1) the in-app support chat (bottom-right of every dashboard page) — fastest, AI-assisted with a human handoff for hard problems. (2) Email support@floop.tech — best for tickets that need attachments or back-and-forth. (3) For security issues specifically, email security@floop.tech — please don't open public GitHub issues. Response targets: Free 48 h, Starter 24 h, Pro 8 h, Business 2 h on business days.
- **Q:** Is there a status page for outages?
  **A:** Yes — status.floop.tech. It shows real-time uptime for the dashboard, the AI build pipeline, the deployment hosting layer, and each region of CloudFront. We post incident updates there during outages and a post-mortem within 5 business days for any user-impacting event over 30 minutes. You can subscribe by email or RSS to get notified. The status page is hosted independently of our main infrastructure so it stays up even when we're down.

## Developer Tools

### FloopFloop CLI (`floop`)
URL: https://www.floopfloop.com/en/cli

Cross-platform terminal client for creating and refining projects, managing API keys, uploading attachments, and streaming build status. Pre-built binaries for macOS, Linux, and Windows; source at https://github.com/FloopFloopAI/floop-cli.

**Commands** (run `floop <command> --help` for flags):

- `floop login` — Authorize this device against floopfloop.com (OAuth callback by default; `--device` for headless flow). Writes a token to `~/.floop/config.json` 0600.
- `floop logout` — Revoke the local CLI token and clear it from disk.
- `floop whoami` — Show the user this device is currently authorized as.
- `floop new <prompt>` — Create a new project from a prompt and (by default) stream progress until live. `--no-wait` for scripts, `--subdomain <slug>` to pin.
- `floop list` (alias `ls`) — List your projects. `--json` for scripting.
- `floop status <project>` — Show build status (once or `--watch` for in-place progress).
- `floop cancel <project>` — Cancel an in-flight build.
- `floop reactivate <project>` — Reactivate a previously cancelled project. `--watch` tails the resulting build.
- `floop open <project>` — Open the project's live URL in your default browser.
- `floop chat [<project>]` — REPL: each line refines + streams progress. With no project arg, drops into a numbered picker. Slash commands: `/help`, `/status`, `/open`, `/clear`, `/exit`, `/attach <file>`.
- `floop refine <project> "<message>"` — Non-interactive companion to `chat`. Sends a single refinement and exits. `--watch`, `--code-only`, `--json` flags.
- `floop conversations <project>` (alias `history`) — Print a project's chat history with deployment markers. `--limit N`.
- `floop usage` — Show your plan, credit balance, and current-period usage.
- `floop secrets list|set|rm <project>` — Manage write-only environment variables on a project (values never returned). `set` reads value from `--value`, `--from-env`, or stdin.
- `floop keys list|create|rm` — Manage programmatic API keys (`flp_…`) for CI/CD use — distinct from device tokens. `create` requires Business plan; raw key shown ONCE.
- `floop library list|clone <projectId>` — Browse and clone public projects from the FloopFloop library.
- `floop subdomain check <slug>` — Check whether a subdomain is available; exit 0 if free, 1 if taken.
- `floop subdomain suggest "<prompt>"` — Print an available subdomain derived from a prompt.
- `floop upgrade [--check]` — Replace the floop binary with the latest GitHub Release (SHA256-verified).
- `floop completion <bash|zsh|fish|powershell>` — Print shell completion script for the given shell.
- `floop config get [key] / set <key> <value>` — Read/write `apiUrl` and `telemetry`. (Tokens are not settable via `config` — use `login`/`logout`.)
- `floop docs` / `floop feedback` — Open `/docs/cli` and `/support` in the default browser.

### Official SDKs

Eight first-party SDKs publish against the same `/api/v1/*` surface the CLI consumes. Pick whichever matches your stack — feature parity is enforced across all eight.

- **Node / TypeScript** — `npm install @floopfloop/sdk` · https://www.npmjs.com/package/@floopfloop/sdk · source: https://github.com/FloopFloopAI/floop-node-sdk
- **Python** — `pip install floopfloop` · https://pypi.org/project/floopfloop/ · source: https://github.com/FloopFloopAI/floop-python-sdk
- **Go** — `go get github.com/FloopFloopAI/floop-go-sdk@latest` · source: https://github.com/FloopFloopAI/floop-go-sdk
- **Rust** — `cargo add floopfloop` · https://crates.io/crates/floopfloop · source: https://github.com/FloopFloopAI/floop-rust-sdk
- **Ruby** — `gem install floopfloop` · https://rubygems.org/gems/floopfloop · source: https://github.com/FloopFloopAI/floop-ruby-sdk
- **PHP** — `composer require floopfloop/sdk` · https://packagist.org/packages/floopfloop/sdk · source: https://github.com/FloopFloopAI/floop-php-sdk
- **Swift** — Swift Package Manager via `https://github.com/FloopFloopAI/floop-swift-sdk.git`
- **Kotlin** — JitPack: `com.github.FloopFloopAI:floop-kotlin-sdk` · https://jitpack.io/#FloopFloopAI/floop-kotlin-sdk · source: https://github.com/FloopFloopAI/floop-kotlin-sdk

**Shipped surface** (every resource on every SDK):

- **`projects`** — `create({prompt, subdomain?, isPublic?})`, `list({teamId?})`, `get(ref)`, `status(ref)`, `cancel(ref)`, `reactivate(ref)`, `refine(ref, {message, wait?, codeEditOnly?, attachmentIds?})`, `conversations(ref, {limit?})`, `stream(ref)` (async iterator/generator over status snapshots), `waitForLive(ref)` / `wait_for_live(ref)` (resolves on live, raises on `BUILD_FAILED` / `BUILD_CANCELLED`).
- **`secrets`** — `list(ref)`, `set(ref, key, value)`, `remove(ref, key)`. Write-only — values are never returned.
- **`apiKeys`** (Python: `api_keys`) — `list()`, `create({name})` (raw `flp_…` returned ONCE), `remove(idOrName)`. Business plan required to create.
- **`library`** — `list({botType?, search?, sort?, page?, limit?})`, `clone(projectId, {subdomain})`. Cloning deducts credits before row creation.
- **`subdomains`** — `check(slug)`, `suggest(prompt)`.
- **`uploads`** — `create({fileName, file|content, fileType?})` — server returns a presigned URL; you `PUT` the file directly to S3, then pass the returned `attachmentId` into `projects.refine`.
- **`usage`** — `summary()` — plan, credit balance, current-period stats.
- **`user`** — `me()` — authed user (id, email, role, source=`cli|api_key`).

**Error codes** — all SDKs throw / raise a single `FloopError` with a `.code` from this set (server adds new codes as a pass-through string so callers can handle them without an SDK update):

`VALIDATION_ERROR`, `UNAUTHORIZED`, `FORBIDDEN`, `NOT_FOUND`, `CONFLICT`, `RATE_LIMITED`, `SERVER_ERROR`, `SERVICE_UNAVAILABLE`, `NETWORK_ERROR`, `TIMEOUT`, `BUILD_FAILED`, `BUILD_CANCELLED`, `INSUFFICIENT_CREDITS` (HTTP 402), `PAYMENT_FAILED` (HTTP 500), `UNKNOWN`.

### MCP server (`@floopfloop/mcp`)

Model Context Protocol server that exposes FloopFloop tools to MCP-aware LLM hosts (Claude Desktop, Cursor, Continue, etc.). Install with `npm install -g @floopfloop/mcp`; package: https://www.npmjs.com/package/@floopfloop/mcp · source: https://github.com/FloopFloopAI/floop-mcp

### Agent skills (`floop-skills`)

Anthropic-style markdown skill packs that teach an LLM agent the FloopFloop workflows: `floopfloop-create-project`, `floopfloop-refine-project`, `floopfloop-upload-attachment`, `floopfloop-stream-build-status`, `floopfloop-handle-errors`, `floopfloop-manage-secrets`. Clone https://github.com/FloopFloopAI/floop-skills into `~/.claude/skills/` for Claude Code or follow the README for other hosts.

## Machine-readable endpoints

- XML sitemap — https://www.floopfloop.com/sitemap.xml
- Blog RSS feed — https://www.floopfloop.com/en/feed.xml
- Short LLM index — https://www.floopfloop.com/llms.txt
- Robots policy — https://www.floopfloop.com/robots.txt

## Company

- About: https://www.floopfloop.com/en/about
- Press & Media: https://www.floopfloop.com/en/press
- Pricing: https://www.floopfloop.com/en/pricing
- Support: https://www.floopfloop.com/en/support
- HTML sitemap: https://www.floopfloop.com/en/sitemap