🎲 React Ludo Board

A simple React project that simulates a Ludo board score tracker. Each player has a separate counter, and clicking the corresponding button increases that player's move count.

This project is built to practice React fundamentals such as state management, event handling, and updating objects in state.

---

🚀 Features

• Four players (Blue, Red, Yellow, Green)
• Independent move counters
• State management using useState
• Updating object state immutably
• Responsive button interactions
• Clean and beginner-friendly code

---

🛠️ Technologies Used

• React
• JavaScript (ES6+)
• Vite
• CSS

---

📂 Project Structure

src/
│── App.jsx
│── LudoBoard.jsx
│── main.jsx
│── index.css

---

📖 Concepts Practiced

• React Functional Components
• JSX
• useState Hook
• Object State
• Previous State Callback
• Spread Operator (...)
• Event Handling
• Component Rendering

---

🧠 Learning Outcome

This project helped me understand:

• Why React state should never be mutated directly.
• How to update object state using the spread operator.
• Why the callback version of setState is useful.
• How React re-renders components after state updates.

---

▶️ Installation

Clone the repository

git clone https://github.com/your-username/react-ludo-board.git

Navigate to the project

cd ludo-score-tracker-react

Install dependencies

npm install

Start the development server

npm run dev

---

⭐ Future Improvements

• Reset button
• Dice roll simulation
• Winning condition
• Player turn indicator
• Responsive UI
• Better styling using CSS modules or Tailwind CSS

---

👩‍💻 Author

Dilpreet Kaur

B.Tech CSE Student

Learning React one project at a time 🚀