GitScribe case study | Shervin Babaei

How a request flows

React + Chakra UITypeScript front end
Auth0GitHub connection
FastAPIUpload and compare endpoint
OpenAI + RedisGeneration, cached messages

Why

Writing a clear commit message is a small task people rush. GitScribe takes the before and after of a change and suggests one.

What I built

01
Built the sign-in card, navigation bar, and profile layout from the team’s Figma designs.
02
Passed Auth0’s connection option so “Continue with GitHub” goes straight to GitHub instead of stopping at Auth0’s choose-a-provider screen, one fewer screen between a visitor and the app.
03
Kept the front end merging cleanly in a shared repo with several teammates pushing during a 24-hour sprint.

The code

src/components/LoginpageCard.tsxView on GitHub

const LoginPageCard = () => {
  const { loginWithRedirect } = useAuth0();

  return (
    <div style={cardStyle}>
      <h1>GitScribe</h1>
      <p>Please sign in with your GitHub account to continue.</p>
      <button
        onClick={() =>
          loginWithRedirect({ authorizationParams: { connection: "github" } })
        }
      >
        Continue with GitHub
      </button>
    </div>
  );
};

Naming the connection skips Auth0’s provider picker and sends people straight to GitHub.

Outcome

A working demo, live today, that signs you in with GitHub and turns two file versions into a suggested commit message. The team placed in the top 6 of 36.

The trade-off

We used Auth0’s GitHub connection instead of writing our own OAuth flow. Auth0 handled tokens, refresh, and session storage, which we could not have built safely in 24 hours. The cost is a third-party dependency and less control over the redirect and the look of the sign-in step.

What I learned

In a 24-hour build, the useful contribution is often removing friction at the edges, like the first screen someone sees, so the core feature gets used.

What I'd fix next

Replace the hotlinked GitHub logo with a local SVG, move the inline styles into the component stylesheet, and add a loading state while the suggestion is generated.