We will be undergoing planned maintenance on Oct 7th 6:00AM UTC / Oct 7th 2:00AM ET

Inspiration

I was inspired by how much critical process work still lives in static docs, ad-hoc chat handoffs, and scattered spreadsheets. Teams need something faster than enterprise BPM tools and more reliable than manual checklists—especially for hackathon-speed iteration and early-stage teams. I wanted to bridge the gap: turn a process idea into a runnable workflow in minutes, with AI doing the heavy lifting and humans staying in control where it matters. Sopify is my answer: AI-assisted workflow creation plus structured execution in one system.

What it does

Sopify turns natural-language process descriptions into executable workflows. Users can:

  • Generate a draft workflow from plain English (and optional file attachments) via an AI pipeline with streaming progress.
  • Edit the workflow in a visual drag-and-drop builder—steps, blocks, and conditional routing—with optimistic updates and autosave.
  • Execute workflows with stateful tracking: required inputs, auto-run AI/automation blocks (text, image, video generation), and rule-based step transitions.

The result is a single platform where process idea → editable flow → tracked execution happens without switching tools. Teams get consistency, visibility, and traceability without the setup friction of traditional workflow software.

How I built it

I built Sopify as a Next.js App Router application with React and TypeScript. The stack and approach:

  • Frontend: A block-based workflow model drives the entire UX. The visual builder (WorkflowEditor) uses dnd-kit for step and block drag-and-drop; the AI generation flow uses GenerateWorkflowDialog and a pipeline visualizer for streaming progress. Block components support edit, preview, and execute modes so the same definitions power both authoring and runtime.
  • Backend: Server actions handle workflows, steps, blocks, executions, and AI-driven edits. A dedicated API route streams AI-generated workflow creation with progress events so the UI can show stages in real time.
  • Data: Postgres and Drizzle ORM store workflows, steps, blocks, and executions. I use JSON fields for flexible block content and routing logic so I can add new block types without schema churn.
  • Auth & AI: AWS Amplify provides auth and session context. I integrated AWS Bedrock (Nova for text, Nova Canvas for images, Nova Reel for video) so AI blocks run in-context with variable substitution from prior step and block outputs. Execution logic validates required blocks, supports AI generation blocks, and evaluates conditional routing rules in order with a default fallback—so builders get flexibility and operators get predictable runs.

Challenges I ran into

  • Optimistic UI vs. server truth: Keeping drag-and-drop and in-memory edits snappy while ensuring the persisted workflow stayed the source of truth required careful handling of IDs, refetching, and revalidation so I avoided phantom steps or duplicate blocks.
  • AI generation: Parsing results from the generation endpoint and mapping them to clear pipeline stages (and handling partial or malformed payloads) needed protocol-aware parsing and explicit lifecycle handling so the progress UI stayed accurate and stable.
  • Cross-step drag-and-drop: Making moves across steps and reordering blocks feel intuitive inside nested structures (workflow → steps → blocks) demanded iteration on dnd-kit usage and visual feedback so the builder stayed usable under time pressure.
  • Quality vs. speed: Balancing lint, types, and production build readiness with rapid feature iteration meant investing in small readability and type-safety improvements early so I could ship a demo-ready, judge-friendly codebase without a last-minute crunch.

Accomplishments that I'm proud of

  • Coherent architecture: A flexible block-based system that is easy to extend with new block types and that cleanly separates edit, preview, and execute modes.
  • End-to-end journey: A polished path from AI prompt → generated workflow → visual editing → execution with conditional routing and hybrid manual/AI steps—all working in one session.
  • Real execution and context: Execution state is persisted; AI blocks receive full context from prior steps via human-readable variable tokens (e.g. {{Step Name > Block Name}}), so generated copy and assets stay aligned with user inputs and earlier AI outputs.
  • Production-minded quality: Deterministic IDs in optimistic flows, safer stream parsing, improved null handling, and a passing production build—so Sopify is not just a prototype but maintainable and extensible after the hackathon.

What I learned

  • Streaming UX depends on protocol-aware parsing and explicit lifecycle handling; treating the stream as a first-class protocol (not “just JSON”) made the generation flow reliable and debuggable.
  • Workflow products benefit from rigid structure (workflows → steps → blocks, clear execution state) and flexible content (JSON block content, pluggable block types)—getting that balance right accelerated both feature work and refactors.
  • Small improvements in complex paths—clearer naming in DnD and routing logic, targeted type tightening—had an outsized impact on delivery speed and confidence, and will pay off for anyone who continues the project.

What's next for Sopify

  • Analytics: Time-to-complete, drop-off rates, and bottleneck detection so teams can improve processes based on real usage.
  • Versioning: Workflow versioning and safer migration between versions for evolving SOPs without breaking in-flight runs.
  • Integrations: Deeper automation (email, web automation, external APIs) and more AI providers so Sopify fits into existing toolchains.
  • Collaboration: Team features, role-based controls, and template sharing (including marketplace-style discovery) so Sopify scales from single builders to larger organizations.

I'm aiming to take Sopify from hackathon-ready to production-ready for teams that want one place to design, run, and improve their processes.

Built With

Share this project:

Updates

Submission history