GraphCDN design examples

GraphCDN

Sign-in screen where the user authenticates with GitHub, GitLab, or a passwordless email link.

• Sign In

GraphCDN

Signup screen where the user can create an account using GitHub, GitLab, or by entering an email address.

• Sign Up

GraphCDN

Verification screen confirming that a magic login link has been sent to the user's email address.

• Verification

GraphCDN

Onboarding step where the user enters their full name to set up their profile.

• Setup Wizard
• Welcome

GraphCDN

Onboarding step where the user enters their full name to begin account setup.

• Onboarding Checklist
• Profile

GraphCDN

Onboarding step where the user sets up their organization by providing company name, product type, engineering team size, and their title.

• Setup Wizard
• Onboarding Checklist

GraphCDN

Onboarding step where the user sets up their organization by providing company details, product type, engineer count, and their title.

• Setup Wizard
• Account Setup

GraphCDN

Onboarding step where the user chooses whether to activate edge caching and reviews included features before proceeding.

• Setup Wizard
• Add & Create

GraphCDN

Onboarding step where the system displays a loading spinner while creating the user's caching and analytics endpoint.

• Loading
• Onboarding Checklist

GraphCDN

Onboarding step where the user tests their newly deployed GraphCDN service by writing and running a GraphQL query in an embedded IDE.

• AI Chat
• AI Editing

GraphCDN

Demo page where the user tests GraphQL edge caching by executing a sample query in an interactive playground and reviewing the response metadata.

GraphCDN

Analytics dashboard where the user monitors GraphQL API performance, viewing metrics like requests, cache hit rate, latency, and errors over a selected time range.

• Dashboard
• Charts