Memory Card Game
A Pokémon-themed memory game built with Next.js 16 and TypeScript. Twelve cards are fetched live from the PokeAPI, reshuffle after every click, and track your current and best score. Built as part of The Odin Project React curriculum.
Timeline
March 2026
Role
Frontend Development
Deployed on
Vercel
Stack
Next.js 16
React 19
TypeScript
Tailwind CSS
PokeAPI
12
Cards per round
1000+
Pokémon pool
Preview
project description
Overview
A Pokémon-themed take on the classic memory game, built as part of
The Odin Project React curriculum. On every load it pulls
twelve random Pokémon from the public PokeAPI, then the rules are simple: click each card once
without ever clicking the same one twice. The catch is that the whole board reshuffles after
every pick, so you can't lean on position — only memory. It's a small project, but it's where
I got comfortable with real API data, chaining fetches with Promise.all(), and keeping React
state immutable while the UI changes on every interaction.
What's inside
Features & pages
Pokémon card grid
12 random Pokémon fetched from the PokeAPI on every load
Shuffle on click
Cards reshuffle after each pick so position can't be memorized
Score board
Tracks your current score and remembers your best score
Win & game-over states
Win by clicking all 12 without repeats; repeat one and it's game over
Problems solved
Challenges & solutions
Problem
Clicking the same Pokémon twice had to end the game, so every already-picked card needed tracking without slowing down as the round went on.
Solution
Stored clicked card IDs in a JavaScript Set for O(1) duplicate lookups instead of scanning an array on every click.
Problem
Each PokeAPI list item only returns a name and a URL — the artwork lives behind a second request per Pokémon.
Solution
Chained a second fetch per card and ran all 12 in parallel with Promise.all(), so the board loads in one round trip instead of twelve sequential ones.
Problem
Reshuffling the board on every click risked mutating React state directly and dropping re-renders.
Solution
Always built a new array (spread + sort) and set it into state, keeping state immutable so React re-rendered reliably.
Built with
Tech stack
Next.js 16
Framework (App Router)
React 19
UI + hooks
TypeScript
Type safety
Tailwind CSS
Styling
PokeAPI
Card data
Vercel
Deployment
More work
Other dev projects
Luxe Noir — Shopping Cart
A luxury dark-theme fashion storefront built with Next.js 16 and TypeScript. Products are fetched from the DummyJSON API, grouped by collection, and managed through a React Context cart with a slide-in drawer. Built as part of The Odin Project React curriculum.
CV Builder
A dynamic CV builder built with React 19 and Vite. Fill in your details across six sections, watch an A4 preview update in real time, and export a clean single-page PDF with one click via html2pdf.js. Built as part of The Odin Project React curriculum.
Lost & Found Web Platform
A full-stack lost-and-found platform built as my college graduation project. Node.js and Express on an MVC architecture, EJS + Bootstrap frontend, and a MySQL database — with user authentication, item reporting with photo uploads, and email notifications. Designed and developed end to end.