Spacecraft Builder 🛠️

A React application designed to help users build their spacecraft by managing an inventory of essential items. This project demonstrates core React fundamentals, including component-based architecture, state management, handling user inputs with controlled components, and managing interactions between parent and child components.

Features

• Inventory Management: The SpacecraftBuilder component centrally manages the state of the entire inventory.
• Item Submission Form: The ItemForm component provides a user-friendly interface for adding new items to the inventory.
  • All input fields are required and include client-side validation.
  • Missing fields are highlighted on form submission.
  • The form clears upon successful item submission.
• Dynamic Inventory Display: The InventoryDisplay component dynamically renders the current inventory.
• Detailed Item Cards: Each item in the inventory is presented as an ItemCard, showcasing its name, quantity, and purpose.
• Item Deletion: The ItemAction component provides functionality to delete individual items from the inventory.
• Parent-Child Communication: Demonstrates robust data flow and state updates using callback functions passed from parent to child components.

Component Architecture

The application is structured with a clear component hierarchy:

• SpacecraftBuilder (Parent)
  • Manages inventory state.
  • Renders ItemForm (for adding items).
  • Renders InventoryDisplay (for showing and deleting items).
• InventoryDisplay (Child of SpacecraftBuilder)
  • Receives inventory data as props.
  • Renders ItemCard for each item.
  • Renders ItemAction for each item (for deletion).
• ItemCard (Child of InventoryDisplay)
  • Displays individual item details.
• ItemAction (Child of InventoryDisplay)
  • Provides the delete functionality for an item.

Technologies Used

• React: Frontend JavaScript library for building user interfaces.
• Vite: Fast build tool and development server for modern web projects.
• JavaScript (ES6+)
• HTML5
• CSS3
• uuid library: For generating unique IDs for inventory items.

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/your-repo-name.git](https://github.com/YOUR_USERNAME/your-repo-name.git)

   (Replace YOUR_USERNAME with your actual GitHub username and your-repo-name with the actual name of your repository, e.g., spacecraft-builder)

2. Navigate into the project directory:

   cd your-repo-name

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 is a practical demonstration of several fundamental React concepts:

• Component-Based Architecture: Breaking down the UI into reusable, focused components.
• State Management (useState): Managing the inventory data and form input values.
• Controlled Components: Implementing form inputs where React state is the single source of truth for input values.
• Handling User Input: Capturing and processing input from form fields.
• Form Validation: Implementing client-side validation to ensure required fields are filled and providing visual feedback.
• Parent-Child Component Communication:
  • Passing data down via props (e.g., inventory items to InventoryDisplay).
  • Passing functions down as callback props to enable child components to trigger state updates in parent components (e.g., ItemForm calling a function in SpacecraftBuilder to add an item, ItemAction calling a function to delete an item).
• List Rendering (.map() with key prop): Efficiently rendering dynamic lists of items.

---

Happy building!