Chess Game Project https://cuknot.github.io/react-chess/

Overview

This is a web-based chess game developed using React. The project aims to provide an engaging user experience while learning about various web development concepts, including state management, component structure, and styling with Tailwind CSS.

Technologies Used

• React: A JavaScript library for building user interfaces. It allows for the creation of reusable components, making the codebase easier to manage and scale.
• Tailwind CSS: A utility-first CSS framework that provides low-level utility classes for styling. It simplifies the process of creating responsive designs and custom styles.
• JavaScript: The primary programming language used for building the game logic and interactivity.
• ES6+ Features: Utilizing modern JavaScript features such as arrow functions, destructuring, and modules to write cleaner and more efficient code.
• GitHub Pages: For hosting the web application.

Learning Objectives

Through the development of this chess game, I aim to achieve the following learning objectives:

1. Component-Based Architecture: Understanding how to design and implement a component-based architecture in React, which enhances code reusability and maintainability.

2. State Management: Learning how to manage state effectively within components using React hooks like useState.

3. Game Logic Implementation: Gaining experience in implementing complex game logic, including piece movement validation, turn management, and detecting checkmate.

4. Styling with Tailwind CSS: Familiarizing myself with Tailwind CSS to create responsive layouts and visually appealing designs without writing extensive custom CSS.

5. User Experience (UX) Design: Focusing on creating an intuitive user experience, including game interactions and visual feedback (e.g., highlighting valid moves, game over screens).

Project Structure

• /src: Contains all the source code for the application.
• /components: Reusable components such as Board, Square, Piece, GameOverScreen, etc.
• /utils: Utility functions for game logic, including move validation and checkmate detection.

Features

• Play a complete game of chess with a functional game board.
• Game over screen that displays the winner.
• Responsive design with Tailwind CSS for a modern look and feel.
• Restart functionality to reset the game.

How to Run the Project

To run the project locally, follow these steps:

1. Clone the repository: git clone https://github.com/CUknot/react-chess.git git clone https://github.com/CUknot/react-chess.git cd chess-game

2. Install the dependencies: npm install

3. npm start