Assalam o Alaikum everyone.
A few weeks ago I got annoyed by something small. Everywhere on the internet, profile pictures are tiny and cropped. You click on them and they either open a blurry thumbnail or nothing happens at all. I just wanted one button: see the full picture in HD, and download it. So I built it.
The app is called Fullscreen DP AI. It is live here:
https://fullscreen-dp-ai--munaseedance.replit.app
And the full source is on GitHub, MIT licensed, so anyone can use it or learn from it:
https://github.com/muneebrahmancmd/fullscreen-dp-ai
This is the story of how I built it, what broke, and the scary mistake I made right before going public.
The problem
Profile pictures on most platforms are small by design. If you want to see someone's DP clearly, you are out of luck. Screenshots are blurry. There was no clean, free tool that did this in one click.
So the goal was simple: open a profile, see the picture fullscreen in full HD, download it. One click.
What I built
Fullscreen DP AI does exactly that. It is a web app. You open it, and it fetches the profile picture in its full resolution, shows it fullscreen, and lets you download the HD version. No app install, no card, no signup needed to try it.
The tech stack
I built it on Replit, because I am a student with no card and Replit's free tier was enough:
- TypeScript on both sides
- Node.js monorepo managed with pnpm
- lowdb for simple JSON storage — honestly, it was all I needed, no database server
- Replit for hosting and deploying
Simple stack, free stack. It works.
Adding Google login — and the Error 400 that ate my evening
I added Google login with Passport (passport-google-oauth20). The login button looked fine. Then I clicked it and got this:
Access blocked: Authorization Error... Error 400: invalid_request
That error stayed on my screen for a whole evening.
Here is what the problem actually was. The app builds its callback URL from an environment variable called APP_URL. In my Replit Secrets, APP_URL was still pointing at the old dev preview URL — one of those long *.sisko.replit.dev addresses. So when the app talked to Google, it sent Google a redirect URI from the dev environment, and Google said no. That is what Error 400 meant: the redirect URI didn't match what Google expected.
The fix had two parts:
- In Replit Secrets, I set
APP_URLto the real live URL — https://fullscreen-dp-ai--munaseedance.replit.app (no trailing slash, that matters). - In Google Cloud Console, in my OAuth client settings, I added the live URL as an Authorized JavaScript origin, and
.../api/auth/google/callbackas an Authorized redirect URI. I didn't delete the old dev URIs, I just added the new ones.
Then I republished the app and the login worked.
One thing nobody told me: Google says new OAuth settings can take anywhere from 5 minutes to a few hours to propagate. So if your fix "doesn't work" immediately, wait before panicking.
The scary lesson: open-sourcing safely
This is the part I am glad I learned the safe way.
When I pushed the repo to GitHub the first time, I accidentally pushed WhatsApp session files and a user database along with the code. Session files. On a public repo. For a few minutes.
Here is what I did, in order:
- Made the repo private within minutes.
- Logged out the WhatsApp session from my phone's Linked Devices so those session files were dead.
- Reset the git history and rebuilt the repo clean, with a hardened
.gitignore. - Scanned everything before making it public again.
The repo is public now and safe. But the real lesson was this: .gitignore does NOT untrack files that are already tracked. If the file is already in git history, adding it to .gitignore does nothing. You have to remove it from tracking and rewrite history. Learn this before it bites you the way it bit me.
What I learned
- How OAuth actually works — not just the tutorial version, but the real redirect-URI dance and why Error 400 happens.
- Secrets management. Your env variables are part of your app. The dev URL and the live URL are not the same thing, and mixing them up breaks login in a confusing way.
- Git history hygiene. Once something is pushed, it's out there. Check before you push, not after.
- You can ship a real, working web app as a student with zero budget and no card. Free stack is enough to start.
What's next
The app works, but it's version one. I want to support more picture sources, make the UI cleaner, and maybe add a public API so other devs can use it. If you have ideas, the repo is open:
https://github.com/muneebrahmancmd/fullscreen-dp-ai
A star would mean a lot. And if you're a student thinking "I can't build real things yet" — you can. I built this between classes.
— Muneeb Rehman
CS Student | Creative Developer | Pakistan 🇵🇰
Portfolio: https://muna-portfolio-2k26.vercel.app
Top comments (0)