A small single-page app for browsing the item database of Wynncraft, a Minecraft MMORPG. Players use tools like this to hunt for gear: weapons, armor, and accessories, each with a rarity tier, level requirement, and elemental stats.
The page should work for every player, on any device, including players who rely on assistive technologies like screen readers or keyboard navigation.
- Search and filter the item database by name, item type, rarity, minimum powder slots, and level range
- Item cards show each item's icon, type, level, stats, powder slots, and rarity
- Item detail dialog clicking a card opens a modal with the item's full details
The app talks to the Wynncraft item API. The backend search endpoint allows the frontend to provide filters. There is intentional "processing delay" added to responses, so expect any request to take from 100 ms to 1 s to resolve.
Requires Node ≥ 24.
npm install
npm run dev # → http://localhost:3000The dev server builds src/, rebuilds automatically on file changes, and serves the page at http://localhost:3000
src/ the React app (this is the code under review)
server/ the item API; treat it as a remote third-party service
shared/ zod schemas for interacting with the API
public/ static assets and build output
| Endpoint | Description |
|---|---|
POST /v3/item/search |
Filtered search. Body: { query?, type?, rarity?, levelRange? }. Paginated 20 per page via ?page=N, or ?fullResult for everything in one response. |
GET /v3/item/database |
The full database, same pagination options. |
GET /v3/item/:id |
Full details for one item; adds lore, skill requirements, identifications, major ID. |
Response and error shapes are defined by the zod schemas in shared/schemas.ts