A modern, interactive chess learning platform built with React, TypeScript, and Tailwind CSS. Learn chess from beginner to advanced level with interactive lessons, practice puzzles, and AI gameplay.
- Step-by-step lessons: From basic moves to advanced strategies
- Progress tracking: Monitor your learning journey
- Difficulty levels: Beginner, Intermediate, and Advanced content
- Visual guides: Interactive board demonstrations
- Tactical training: Thousands of chess puzzles
- Themed exercises: Pins, forks, skewers, and more
- Rating system: Track your puzzle-solving skills
- Time challenges: Improve your calculation speed
- Multiple difficulty levels: From beginner-friendly to challenging
- Real-time analysis: Get insights into your moves
- Game history: Review and learn from your games
- Standard chess rules: Full implementation with special moves
- Responsive design: Works perfectly on all devices
- Smooth animations: Powered by Framer Motion
- Intuitive interface: Clean and user-friendly design
- Dark/Light themes: Customizable appearance
- Node.js 18.0 or higher
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/how2chess.git cd how2chess -
Install dependencies
cd how2chess npm install -
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000to see the application.
npm run build
npm run previewhow2chess/
├── src/
│ ├── components/ # Reusable UI components
│ │ └── Navbar.tsx # Navigation component
│ ├── pages/ # Page components
│ │ ├── Home.tsx # Landing page
│ │ ├── Learn.tsx # Learning section
│ │ ├── Practice.tsx # Puzzle practice
│ │ └── Play.tsx # AI gameplay
│ ├── types/ # TypeScript type definitions
│ │ └── chess.ts # Chess-related types
│ ├── assets/ # Images and other assets
│ ├── App.tsx # Main app component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── README.md # This file
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe JavaScript development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library for React
- chess.js - Chess game logic and move validation
- react-chessboard - Interactive chess board component
- Navigate to the Learn section
- Start with "Chess Basics" for fundamentals
- Progress through lessons at your own pace
- Complete interactive exercises to reinforce learning
- Go to the Practice section
- Filter puzzles by difficulty level
- Solve tactical puzzles to improve your skills
- Track your rating and progress over time
- Visit the Play section
- Choose your preferred difficulty level
- Play against the AI opponent
- Review your games to identify improvements
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License.
Happy Learning! ♔