Pokemon-id

Building a Node.js app that handles the heavy lifting (literally).

The Mission

To build the ultimate Pokemon research tool in one week. This wasn't "vibe coding"—this was raw engineering before that was even a thing. A sprint to create a place where trainers can track, analyze, and visualize their collections. The stack? Node.js, Express, and a massive database of pocket monsters.

The Challenge: "Gotta Load 'Em All"

The initial index page was ambitious. We decided to load the entire Pokedex at once.

• The Good: Instant filtering once loaded.
• The Bad: The initial render is... heavy.

As you can see in the scrolling capture above, the DOM gets massive. We're talking thousands of nodes rendering simultaneously.

The Tech Stack

• Backend: Express.js for a lightweight, unopinionated API.
• Frontend: EJS templating for dynamic server-side rendering.
• Styling: Bootstrap 4 for a responsive, clean grid layout.
• Auth: Secure session-based authentication to keep your Pokedex private.

What's Next?

I'm refactoring the index to use server-side pagination or infinite scroll. Instead of dumping the whole JSON payload into the DOM, we'll fetch chunks as the user scrolls.

This will drop the "Time to Interactive" (TTI) from "grab a coffee" to "instant."

Check it out

Pokemon.ID is live. Go create an account and start tracking.

Source Code

Check under the hood and contribute on GitHub:
github.com/rufuscodes/pokemon-id