A modern, interactive Pokémon card game built with Vite, React, and TypeScript. This project is designed for scalability, developer experience, and smooth UI prototyping with Storybook and MSW for mocking API data.
- List card deck
- View card details
- Simulate a card fight (with 3 different results: win, lose, error)
From card deck page(home), clicking a card redirects to card details page.
Here with a button you can simulate a fight between the card and a random opponent.
The start fight button simulate a polling request, that returns fight steps. Every tick has a 2% possibility to bring to
a
failure.
The last two cards, simulate a details fetch error.
Every other unhandled route brings to a 404 page.
- React 19
- TypeScript
- Storybook
- MSWJS
- Package Manager: yarn
- Node.js (v.22.17.0 or higher)
- yarn (preferred)
- if you don't have it, you can use
npm install -g yarnto install it globally
- if you don't have it, you can use
- git (of course)
-
git clone https://github.com/dev-reedus/cardgame_interview.git -
cd cardgame-interview -
yarn install -
yarn dev -
open your app at http://localhost:5173
-
yarn storybookto start storybook
You can also deploy it in a container by running run.sh script, it will create a docker image and run it on port 8085.
card-game/
├── .storybook/ # Storybook configuration
├── src/
│ ├── app/ # App initialization
│ ├── assets/ # Global styles/variables
│ ├── components/ # React components
│ ├── views/ # Views components
│ ├── hooks/ # Custom hooks
│ ├── mock-server/ # MSWJS handlers for mocks
│ ├── services/ # API services
│ └── types/ # TypeScript global types
└── public/ # Static assets