Full Stack Engineering - CaptchaGrind App

🧠 Building CaptchaGrind: My First Full A-Z Gamified Web App Deployment

“From vision to launch: this is the story of how I built CaptchaGrind, a real-time gamified captcha-solving platform — and my first full-stack deployment from scratch.”

🌱 The Vision: Turning Friction into Flow

CaptchaGrind was born from a simple question:

What if solving captchas wasn’t just a nuisance… but a game?

As an AI engineer and developer focused on gamification, automation, and system design, I wanted to explore the intersection between human verification and micro-engagement — not just solving captchas, but competing to solve them faster, better, and smarter.

CaptchaGrind aims to:

✅ Gamify a tedious daily task (captcha solving)
✅ Provide reward logic, streaks, leaderboards, and point systems
✅ Showcase integrations with multiple captcha providers
✅ Operate without requiring user login
✅ Be scalable, modular, and extensible across captcha vendors

🧱 Tech Stack Overview

🧠 Architecture Diagram

A full system flow showing frontend logic, API routes, captcha verification, point system, database writes, and leaderboard fetch.

The architecture diagram above illustrates the full-stack flow of the CaptchaGrind application, from frontend interaction to backend validation. At the core is a dynamic React-based UI hosted on the Base44 platform, allowing users to solve captchas in a gamified interface. The application communicates with multiple third-party CAPTCHA providers—hCaptcha, Geetest, and Google reCAPTCHA—via a modular backend layer powered by Base44 Cloud Functions. These functions securely handle token validation and point allocation using environment-protected API keys. User authentication and data (such as scores, streaks, and session history) are managed through Base44’s built-in Auth and Firestore-based entity system. The frontend and backend remain decoupled but synchronized via REST-like function calls, allowing for a responsive, secure, and scalable experience—all deployable serverlessly with minimal ops overhead.

🖼️ UI/UX: Clean, Responsive, & Engaging

Built using React + Tailwind for rapid responsive UI
Shadcn/ui components for accessible and theme-able building blocks
Dark mode/light mode toggle, streak tracking, score decay meter
Dynamically load each captcha provider via toggle buttons

📸 [INSERT Screenshot of Captcha Widget Game View]
📸 [INSERT Screenshot of Leaderboard and Profile Page]

🧩 Modular Captcha Integration (hCaptcha, Geetest, reCAPTCHA)

CaptchaGrind supports dynamic switching between providers at runtime:

🔁 Uses a captchaProvider state with toggle buttons
🧹 Performs aggressive DOM cleanup to remove prior widget remnants
📜 Removes <script> tags and iframe elements before loading new one
🔑 Supports 3rd-party site keys and secrets via secure environment vars

📎 See: switchProvider() logic in Dashboard.js

verifyCaptcha.js verfication code snippet

🔐 Secure Backend Verification (Deno + Base44 Functions)

Each captcha is verified securely server-to-server with the provider’s API using Base44 cloud functions.

Key Functions:

verifyCaptcha.js — handles POST token verification across all providers
initGeetest.js — returns captcha ID and challenge params for Geetest v4
getRecaptchaSitekey.js — securely sends public site key to frontend
debugEnv.js — custom function for logging ENV issues during Geetest errors

🔐 Authentication vs Guest Mode

CaptchaGrind supports both:

👤 Guest Mode: No login required, stores streaks/points locally via localStorage
🔐 Auth Mode: Google login via Base44/Firebase, persistent user profiles and leaderboard participation

Game Session Storage Code Snippet

🧮 Entity Design: Users, Sessions & Points

Base44 Entity Models used:

User.json: points, current_streak, best_streak, total_solved, is_premium
GameSession.json: Captures each round's results — used for stats and history tracking

🧪 The Challenge: Multi-Captcha Cleanup Hell

The hardest technical problem?

Cross-provider widget interference.

Each provider (hCaptcha, Geetest, Google reCAPTCHA):

Injects global scripts (window.hcaptcha, window.grecaptcha)
Attaches DOM elements that persist even after component unmount
Can cause visual/functional bugs when switching mid-session

🔧 Solution:

delete window.hcaptcha etc on switch
Remove iframes, scripts, and lingering container nodes
Force React re-render with unique keys
Add delay before initializing next widget

⚙️ Deployment Flow

✅ GitHub repo sync to Base44
✅ Frontend and Backend managed via Base44’s Web IDE
✅ Domain and DNS setup via GreenGeeks WHM + Cloudflare
✅ Site Key/Secret Key stored via Base44 Secrets panel
✅ Live deployment pushed through Base44 to production

🧠 Lessons Learned

✅ Real-world API debugging with Geetest’s v4 config errors (-50103)
✅ Security best practices with server-only key access
✅ True A-Z deployment from concept → code → production
✅ Working with third-party services and graceful fallbacks
✅ Gamification mechanics with psychologically engaging design

🚀 What's Next?

Here’s how I plan to expand CaptchaGrind:

Add more game modes (e.g. speed runs, captcha boss battles)
AI difficulty curves (adaptive based on user skill)
Monetization via premium themes or ad-free play
NFT-backed unlockables, crypto rewards (Phase 2)
Mobile-first version for iOS/Android via React Native or Expo

🏁 Conclusion: My Developer Milestone

CaptchaGrind marks my first fully self-directed full-stack deployment of a real-world SaaS-style app.

It blends UI design, backend engineering, third-party APIs, auth, and gamification
It demonstrates my ability to architect and ship production-grade software
It serves as a template for future AGI-lite mini-apps I’ll continue to build

📣 Let’s Connect!

This is just the beginning. You can view more of my work at:

Want to collaborate or build something great together?
→ Let’s Talk

Page updated

Google Sites

Report abuse