How I Built a Full-Stack Gamified Web App with Zero Coding Knowledge using Gemini & Firebase

Shounak Maji — Sat, 02 May 2026 07:12:43 +0000

Transitioning from writing syntax to directing logic: A high schooler’s journey building a real-time market exchange.
By Shounak Maji
As a high school student in India deep in the trenches of JEE Main engineering prep, my time is my most strictly budgeted asset. I had a massive vision for a web platform—a gamified study and trading ecosystem called JEE-Verse—but I didn't have the hundreds of hours required to learn complex JavaScript frameworks, backend integration, and 3D canvas rendering from scratch.
So, I decided to run an experiment: What happens if I stop trying to be a Junior Developer and instead act as a Systems Architect, using Google’s Gemini as my coding engine?
The result? I built a fully functioning, real-time social network with a live simulated stock market, yield staking, 3D neural blueprints, and a custom liquid glass UI, all running on Firebase.
Here is exactly how I built it without writing the syntax myself, and the hard lessons I learned about AI project architecture along the way.
The Paradigm Shift: Architect vs. Coder
There is a huge misconception that building with AI means typing "make me an app" and going to sleep. In reality, large language models (LLMs) are like incredibly fast, eager junior developers. If you give them vague instructions, you get a vague, broken product.
I quickly realized my job wasn't to write the for loops. My job was to define the data structures, map out the component states, and architect how the frontend would talk to Firebase.
When I wanted a live "Fear & Greed Index" gauge on the market page, I didn't just ask Gemini for a gauge. I explained the exact mathematical logic of how user trading volume should shift the momentum, and how the canvas should re-render that physics update at 60fps. I provided the logic; Gemini compiled it into syntax.
Overcoming AI Amnesia: The Battle to v2.15.0
If you've built anything complex with AI, you know its biggest flaw: context window amnesia. As the codebase grows, the AI starts dropping features. It will fix a bug in the navbar but silently delete your profile badges.
To combat this, I had to implement ruthless version control.
I treated Gemini like a contractor who needed strict boundaries. I tracked every single iteration meticulously, from v2.2.0 up to our current v2.15.0 (Identity Restoration). When Gemini handed back a code block where the character length unexpectedly dropped, or a specific feature (like the verified "blue badge") vanished, I rejected the build. I forced the AI to acknowledge the version history and integrate the new fix without cannibalizing the old architecture.
You cannot let the AI manage the project state. The human has to hold the master blueprint.
The Asset Management Crisis
Around v2.8.0, the project almost collapsed under its own weight. I was initially managing assets (like images for a local age calculator feature) using messy .zip file transfers back and forth with the AI.
As the project scaled to include complex 3D models and multiple UI themes, the zip file method became chaotic, leading to broken image paths and massive data loss.
I had to pivot the architecture. I commanded Gemini to completely halt the zip file approach and guided it to restructure the entire project into a strictly managed local directory (the "jee cult folder") inside VS Code. By establishing a solid local environment, I stabilized the asset paths, allowing us to push safely to Netlify without missing textures or broken scripts.
The Tech Stack Under the Hood
Even though I didn't write the raw syntax, here is the stack I architected:
Frontend: Pure HTML/CSS/JS. No heavy frameworks. We achieved a high-end "Liquid Glass" UI utilizing CSS backdrop-filters and dynamic CSS variable swapping for instant Light/Dark mode transitions.
3D Rendering: Custom JavaScript physics engines rendering rotating Torus and Hexagon models directly onto HTML5 Canvases at 60fps.
Backend (Firebase): * Firestore: Real-time database syncing the market ticker, global telemetry, and live user order books.
Firebase Auth: Secure Google OAuth login.
Cloud Storage: Handling video and image media uploads for the social feed.
The Takeaway
Building JEE-Verse taught me that the future of software engineering is fundamentally changing. The barrier to entry is no longer memorizing syntax; it is your ability to think logically, architect a system, and enforce strict project management on an AI engine.
I might not be a senior developer yet, but thanks to Gemini and Firebase, I was able to direct a vision that resulted in a living, breathing application.
Check out the live build here: https://jee-verse.netlify.app/

Watch the 45-second architectural demo: https://drive.google.com/file/d/1t3m8qanTTJmuGDbtcacDOMLx8gGVprVW/view?usp=drivesdk

If you are a builder experimenting with AI, I’d love to connect and hear how you are managing your AI workflows!

DEV Community: Shounak Maji

How I Built a Full-Stack Gamified Web App with Zero Coding Knowledge using Gemini & Firebase