shadow-guideflow

byKartik Pawar

Build a web application called GuideFlow — an interactive guide and product demo tool for SaaS teams that lets non-technical users turn any workflow they perform in a browser into a shareable, step-by-step interactive guide, how-to article, or product demo, without writing code or editing video. Core problem: SaaS companies and internal teams waste hours writing static screenshots-and-text documentation that goes stale the moment the UI changes, and customers/new hires still struggle to follow along because text instructions don't match what they see on screen. GuideFlow solves this by capturing real user actions (clicks, page navigation, form fills) directly from the browser and auto-generating an interactive, click-through guide with annotated screenshots, hotspots, and optional voiceover/text callouts — turning a 5-minute task into a 2-minute guide creation. Target users: Customer support and success teams who need to answer "how do I..." questions once and reuse the answer forever; SaaS onboarding/product teams building self-serve product tours and demo experiences for prospects; internal ops/HR teams documenting SOPs for new hires. They sign up because it replaces manually written help docs and Loom-style videos with something searchable, editable, and embeddable. Build the following MVP feature set as functional requirements: Users can install a browser extension or use an in-app recorder to capture a sequence of screens/clicks on any website, which automatically generates a draft guide with one step per captured screen and an auto-cropped screenshot. Users can edit a generated guide in a step editor: reorder steps, edit step titles/descriptions, add text callouts, arrows, and blur/redact boxes over sensitive info on each screenshot. Users can publish a guide and get a shareable public link, plus an embeddable iframe/JS snippet to drop the guide into their own website or help center. Users can organize guides into folders/collections and control each guide's visibility (private, unlisted link, public). Users can view basic analytics per guide: total views, completion rate, and drop-off step. Users on the free plan are capped at 5 published guides; users can upgrade to a paid plan for unlimited guides via a hosted checkout. Users can invite teammates to a shared workspace so guides are co-owned and editable by the team. Viewers (no login required) can click through a published guide step by step in a clean, distraction-free viewer with a progress indicator. User flow: A visitor lands on the marketing homepage, signs up with email or Google OAuth, and is dropped into an empty workspace dashboard. They click "New Guide," either upload a sequence of screenshots or use the recorder to auto-capture steps while performing the workflow in another tab, then land in the step editor where the captured steps appear as an ordered list with screenshots. They edit titles, add callouts/blur boxes, reorder steps, and click "Publish." Publishing generates a public URL and an embed snippet, both shown on a success screen with copy buttons. The guide now appears in the dashboard's guide list with a view count. The user can return anytime to edit, duplicate, archive, or check analytics for any guide. A separate anonymous viewer opens the public link and clicks "Next"/"Back" through the guide's steps without needing an account. Data model: User: id, name, email, password hash (or OAuth id/provider), avatar_url, created_at, current workspace_id. Workspace: id, name, owner_user_id, plan (free/paid), created_at. Has many Users through WorkspaceMember, has many Guides and Folders. WorkspaceMember: id, workspace_id, user_id, role (admin/editor/viewer), invited_at, joined_at. Folder: id, workspace_id, name, parent_folder_id (nullable, for nesting), created_at. Guide: id, workspace_id, folder_id (nullable), title, description, status (draft/published/archived), visibility (private/unlisted/public), share_slug (unique), created_by_user_id, created_at, updated_at. Step: id, guide_id, order_index, title, description, screenshot_url, callouts (JSON array of {type: text/arrow/blur, x, y, width, height, content}), created_at. GuideView: id, guide_id, viewer_session_id, started_at, last_step_reached, completed_at (nullable) — used for analytics. Subscription: id, workspace_id, stripe_customer_id, stripe_subscription_id, plan, status, current_period_end. Screens/pages needed: Marketing landing page (value prop, pricing, CTA to sign up) — public. Sign up / log in pages (email+password and Google OAuth) — public. Workspace dashboard: list of folders and guides with search, filter by status, "New Guide" button, plan/usage indicator (e.g. "3/5 free guides used"). Guide recorder/upload flow: a modal or page to start a recording session or upload screenshots. Step editor: left panel = ordered step list (drag to reorder), main canvas = selected step's screenshot with callout tools, right panel = step title/description fields. Publish success screen: public link, embed code, visibility toggle. Guide analytics page: views over time chart, completion rate, per-step drop-off. Public guide viewer: full-screen step-through experience, no navigation chrome, "Made with GuideFlow" footer badge. Workspace settings: team members list with invite-by-email and role management, billing/plan page with upgrade button. Account settings: profile info, password/connected accounts. Auth & permissions: Require login for all dashboard/editor/analytics/settings screens; the public guide viewer requires no login. Support email/password and Google OAuth. Model roles at the workspace level — admin (manage billing, members, all guides), editor (create/edit guides), viewer (read-only access to guides and analytics) — and support multiple users per workspace with invite-by-email flows. A user can belong to multiple workspaces and switch between them. Integrations: Stripe for subscription billing and checkout (free vs. paid plan, enforce the 5-guide cap for free plan via a server-side check before allowing publish), an email service (e.g. Resend/SendGrid) for signup verification and team invite emails, and Google OAuth for social login. Image storage for screenshots should use a cloud object store (e.g. S3-compatible bucket) with generated URLs referenced from the Step table. Tech constraints: Build this as a standard modern web app — a React/Next.js frontend, a REST (or equivalent) API backend, and a relational database (Postgres) for all the entities above, with clear separation between the public-facing viewer routes (no auth) and the authenticated dashboard/editor routes. Design the API so the step editor's callout data is stored as structured JSON per step rather than flattened, to keep the canvas editor flexible. Ensure the app is responsive enough for the dashboard and public viewer to work on tablet-sized screens, though the step editor itself can assume desktop use.