[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fgraphcdn":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":37,"examples":52,"showcases":53,"links":338,"dates":372},"\u002Fexamples\u002Fapps\u002Fgraphcdn","detail","apps",true,{"title":9,"description":10,"og_image":11},"GraphCDN design examples - Nicelydone","Explore GraphCDN UI design examples. The GraphQL CDN","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4fb393c5-98dd-4173-867f-7cceb99140a6.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"GraphCDN design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":36},"SaaS app examples",[24],{"title":25,"links":26},"Explore GraphCDN",[27,30,33],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fflows",{"label":34,"to":35},"marketing pages","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fmarketing",[],{"title":38,"slug":39,"description":40,"logo":41,"url":42,"categories":43},"GraphCDN","graphcdn","The GraphQL CDN","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgraphcdn-c61498d9.png","https:\u002F\u002Fgraphcdn.io",[44,48],{"id":45,"title":46,"slug":47},48,"Developer Tools","developer-tools",{"id":49,"title":50,"slug":51},37,"Developer APIs","developer-apis",[],[54,332,335],{"family":55,"examples":56},"screens",[57,82,99,112,144,174,199,218,238,260,278,309],{"uuid":58,"title":59,"description":60,"canonical_path":29,"image":11,"width":61,"height":62,"image_alt":63,"kind":64,"patterns":65,"component_categories":75,"app":80},"4fb393c5-98dd-4173-867f-7cceb99140a6","Login – GraphCDN","Sign-in screen where the user authenticates with GitHub, GitLab, or a passwordless email link.",3072,1724,"Login – GraphCDN from GraphCDN","screen",[66],{"id":67,"label":68,"slug":69,"rank":70,"group":71},4,"Sign In","sign-in",0,{"id":72,"label":73,"slug":74},1,"Access & Account","access-and-account",[76],{"id":77,"title":78,"slug":79},175,"Button","button",{"slug":39,"title":38,"logo":41,"categories":81},[],{"uuid":83,"title":84,"description":85,"canonical_path":29,"image":86,"width":61,"height":87,"image_alt":88,"kind":64,"patterns":89,"component_categories":95,"app":97},"b49a7fb4-af77-4a55-80e3-6dca4e38341d","Signup – GraphCDN","Signup screen where the user can create an account using GitHub, GitLab, or by entering an email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb49a7fb4-af77-4a55-80e3-6dca4e38341d.png",2018,"Signup – GraphCDN from GraphCDN",[90],{"id":91,"label":92,"slug":93,"rank":70,"group":94},5,"Sign Up","sign-up",{"id":72,"label":73,"slug":74},[96],{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":98},[],{"uuid":100,"title":59,"description":101,"canonical_path":29,"image":102,"width":61,"height":62,"image_alt":63,"kind":64,"patterns":103,"component_categories":109,"app":110},"36a57f19-d004-476d-95b8-3e9776f3cdbc","Verification screen confirming that a magic login link has been sent to the user's email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F36a57f19-d004-476d-95b8-3e9776f3cdbc.png",[104],{"id":105,"label":106,"slug":107,"rank":70,"group":108},6,"Verification","verification",{"id":72,"label":73,"slug":74},[],{"slug":39,"title":38,"logo":41,"categories":111},[],{"uuid":113,"title":114,"description":115,"canonical_path":29,"image":116,"width":61,"height":62,"image_alt":117,"kind":64,"patterns":118,"component_categories":132,"app":142},"ce7e53dd-6cd2-414e-87d8-d7f9094f8d07","GraphCDN - The GraphQL CDN","Onboarding step where the user enters their full name to set up their profile.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fce7e53dd-6cd2-414e-87d8-d7f9094f8d07.png","GraphCDN - The GraphQL CDN from GraphCDN",[119,127],{"id":120,"label":121,"slug":122,"rank":70,"group":123},75,"Setup Wizard","setup-wizard",{"id":124,"label":125,"slug":126},7,"Onboarding & Education","onboarding-and-education",{"id":128,"label":129,"slug":130,"rank":72,"group":131},77,"Welcome","welcome",{"id":124,"label":125,"slug":126},[133,137,141],{"id":134,"title":135,"slug":136},227,"Stepper","stepper",{"id":138,"title":139,"slug":140},174,"Card","card",{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":143},[],{"uuid":145,"title":114,"description":146,"canonical_path":29,"image":147,"width":61,"height":62,"image_alt":117,"kind":64,"patterns":148,"component_categories":168,"app":172},"b6025a05-b3ac-48ab-a710-174479be2dd3","Onboarding step where the user enters their full name to begin account setup.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb6025a05-b3ac-48ab-a710-174479be2dd3.png",[149,154,162],{"id":150,"label":151,"slug":152,"rank":70,"group":153},74,"Onboarding Checklist","onboarding-checklist",{"id":124,"label":125,"slug":126},{"id":155,"label":156,"slug":157,"rank":72,"group":158},3,"Profile","profile",{"id":159,"label":160,"slug":161},11,"Social & Collaboration","social-and-collaboration",{"id":163,"label":164,"slug":165,"rank":166,"group":167},72,"Getting Started","getting-started",2,{"id":124,"label":125,"slug":126},[169,170,171],{"id":134,"title":135,"slug":136},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":173},[],{"uuid":175,"title":176,"description":177,"canonical_path":29,"image":178,"width":61,"height":179,"image_alt":180,"kind":64,"patterns":181,"component_categories":193,"app":197},"cf7b5d87-59e7-422e-9f09-d7efb3775605","Welcome to GraphCDN!","Onboarding step where the user sets up their organization by providing company name, product type, engineering team size, and their title.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcf7b5d87-59e7-422e-9f09-d7efb3775605.png",3266,"Welcome to GraphCDN! from GraphCDN",[182,184,186],{"id":120,"label":121,"slug":122,"rank":70,"group":183},{"id":124,"label":125,"slug":126},{"id":150,"label":151,"slug":152,"rank":72,"group":185},{"id":124,"label":125,"slug":126},{"id":187,"label":188,"slug":189,"rank":166,"group":190},42,"Form","form",{"id":67,"label":191,"slug":192},"Data & Analysis","data-and-analysis",[194,195,196],{"id":134,"title":135,"slug":136},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":198},[],{"uuid":200,"title":176,"description":201,"canonical_path":29,"image":202,"width":61,"height":179,"image_alt":180,"kind":64,"patterns":203,"component_categories":212,"app":216},"ece21be4-83d9-4d44-9a25-dd3dc76e6d5a","Onboarding step where the user sets up their organization by providing company details, product type, engineer count, and their title.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fece21be4-83d9-4d44-9a25-dd3dc76e6d5a.png",[204,206,210],{"id":120,"label":121,"slug":122,"rank":70,"group":205},{"id":124,"label":125,"slug":126},{"id":72,"label":207,"slug":208,"rank":72,"group":209},"Account Setup","account-setup",{"id":72,"label":73,"slug":74},{"id":187,"label":188,"slug":189,"rank":166,"group":211},{"id":67,"label":191,"slug":192},[213,214,215],{"id":134,"title":135,"slug":136},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":217},[],{"uuid":219,"title":114,"description":220,"canonical_path":29,"image":221,"width":61,"height":222,"image_alt":117,"kind":64,"patterns":223,"component_categories":232,"app":236},"57c41348-88bb-49b9-85dd-c26e7bf8d714","Onboarding step where the user chooses whether to activate edge caching and reviews included features before proceeding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F57c41348-88bb-49b9-85dd-c26e7bf8d714.png",3454,[224,226],{"id":120,"label":121,"slug":122,"rank":70,"group":225},{"id":124,"label":125,"slug":126},{"id":124,"label":227,"slug":228,"rank":72,"group":229},"Add & Create","add-and-create",{"id":166,"label":230,"slug":231},"Actions","actions",[233,234,235],{"id":134,"title":135,"slug":136},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":237},[],{"uuid":239,"title":114,"description":240,"canonical_path":29,"image":241,"width":61,"height":242,"image_alt":117,"kind":64,"patterns":243,"component_categories":250,"app":258},"5c3e57fe-cadd-4864-8e81-658818c5eaa7","Onboarding step where the user enters their GraphQL API URL to configure their endpoint, with an option to skip and use demo data.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5c3e57fe-cadd-4864-8e81-658818c5eaa7.png",2902,[244,246,248],{"id":120,"label":121,"slug":122,"rank":70,"group":245},{"id":124,"label":125,"slug":126},{"id":72,"label":207,"slug":208,"rank":72,"group":247},{"id":72,"label":73,"slug":74},{"id":124,"label":227,"slug":228,"rank":166,"group":249},{"id":166,"label":230,"slug":231},[251,255,256,257],{"id":252,"title":253,"slug":254},240,"Horizontal navigation","horizontal-navigation",{"id":134,"title":135,"slug":136},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":259},[],{"uuid":261,"title":114,"description":262,"canonical_path":29,"image":263,"width":61,"height":62,"image_alt":117,"kind":64,"patterns":264,"component_categories":275,"app":276},"74440b8f-b94e-4dd2-b7e0-377a5e2411ab","Onboarding step where the system displays a loading spinner while creating the user's caching and analytics endpoint.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F74440b8f-b94e-4dd2-b7e0-377a5e2411ab.png",[265,273],{"id":266,"label":267,"slug":268,"rank":70,"group":269},120,"Loading","loading",{"id":270,"label":271,"slug":272},12,"States & Feedback","states-and-feedback",{"id":150,"label":151,"slug":152,"rank":72,"group":274},{"id":124,"label":125,"slug":126},[],{"slug":39,"title":38,"logo":41,"categories":277},[],{"uuid":279,"title":280,"description":281,"canonical_path":29,"image":282,"width":61,"height":283,"image_alt":284,"kind":64,"patterns":285,"component_categories":300,"app":307},"b7b6b7e0-05c7-48f1-bb31-afd0c0616d8e","Try out the caching","Onboarding step where the user tests their newly deployed GraphCDN service by writing and running a GraphQL query in an embedded IDE.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb7b6b7e0-05c7-48f1-bb31-afd0c0616d8e.png",3690,"Try out the caching from GraphCDN",[286,293,298],{"id":287,"label":288,"slug":289,"rank":70,"group":290},28,"AI Chat","ai-chat",{"id":155,"label":291,"slug":292},"AI","ai",{"id":294,"label":295,"slug":296,"rank":72,"group":297},29,"AI Editing","ai-editing",{"id":155,"label":291,"slug":292},{"id":163,"label":164,"slug":165,"rank":166,"group":299},{"id":124,"label":125,"slug":126},[301,302,306],{"id":252,"title":253,"slug":254},{"id":303,"title":304,"slug":305},233,"Tabs","tabs",{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":308},[],{"uuid":310,"title":280,"description":311,"canonical_path":29,"image":312,"width":61,"height":283,"image_alt":284,"kind":64,"patterns":313,"component_categories":322,"app":330},"0e28c445-edeb-4a2c-9c34-fb8417c7810e","Demo page where the user tests GraphQL edge caching by executing a sample query in an interactive playground and reviewing the response metadata.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0e28c445-edeb-4a2c-9c34-fb8417c7810e.png",[314],{"id":315,"label":316,"slug":317,"rank":70,"group":318},145,"Demo Page","demo-page",{"id":319,"label":320,"slug":321},15,"Marketing Page Types","marketing-page-types",[323,327,328,329],{"id":324,"title":325,"slug":326},202,"Footer","footer",{"id":303,"title":304,"slug":305},{"id":138,"title":139,"slug":140},{"id":77,"title":78,"slug":79},{"slug":39,"title":38,"logo":41,"categories":331},[],{"family":333,"examples":334},"flows",[],{"family":336,"examples":337},"pages",[],[339,341,343,345,348,351,354,356,360,364,368],{"label":340,"to":29},"GraphCDN product screens",{"label":342,"to":35},"GraphCDN marketing pages",{"label":344,"to":32},"GraphCDN user flows",{"label":346,"to":347},"GraphCDN UI components","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fcomponents",{"label":349,"to":350},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":352,"to":353},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":355,"to":18},"All SaaS app examples",{"label":357,"to":358,"description":359},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":361,"to":362,"description":363},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":365,"to":366,"description":367},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":369,"to":370,"description":371},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":373,"updated_at":374},"2022-04-10T17:35:58.000Z","2026-09-13T13:02:39.000Z"]