Pair Programming with an AI: Debugging Profile Picture Uploads with Claude-3.7

SH: Claude 3.7 didn’t just suggest fixes—it thought, iterated, and rewrote code like a real pair programmer.

In the latest version of our How I Solved It Series, Gowri Shankar  a leading AI expert in the A.Team Network, reveals how he uses Claude as a peer programmer to debug his builds.

I’ve been stuck on a problem for a while now. You know that kind of bug... the one that refuses to budge no matter how many times you rewrite the code, tweak the request payload, or double-check the backend logs. Today, I decided to try something different. Instead of debugging alone, I brought in a peer programmer. Except, this time, my partner wasn’t human. Enter Claude-3.7 Sonnet-Thinking, an AI that didn’t just spit out code snippets but actually worked through the problem like a real collaborator. And trust me, this thing wasn’t just suggesting fixes. It was iterating, making mistakes, correcting them, and even rewriting parts of my backend and frontend in an attempt to solve the issue. For the first time, I felt like I was debugging with an AI, not just using one.

The Problem and the Solution: React Native, FastAPI, and the Mysterious 422/400 Error

This should have been simple.

1. Our React web app uploads profile pictures just fine. 🚀
2. Our React Native (Expo) app? Not so much. ❤️🩹

Every request from React Native hit a 422 validation error, and then, after some tweaks, a 400 error. FastAPI wasn’t happy with what it was receiving, but the same backend endpoint worked perfectly for web uploads.

This is where things got weird. Same API, different clients, different results. That’s the kind of bug that keeps you up at night.

Debugging with Claude-3.7: A Different Kind of Pair Programming

If I were debugging this with a human, we’d be throwing ideas at the wall, trying different things, adding print statements everywhere. Claude-3.7? It did exactly that… except it never got tired, never got frustrated, and never once suggested, “Bro, let’s take a break and grab coffee.”

It started by analyzing the request payloads, comparing what React Web was sending vs. what React Native was sending.

First hypothesis: Maybe React Native isn’t formatting the FormData properly.

It rewrote the frontend upload logic. Still failed.

Next attempt: Could be a CORS issue or a missing header?

Adjusted the headers. Still failed.

Then the “Aha!” moment:

Claude combed through the FastAPI endpoint definition and suddenly suggested:

“Maybe the backend is expecting a different parameter name?”

And there it was.

A Small Change, A Big Difference

1. Changing file to photo

The FastAPI backend expected the field name to be photo, but React Native was sending it as file.

A one-word change in the frontend, and suddenly… Boom! The 400 error disappeared.

2. Handling file uploads properly in React Native

Unlike React Web, where file uploads are straightforward, React Native needed special handling:

1. Constructing FormData the right way
2. Implementing fallback methods in case uploads failed
3. Adding blob-based handling as a last-resort

3. iOS-Specific Fixes

iOS stores assets using ph:// URIs (which cannot be directly uploaded), so we had to:

• Copy the file to a temporary location before upload
• Use platform-specific headers

4. Backend Enhancements

1. Improved logging to track failures better
2. Added file content validation before processing requests
3. Handled HTTP exceptions more gracefully

5. Debugging Like a Pro

To ensure this never happens again, we:

1. Created a debugging endpoint to verify uploaded files
2. Logged detailed request payloads
3. Implemented pre-upload validation to catch errors early

🚀 The final result? File uploads now work smoothly on both React Web and React Native.

The Experience

Déjà Vu: A Flashback to Debugging with Aman

At one point, I paused. This whole experience felt strangely familiar.

It took me back to a late evening, when we were drowning in Sentry logs from a backend issue. jaR was panicked(as usual), and we had no clear leads. Just as I was about to log off, my programming partner Aman pinged me:

“Want to peer debug? Let’s go deep on Backend via Sentry Logs and Application Logger in GCP.”

And so we did. Hours of debugging, testing random theories, going down rabbit holes… until finally, we cracked the issue.

What’s crazy? This session with Claude felt exactly the same.

With Aman, we bounced ideas, shared frustrations, b****ed about everything under the sun and finally celebrated when we figured it out. With Claude? No celebrations, no high-fives… just a quiet resolution to the problem. But the experience was eerily similar.

Claude as a Debugging Partner: What I Learned

This wasn’t just about fixing a file upload issue. It was about how AI is evolving from being a tool to becoming a teammate.

Here’s what I learned:

1. Claude doesn’t just generate code… it iterates, tests, and refines solutions like a human would.
2. It makes mistakes, learns from them, and even rewrites parts of the code dynamically.
3. It doesn’t just give one answer… it explores different approaches until something works.

But AI isn’t perfect. It lacks intuition, creative problem-solving, and the ability to step back and rethink the whole approach. It’s a powerful assistant, but it still needs a human in the loop.

Conclusion

The Future: AI + Humans = The Ultimate Debugging Team

Pair programming with AI feels like a glimpse into the future of software development. Instead of just asking for help, we can now collaborate with AI in real-time… debugging, problem-solving, and even optimizing code together.

What’s next?

1. AI that remembers past debugging sessions and learns from experience.
2. AI that understands business logic, not just code syntax.
3. AI that seamlessly integrates into CI/CD pipelines, automatically debugging issues before they hit production.

For now, Claude-3.7 Sonnet-Thinking gave me one of the best debugging sessions I’ve had in a long time.

Would I pair-program with AI again?

Absolutely.

See the full Article in BuildMode that includes the full array of upload methods →

Gowri Shankar is a leading AI expert in the A.Team Network.

Book a consultation with an AI expert like Gowri here.