PokeMatch

• 

  Front Page

Inspiration

We wanted to turn a familiar swipe UI into something more playful by mixing dating-app mechanics with Pokémon catching.

What it does

PokéMatch shows a deck of random Gen 1 Pokémon and lets you swipe left to pass or right to try to catch them. Successful catches are saved in your collection.

How we built it

We built it with Next.js App Router, TypeScript, Bun, Tailwind CSS, react-tinder-card, lucide-react, and PokéAPI.

Challenges we ran into

The hardest part was getting the swipe flow to feel stable. We had to fix state timing issues, reload bugs, and layout problems in the card stack.

Accomplishments that we're proud of

We turned a basic swipe app into a small game loop by adding real catch chances instead of guaranteed matches, and got the interaction working smoothly on a modern frontend stack.

What we learned

We learned a lot about coordinating gesture state, async data loading, and UI polish in React and Next.js.

What's next for PokeMatch

We’d like to add catch streaks, better animations, Pokémon type-based difficulty, and a deployed version with cleaner sharing and stats.

Built With

• bun
• nextjs
• react
• tailwindcss
• typescript