Inspiration

Blending a cyberpunk aesthetic with the concept of a "nature scanner," I wanted to build an incredibly user-friendly tool to tackle e-waste. Drawing on my background in electronics system engineering technology, I focused on integrating camera scanning to make hardware appraisal simple, accessible, and actionable for everyday users.

What it does

ScrapTech Syndicate (STS) is an AI-powered e-waste assessment tool that turns your browser into a hardware fence. Users can snap a photo of any discarded tech, and the app uses AI vision to appraise its condition, returning a verdict to either revive, salvage, or recycle. It also evaluates browser-exposed hardware specs, compares repair versus replacement costs, and maps out nearby drop-off centers.

How we built it

We developed the frontend using Next.js 16 and TypeScript, styling the CRT-themed interface with Tailwind CSS v4. The core appraisal engine relies on the Google Gemini Vision API for strict JSON hardware parsing. Throughout the development process, we leaned on Gemini as an AI mentor for architecture and Claude Code to assist with the heavy-lifting implementation.

Challenges we ran into

Setting up and securely connecting the various APIs proved difficult. Specifically, we had to carefully engineer the prompts to enforce strict JSON parsing with Gemini for reliable UI rendering. We also had to build local server proxies for the Google Places API to bypass tricky CORS issues and keep our API keys secure.

Accomplishments that we're proud of

I am incredibly proud of bringing my exact vision to life and exceeding it. Successfully integrating a complex AI pipeline with a highly stylized, functional cyberpunk interface, all while building a tool that has genuine environmental utility, was a massive win.

What we learned

We gained deep, hands-on experience navigating browser security protocols, especially when securely extracting local hardware specifications via browser spec jacking. We also significantly leveled up our skills in routing, proxying, and managing third-party APIs within a modern Next.js environment.

What's next for ScrapTech

The immediate next step is developing a dedicated native mobile application. A mobile environment will grant us deeper access to device diagnostics, allowing for much more accurate hardware scans, better data collection, and a smoother camera-to-appraisal pipeline.

Built With

• app-router
• cartodb-dark-matter
• claude-code
• gemini-3-flash-preview
• google-gemini-vision-api
• google-places-api-(new)
• leaflet.js
• navigator.mediadevices.getusermedia
• next.js-16.2.1
• react-leaflet
• tailwind-css-v4
• typescript
• webglrenderingcontext