Writing Work About Newsletter Login
Module 6, Lesson 7: Build the Profile Completion

Module 6, Lesson 7: Build the Profile Completion

11 min read min

How do you build profile completion with avatar upload? Batch profile completion with the related session and push notification issues, then bring in object storage. You stand up a Cloudflare R2 bucket, scope an API token to it, enable public access, and wire presigned uploads for the avatar.

Claude Code implements and tests, flagging a Clerk setting for you to fix. Then you commit, merge, push, and mark it done. The Product Path walks the R2 setup.

How do you handle file uploads like avatars in an app?

You handle file uploads like avatars by adding object storage, in this case a Cloudflare R2 bucket, and wiring presigned uploads into your app so files go straight to the bucket rather than through a storage layer you build yourself.

You generate an API token scoped tightly to that one bucket, and enable public access because the default private URL is not enough to serve an avatar. This is typically the first point in a build where object storage becomes necessary, since basic auth and profile fields do not need it, and it pairs with session management and push notification groundwork in the same batch of work.

Before We Start

From previous lessons:

  • You have working authentication: sign up, sign in with Google SSO, sign out. Module 6, Lesson 6
  • You know the batching pattern by now: group related issues, review as one, ask clarifying questions, confirm the plan, implement, test, commit. Module 6, Lesson 6
  • You already left profile completion out of the authentication batch on purpose, because it's a big enough piece of work to deserve its own video. Module 6, Lesson 6

Tools / setup you'll need:

  • WebStorm, with your backend (API) and mobile frontend modules open
  • Claude Code, with your YouTrack MCP connection active
  • A Cloudflare account, or ready to create one
  • Your .env.local files for the API, ready to receive object storage credentials
  • Your Clerk dashboard, for one small session setting fix

By the end of this lesson, you'll:

  • Have batched three more related issues together: profile completion, session management, and the push notification permission prompt on first login
  • Have stood up a Cloudflare R2 bucket for object storage, and wired presigned uploads into your app
  • Have generated and secured your R2 API credentials, scoped to a single bucket
  • Have corrected a Clerk dashboard session setting that Claude Code flagged during verification
  • Have merged, pushed, and moved this batch to done in YouTrack

Paid members

This content is for Paid Members

Unlock full access to Dele Tosh and see the entire library of members-only content.

Subscribe