[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmocha\u002Fflows":3,"content-store-meta":-1,"i-custom:bookmark":268},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":245,"links":246,"dates":265},"\u002Fexamples\u002Fapps\u002Fmocha\u002Fflows","detail","flows",true,{"title":9,"description":10,"og_image":11},"Mocha user flows examples - Nicelydone","Explore Mocha user flow examples. Preview the opening screens and steps for each task. Create beautiful websites with words, not code","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F07427af2-bc5e-4525-b606-9629ed852575.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Mocha design examples","\u002Fexamples\u002Fapps\u002Fmocha",{"label":23,"to":4},"Mocha user flows examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"categories":34},"Mocha","mocha","Create beautiful websites with words, not code","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd9d4dea4-3f03-4b97-b9a1-d776442fd100.png","https:\u002F\u002Fgetmocha.com",[35,39,43],{"id":36,"title":37,"slug":38},7,"Web Development","web-development",{"id":40,"title":41,"slug":42},80,"Artificial Intelligence","artificial-intelligence",{"id":44,"title":45,"slug":46},96,"No code","no-code",[48,72,84,108,127,146,164,182,204,227],{"uuid":49,"title":50,"canonical_path":4,"kind":51,"patterns_count":52,"categories":53,"screens":57,"app":71},"bb3c668b-d3a3-43fa-beb8-97e3ebb29818","Onboarding","flow",24,[54],{"id":55,"title":50,"slug":56},45,"onboarding",[58,65,68],{"uuid":59,"title":60,"description":61,"image":11,"image_alt":62,"width":63,"height":64},"07427af2-bc5e-4525-b606-9629ed852575","Mocha: AI-Powered No‑Code App Builder for Entrepreneurs","Account creation","Mocha: AI-Powered No‑Code App Builder for Entrepreneurs from Mocha",3024,1776,{"uuid":66,"title":60,"description":61,"image":67,"image_alt":62,"width":63,"height":64},"0ca06fe8-10aa-4200-b746-538936577e52","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0ca06fe8-10aa-4200-b746-538936577e52.png",{"uuid":69,"title":60,"description":61,"image":70,"image_alt":62,"width":63,"height":64},"4f05c88b-e408-4d91-a360-44290c897fa4","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4f05c88b-e408-4d91-a360-44290c897fa4.png",{"slug":30,"title":29,"logo":32},{"uuid":73,"title":74,"canonical_path":4,"kind":51,"patterns_count":36,"categories":75,"screens":79,"app":83},"ba1c94ae-ac18-4556-8790-3db79ec2d9f3","Signing up",[76],{"id":77,"title":74,"slug":78},103,"signing-up",[80,81,82],{"uuid":59,"title":60,"description":61,"image":11,"image_alt":62,"width":63,"height":64},{"uuid":66,"title":60,"description":61,"image":67,"image_alt":62,"width":63,"height":64},{"uuid":69,"title":60,"description":61,"image":70,"image_alt":62,"width":63,"height":64},{"slug":30,"title":29,"logo":32},{"uuid":85,"title":86,"canonical_path":4,"kind":51,"patterns_count":87,"categories":88,"screens":93,"app":107},"220e4e2d-cf53-4b3a-8b71-aeec59577ef7","Creating app with AI",11,[89],{"id":90,"title":91,"slug":92},28,"Creating","create",[94,99,103],{"uuid":95,"title":29,"description":96,"image":97,"image_alt":98,"width":63,"height":64},"983cd6cf-0be8-4d18-bacc-1cfeafb210a5","Empty apps dashboard where the user creates their first Mocha app, showing an apps table with Name, Status, and Visibility columns and no records yet.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F983cd6cf-0be8-4d18-bacc-1cfeafb210a5.png","Mocha from Mocha",{"uuid":100,"title":29,"description":101,"image":102,"image_alt":98,"width":63,"height":64},"d72f7d41-6a0b-402d-92df-6b63e8256371","Full-screen prompt overlay where the user describes an app idea in natural language for an AI builder to generate, with shortcuts to inspiration, templates, and prompting guidance.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd72f7d41-6a0b-402d-92df-6b63e8256371.png",{"uuid":104,"title":29,"description":105,"image":106,"image_alt":98,"width":63,"height":64},"41d59a80-5561-4cfc-820e-c0b34319d645","Full-screen prompt surface where the user describes the app to build and picks between MAX and Standard AI models before generating.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F41d59a80-5561-4cfc-820e-c0b34319d645.png",{"slug":30,"title":29,"logo":32},{"uuid":109,"title":110,"canonical_path":4,"kind":51,"patterns_count":111,"categories":112,"screens":113,"app":126},"e13d0fd2-3960-424a-9390-d74832283c3b","Previewing built app",12,[],[114,118,122],{"uuid":115,"title":29,"description":116,"image":117,"image_alt":98,"width":63,"height":64},"e5e30060-8a05-41d9-b60f-9226aac4050e","SaaS onboarding","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe5e30060-8a05-41d9-b60f-9226aac4050e.png",{"uuid":119,"title":29,"description":120,"image":121,"image_alt":98,"width":63,"height":64},"e9f6e660-d961-49cd-b459-1489fc4ee108","AI app builder workspace where the user refines a generated Clarity Tasks todo app through chat and answers a follow-up prompt about adding a database next, while previewing the live app beside the conversation.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe9f6e660-d961-49cd-b459-1489fc4ee108.png",{"uuid":123,"title":29,"description":124,"image":125,"image_alt":98,"width":63,"height":64},"2847b605-803f-416b-ab06-130f65d03aaa","AI app builder where the user chats with the assistant to generate a Clarity Tasks todo app, with the live preview shown alongside the build conversation.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2847b605-803f-416b-ab06-130f65d03aaa.png",{"slug":30,"title":29,"logo":32},{"uuid":128,"title":129,"canonical_path":4,"kind":51,"patterns_count":130,"categories":131,"screens":132,"app":145},"afa8142d-b6a6-4e4d-9cf1-e887d24c3415","Using app builder",6,[],[133,137,141],{"uuid":134,"title":29,"description":135,"image":136,"image_alt":98,"width":63,"height":64},"d8a82348-0f44-4091-963f-530e4994c470","App builder workspace where the user prompts an AI to generate or modify a web app, with an empty preview canvas awaiting the first build instruction.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd8a82348-0f44-4091-963f-530e4994c470.png",{"uuid":138,"title":29,"description":139,"image":140,"image_alt":98,"width":63,"height":64},"14d25ccb-4d3e-4572-b270-0a0e09f63c65","No-code builder workspace with an empty canvas where the user starts constructing a page for the Clarity Tasks project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F14d25ccb-4d3e-4572-b270-0a0e09f63c65.png",{"uuid":142,"title":29,"description":143,"image":144,"image_alt":98,"width":63,"height":64},"5ac1d046-425c-4ed5-92a8-6a4650821f81","AI app builder chat where the user iterates on a grayscale todo app called Clarity Tasks, with the project dropdown open showing Rename, Duplicate, Download code, Debug, and Delete options.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5ac1d046-425c-4ed5-92a8-6a4650821f81.png",{"slug":30,"title":29,"logo":32},{"uuid":147,"title":148,"canonical_path":4,"kind":51,"patterns_count":149,"categories":150,"screens":151,"app":163},"be82e68c-74d2-43e5-a808-37d685fa5b62","Exploring data management",8,[],[152,156,160],{"uuid":153,"title":29,"description":154,"image":155,"image_alt":98,"width":63,"height":64},"03a70921-c5b6-45e2-b1a6-d0251771816b","Project settings page where the user edits a Clarity Tasks app's description, visibility, watermark, and share-preview card before publishing.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F03a70921-c5b6-45e2-b1a6-d0251771816b.png",{"uuid":157,"title":29,"description":158,"image":159,"image_alt":98,"width":63,"height":64},"f2c8c5a7-8c83-4abe-9f50-8769872a4836","Database management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff2c8c5a7-8c83-4abe-9f50-8769872a4836.png",{"uuid":161,"title":29,"description":158,"image":162,"image_alt":98,"width":63,"height":64},"8c78d253-c6ba-406b-ad95-7ee615accc15","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8c78d253-c6ba-406b-ad95-7ee615accc15.png",{"slug":30,"title":29,"logo":32},{"uuid":165,"title":166,"canonical_path":4,"kind":51,"patterns_count":36,"categories":167,"screens":168,"app":181},"4441a27c-5d1e-49cd-9cbc-bdbae7367a03","Publishing app",[],[169,173,177],{"uuid":170,"title":29,"description":171,"image":172,"image_alt":98,"width":63,"height":64},"014adef3-347a-40a6-a3c5-51fba0ac9844","Project settings page where the user configures the app's name, description, size, visibility, and watermark for a published task-manager project called Clarity Tasks.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F014adef3-347a-40a6-a3c5-51fba0ac9844.png",{"uuid":174,"title":29,"description":175,"image":176,"image_alt":98,"width":63,"height":64},"c0583cc1-b9dc-483a-b4c4-92e6ea6ccfff","Feature-gate paywall modal prompting the user to upgrade to Bronze, Silver, or Gold to unlock custom domains, watermark removal, higher app limits, and private apps.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc0583cc1-b9dc-483a-b4c4-92e6ea6ccfff.png",{"uuid":178,"title":29,"description":179,"image":180,"image_alt":98,"width":63,"height":64},"f24c5675-976d-44e5-a340-ee5d62160cb5","Project settings page where the user edits the Clarity Tasks app's name, description, visibility, watermark, and share-preview card.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff24c5675-976d-44e5-a340-ee5d62160cb5.png",{"slug":30,"title":29,"logo":32},{"uuid":183,"title":184,"canonical_path":4,"kind":51,"patterns_count":130,"categories":185,"screens":190,"app":203},"0ee89bfb-988f-4d13-8a48-b9b635bbba19","Configuring project settings",[186],{"id":187,"title":188,"slug":189},71,"Settings","settings",[191,195,199],{"uuid":192,"title":29,"description":193,"image":194,"image_alt":98,"width":63,"height":64},"88d795b2-1cfb-45f0-b8f4-3ae67aac19ec","File upload","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F88d795b2-1cfb-45f0-b8f4-3ae67aac19ec.png",{"uuid":196,"title":29,"description":197,"image":198,"image_alt":98,"width":63,"height":64},"4889256c-2523-4eca-9df8-168ca42dc912","Project settings page where the user adds encrypted API keys and secret tokens by entering a key name and value to be used by their app.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4889256c-2523-4eca-9df8-168ca42dc912.png",{"uuid":200,"title":29,"description":201,"image":202,"image_alt":98,"width":63,"height":64},"20076023-a965-49db-8f23-8b8f1ec1bd6a","Settings page where the user configures global knowledge instructions for the AI assistant, such as writing style preferences, company terminology, and guidelines the AI should always remember.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F20076023-a965-49db-8f23-8b8f1ec1bd6a.png",{"slug":30,"title":29,"logo":32},{"uuid":205,"title":206,"canonical_path":4,"kind":51,"patterns_count":207,"categories":208,"screens":213,"app":226},"a8902253-8457-470f-8659-54a694de74ab","Following builder product tour",9,[209],{"id":210,"title":211,"slug":212},17,"Following product tour","follow-product-tour",[214,218,222],{"uuid":215,"title":29,"description":216,"image":217,"image_alt":98,"width":63,"height":64},"575f1dbf-94db-4ad4-a277-f036a73e7d8f","AI app builder view where the user prompts an agent to design a chat application while a product tour card previews how to publish the generated app.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F575f1dbf-94db-4ad4-a277-f036a73e7d8f.png",{"uuid":219,"title":29,"description":220,"image":221,"image_alt":98,"width":63,"height":64},"fe5f0a85-45e2-4005-aee7-84fdbad619ea","AI app-builder canvas where the user prompts an AI to design a chat application while a product tour highlights how to publish the finished app.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffe5f0a85-45e2-4005-aee7-84fdbad619ea.png",{"uuid":223,"title":29,"description":224,"image":225,"image_alt":98,"width":63,"height":64},"10093b70-61cb-4825-8826-e95ff8f3cd44","AI app builder workspace where the user prompts to generate a chat application interface and iterates on a live preview while blocked by zero remaining credits.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F10093b70-61cb-4825-8826-e95ff8f3cd44.png",{"slug":30,"title":29,"logo":32},{"uuid":228,"title":229,"canonical_path":4,"kind":51,"patterns_count":130,"categories":230,"screens":231,"app":244},"39211e88-f5bb-4e92-bc09-639aa0aea665","Exploring platform capabilities",[],[232,236,240],{"uuid":233,"title":29,"description":234,"image":235,"image_alt":98,"width":63,"height":64},"2f6efb04-e236-44a3-880a-db490143cc26","AI app builder where the user prompts a chat panel on the left to generate an app, with a live preview canvas on the right currently showing a loading state.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2f6efb04-e236-44a3-880a-db490143cc26.png",{"uuid":237,"title":29,"description":238,"image":239,"image_alt":98,"width":63,"height":64},"ba1dda42-5960-4b9c-a9cf-3ad0dc3e5c83","AI app builder where the user iterates on a generated app — a modern chat application with conversation list, message bubbles, emoji reactions, and file attachments — while the preview loads with inspirational tips like \"Forget stock photos\".","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fba1dda42-5960-4b9c-a9cf-3ad0dc3e5c83.png",{"uuid":241,"title":29,"description":242,"image":243,"image_alt":98,"width":63,"height":64},"7c20401c-fb65-4acd-8c23-57266ffe2bea","AI app builder where the user prompts to generate a chat application interface while a mode-picker card showcases the Discuss Mode for planning complex features.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7c20401c-fb65-4acd-8c23-57266ffe2bea.png",{"slug":30,"title":29,"logo":32},[],[247,250,253,256,259,262],{"label":248,"to":249},"Mocha product screens","\u002Fexamples\u002Fapps\u002Fmocha\u002Fscreens",{"label":251,"to":252},"Mocha marketing pages","\u002Fexamples\u002Fapps\u002Fmocha\u002Fmarketing",{"label":254,"to":255},"Mocha UI components","\u002Fexamples\u002Fapps\u002Fmocha\u002Fcomponents",{"label":257,"to":258},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":260,"to":261},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":263,"to":264},"No code app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fno-code",{"published_at":266,"updated_at":267},"2026-04-10T18:47:25.000Z","2026-09-13T13:44:12.000Z",{"left":269,"top":269,"width":270,"height":270,"rotate":269,"vFlip":271,"hFlip":271,"body":272},0,20,false,"\u003Cg fill=\"none\">\u003Cpath d=\"M9.7334 2.41699H10.2666C11.3987 2.41699 12.2028 2.41737 12.832 2.46875C13.4526 2.51945 13.8371 2.61637 14.1416 2.77148C14.7531 3.08307 15.2509 3.57988 15.5625 4.19141C15.7176 4.49587 15.8136 4.88039 15.8643 5.50098C15.9157 6.13035 15.916 6.93496 15.916 8.06738V15.1338C15.916 15.6634 15.9153 16.0086 15.8926 16.2578C15.879 16.4067 15.8598 16.4744 15.8525 16.4971C15.8095 16.5461 15.7506 16.576 15.6855 16.5811C15.6634 16.5734 15.5976 16.5486 15.4697 16.4697C15.2568 16.3384 14.9804 16.1313 14.5566 15.8135L11.4102 13.4541C11.1193 13.236 10.8105 12.9878 10.4453 12.8916C10.1533 12.8147 9.84573 12.8147 9.55371 12.8916C9.18862 12.9879 8.88057 13.2361 8.58984 13.4541L5.44336 15.8135C5.01942 16.1314 4.74231 16.3384 4.5293 16.4697C4.40092 16.5489 4.33537 16.5735 4.31348 16.5811C4.24875 16.5759 4.18941 16.5468 4.14648 16.498C4.13942 16.4762 4.12019 16.4085 4.10645 16.2578C4.08375 16.0086 4.08301 15.6634 4.08301 15.1338V8.06738C4.08301 6.93498 4.08335 6.13034 4.13477 5.50098C4.18547 4.88035 4.28236 4.49588 4.4375 4.19141C4.74906 3.58004 5.24605 3.08305 5.85742 2.77148C6.16189 2.61635 6.54637 2.51946 7.16699 2.46875C7.79636 2.41734 8.60099 2.41699 9.7334 2.41699Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\u002F>\u003C\u002Fg>"]