Veterinary Anatomical Atlas of Bovines in Pokémon-style card format, developed for the Morphophysiology of the Neurolocomotor System and Integument course at Unisociesc Blumenau's Veterinary Medicine program.
Pokémuu is a web application that displays 328 bovine anatomical cards organized into four categories:
| Category | Description |
|---|---|
| Muscles | Bovine musculature |
| Joints | Joints and sutures |
| Bones | Bovine osteology |
| Special | General and panoramic cards |
- Browse and view all 328 cards
- Filter by category (Muscles, Joints, Bones, Special)
- Search cards by name with fuzzy search
- Download individual cards
- Download all cards as a
.zipfile - Light / dark mode
- Responsive layout (mobile and desktop)
- Next.js 14 (App Router)
- React 18
- TypeScript
- Tailwind CSS
- Framer Motion
- Fuse.js — fuzzy search
- JSZip —
.zipfile generation - Docker + PM2 — deployment
Install dependencies:
npm installRun in development mode:
npm run devThe application will be available at http://localhost:3000.
Build for production:
npm run build
npm startBuild the image:
docker build -t pokemuu .Run the container:
docker run -p 3000:3000 pokemuuWith PM2 (ecosystem.config.js):
npm run build
pm2 start ecosystem.config.jssrc/
├── app/
│ ├── atlas/ # Full atlas page
│ ├── layout.tsx
│ └── page.tsx # Landing page
├── components/
│ ├── features/
│ │ ├── atlas/ # Filters, cards, modal, download
│ │ └── landing/ # Hero, team, category previews
│ ├── layout/ # Header and Footer
│ ├── providers/ # ThemeProvider (dark/light mode)
│ └── ui/ # Badge, Button, SearchInput
├── data/
│ └── cards.json # Metadata for all 328 cards
├── lib/
│ ├── download.ts # Individual and zip download logic
│ └── search.ts # Fuse.js configuration
└── types/
└── card.ts # Types and category metadata
Maintaining