Kaboo is a modern, interactive web-based card game built with Next.js, React, and TypeScript. It features a polished UI, smooth animations, and a robust state management system to handle game logic.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui (Radix UI)
- State Management: Zustand
- Data Fetching: TanStack Query
- Animations: Framer Motion
- Form Validation: React Hook Form + Zod
- Testing: Vitest + React Testing Library
- Interactive Gameplay: Play Kaboo against AI or local players (implementation dependent).
- Smooth Animations: Card movements and interactions are animated for a better user experience.
- Responsive Design: Optimized for both desktop and mobile devices.
- Game Logic: Complex game rules handled via a dedicated state store.
- Sound & Music: Procedural sound effects plus background music with a toggle and selectable track.
Ensure you have Node.js installed. This project uses pnpm.
-
Clone the repository:
git clone <repository-url> cd kaboo-fe
-
Install dependencies:
pnpm install
-
Run the development server:
pnpm dev
Open http://localhost:3000 with your browser to see the result.
pnpm dev- Start the development server.pnpm build- Build the application for production.pnpm start- Start the production server.pnpm lint- Run ESLint to check for code quality issues.pnpm test- Run unit tests with Vitest.pnpm test:watch- Run tests in watch mode.
src/app: Next.js App Router pages and layouts.src/components: Reusable UI components and game-specific components.game: Core game components (Board, Cards, PlayerHand, etc.).scoring: Components related to scoring and game end.ui: Generic UI components (Buttons, Dialogs, etc.).
src/store: Zustand stores for game state management.src/lib: Utility functions and helper logic.src/hooks: Custom React hooks.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.