Kotree

I built Kotree for the first time in August 2022, back when I was still a student at SMK (Sekolah Menengah Kejuruan). The goal was simple: one page, all my social links. I built it with React and Vite during free time between classes. The early commits are even written in Indonesian.

I kept coming back to it after that, adding things whenever I felt like it. Three major versions later, Kotree is now my personal playground. I use it to try out web APIs and browser features I haven't touched before, without worrying too much about keeping things clean.

🚀 Features

The current version has grown well past the original scope:

• Profile card: avatar, bio, and a personal motto
• Per-link click counters: backed by MongoDB, updated live when you click
• Search: Ctrl+K on desktop, or a top-bar button on mobile
• AI Terminal: press the green button (or type help) and chat with an AI clone of me, powered by the Gemini API. Falls back to a mock if no API key is set
• Voice commands: say a link name out loud and it opens. Falls back to typing if the microphone is blocked
• Secret Confessions guestbook: leave an encrypted message that only I can read
• Crypto tip jar: connect a Web3 wallet and send a tip
• Geo quest: verify your physical location to unlock a hidden reward
• Hidden easter eggs: a retro Windows 95 desktop, a playable DOOM clone, a boss fight, an infinite mirror effect, and the classic Konami code

🤖 Vibe Coding Experiment with Gemini 3.1 Pro

The easter eggs, the AI terminal, the voice commands, the geo quest, and the crypto tip jar were all added in one sprint using Gemini 3.1 Pro as the primary driver. My friends had been saying the model wasn't capable enough, so I decided to actually test it. I used Kotree specifically because it's a fun project, so if the output was messy, it didn't matter much.

I described features, the model generated them, and I kept pushing until version 3.0.0 was done. The model handled the feature generation well. The codebase it produced, though, was not something I'd want to maintain: files ballooning past 300 lines, components scattered with no consistent grouping. That's expected when you vibe code without a structure plan. For a playground project where the point was just to see what the model could generate, I got my answer.

🔧 Refactor with DeepSeek V4 Flash

After the Gemini sprint, I refactored the codebase using DeepSeek V4 Flash (a Chinese model starting at $2 per million tokens). I loaded $10 in and used it to clean up the structure from the previous sprint.

The refactor was straightforward: split every bloated file to under 100 lines, and group each component into its own dedicated folder. The commit message sums it up:

refactor: split every file to ≤100 lines and cluster components into folders

The result:

src/
  app/          pages, layout, metadata, API routes
  components/   UI components, one component per folder
  connections/  MongoDB client and query functions
  data/         profile and social link definitions
  interfaces/   shared TypeScript types
  lib/          security, rate limiting, click tracking

Heavy features (games, the crypto wallet, QR code popup) are lazy-loaded with next/dynamic so they don't land in the initial bundle. DeepSeek V4 Flash was straightforward to work with for this kind of structural cleanup. Different use case from the Gemini sprint, but it did the job well.

🤖 AI Terminal

The AI terminal is a chat interface that roleplays as a version of me. It knows my background, my projects, my stack preferences, and my personality. I wrote a system prompt that describes who I am, and the Gemini API handles the responses.

I added a few layers of protection to keep it from being abused:

• Rate limiting: 10 requests per minute per client IP, with a global daily spend cap so a flood can't drain my API quota
• Edge guard: the endpoint is protected at the CDN level via a Netlify Edge Function, so floods are stopped before they reach the origin server
• Prompt injection detection: the model is instructed to recognize and refuse attempts to override its persona
• Emergency kill switch: I can disable the endpoint without a deploy if something goes wrong

When no GEMINI_API_KEY is set, it falls back to a mock response set so the terminal still works in local dev without spending real API quota.

🔒 Security

I tend to add proper security even on personal projects. Kotree covers the basics:

• CSRF protection: write endpoints check Origin and Sec-Fetch-Site headers to reject cross-origin requests
• Input validation: the click counter only accepts link names from a fixed whitelist, so no arbitrary values get written to the database
• Rate limiting: per-IP limits on all write endpoints, reading from the last proxy hop to prevent header spoofing
• No stored IPs: the guestbook strips all visitor identifiers before writing to MongoDB
• Security headers: X-Content-Type-Options, X-Frame-Options, Referrer-Policy, and a tight CSP on every response

⚡ Performance

The first version was slow, around 3.3 seconds to first meaningful paint. Everything loaded upfront: CSS animations, react-awesome-reveal entrance effects, all of it. No Three.js at that point; that came with the v3 sprint.

The v3 Gemini sprint added Three.js WebGL backgrounds, shooting stars, and a pile of heavy features all at once, which made things heavier. The fix was lazy-loading everything that isn't needed on first paint:

• Three.js background loads after the critical path
• Games, the wallet, and the QR popup only load when triggered
• First meaningful paint is now under 1 second

🐣 Easter Eggs

Hidden throughout the page:

• Konami Code (↑↑↓↓←→←→BA): triggers something
• Win95 Desktop: a fully interactive retro Windows 95 environment
• DOOM: a playable DOOM clone that runs in the browser
• Boss Fight: an actual mini game hidden behind a trigger
• Infinite Mirror: a recursive webcam or canvas effect

All easter egg content opens in sandboxed iframes so they can't interact with the parent page.

📸 Screenshots