Star Destroyer 🌠

A React application simulating a "Star Destroyer" game where stars appear randomly in space every few seconds and can be destroyed by clicking them. This project serves as an exercise to practice the powerful useEffect and useRef hooks in React.

Features

• Dynamic Star Generation: Stars are generated at random positions within the viewport every 2.5 seconds.
• Unique Identifiers: Each star has a unique ID for management.
• Star Destruction: Stars can be clicked to destroy them, removing them from the display.
• Focus Management: Individual stars gain focus on their initial render, with a visual effect (e.g., a shadow) to indicate focus.
• Interval Management: useEffect is used to set up and properly clean up the star generation interval, preventing memory leaks.
• Component-Based Design: The application is structured with Space and Star components, each with distinct responsibilities.

Technologies Used

• React: Frontend JavaScript library for building user interfaces.
• Vite: Fast build tool and development server for modern web projects.
• HTML/CSS/JavaScript: Core web technologies.

How to Run Locally

Follow these steps to get the project up and running on your local machine:

1. Clone the repository:

   git clone [https://github.com/YOUR_USERNAME/star-destroyer.git](https://github.com/YOUR_USERNAME/star-destroyer.git)

   (Replace YOUR_USERNAME with your actual GitHub username)

2. Navigate into the project directory:

   cd star-destroyer

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

   The application should open in your browser, typically at http://localhost:5173/.

Key React Concepts Applied

This project specifically focuses on demonstrating the practical application of:

• useEffect Hook:
  • Setting up and cleaning up setInterval for continuous star generation.
  • Managing side effects related to the component's lifecycle.
• useRef Hook:
  • Directly accessing DOM nodes (individual Star elements) to programmatically manage focus.
  • Applying imperative effects (like adding a shadow on focus).
• State Management: Managing the collection of stars in the Space component's state.
• Component Communication: Passing props (star data, destruction callback) from Space to Star components.

---

Happy coding!