From 86.4% to 95.81% — How I optimized my React/GCP application for professional-grade AI evaluation.

Building an application that "works" is easy. Building an application that is industrial-ready is where 99% of developers fall short.

Recently, I participated in a massive global hackathon with over 17,000 participants. My initial submission scored a respectable 86.4% (Rank 419). But in the final 24 hours, I decided to pivot. I stopped focusing on "features" and started focusing on architecture.

The result? My score jumped to 95.81%, propelling me to Rank 242 globally. Here is the technical breakdown of how I hardened my stack to achieve 100% ratings in Efficiency and Google Services.

None
None
None

1. The "Hidden Metrics" of AI Evaluation

Most developers assume hackathon judges (or AI evaluators) only care about the UI. In reality, high-tier evaluations look for Industrial Readiness. To hit the 95th percentile, you must prove your app can survive in a production environment.

I focused on four pillars:

  • Security: Defense-in-depth, not just a login page.
  • Efficiency: Optimizing for the "Time to Interactive" (TTI).
  • Scalability: A clean data pipeline for the Google Cloud ecosystem.
  • Reliability: 100% test coverage with performance benchmarks.

2. Security: Moving Beyond Basic Auth

While Firebase Auth handles the "who," it doesn't handle the "what." To secure the app, I implemented two major layers:

  • Zod-Driven Sanitization: I wrapped every user input in a Zod schema. This ensures that even if a malicious user tries to bypass the UI, the data pipeline rejects anything that doesn't fit the strict "Voter Profile" interface.
  • Content Security Policy (CSP): I configured the application with strict security headers, including X-Frame-Options and X-Content-Type-Options. This prevents common attack vectors like XSS and clickjacking—details that often separate juniors from seniors.

3. The Google Cloud Singleton Pipeline

The evaluator's biggest critique of my 86% submission was the lack of "broader adoption" of Google Services. I solved this by building a Singleton Service Layer.

Instead of scattered API calls, I created a GCPPipeline class. This handled:

  1. State Persistence: Firestore for real-time voter data.
  2. Serverless Logic: Mocks for Google Cloud Functions to process election analytics.
  3. BigQuery Schemas: I included structured JSON schemas within the repo to demonstrate how the data would be ingested for large-scale analytics.

Result: My "Google Services" score hit a perfect 100%.

4. Efficiency: The Power of Static Export

Performance isn't just about fast code; it's about what you don't load. I made two critical changes:

  • Dynamic Module Loading: My app featured heavy 3D canvases for the "Voting Booth" and "System Lab." I used next/dynamic to lazy-load these components only when needed. This slashed the initial bundle size.
  • Static Exporting: By configuring output: 'export' in Next.js, I ensured the app could be served via Google's Global CDN (Firebase Hosting) as a lightning-fast static site.

5. Testing the "Sad Paths"

Most developers only test the "Happy Path" (does the button work?). To get a 97.5% in Testing, I implemented:

  • Performance Benchmarks: Vitest scripts that fail the build if the 3D render latency exceeds 200ms.
  • Security Tests: Automated scripts that attempt to "inject" malicious strings into the Zod validation layer.

The Takeaway

Ranking in the top 1.4% wasn't about adding more buttons or better colors. It was about treating a hackathon project like a production-grade product.

When you prioritize type safety, data integrity, and resource efficiency, the numbers follow.

you can see here :https://election-app-146491922348.us-central1.run.app/

#Software Engineering #Web Development #Google Cloud Platform #React #Career Advice #Hack2skillAIEvaluation #Google Cloud Singleton Pipeline #Next.js Static Export Optimization #Zod Validation for Security #Vitest Performance Benchmarking #Technical Deep Dive #Architectural Patterns #Case Study #Lessons Learned

@googlecloud @Firebase @hack2skill #GCP #BuildWithAI #ReactJS.