{"id":29024443,"url":"https://github.com/laruschkaj/props","last_synced_at":"2026-05-06T08:32:44.124Z","repository":{"id":300447465,"uuid":"1006195726","full_name":"Laruschkaj/Props","owner":"Laruschkaj","description":"This repository contains the code and documentation for the \"Spacecraft Inventory System\" React project. It serves as a Capstone Step 1 exercise, demonstrating the use of React props, conditional rendering, and component composition for building dynamic UI.","archived":false,"fork":false,"pushed_at":"2025-06-21T18:08:59.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-21T19:21:15.887Z","etag":null,"topics":["components","conditional-rendering","exercises","frontend","inventory-management","javascript","jsx","learning","props","react","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Laruschkaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-21T17:51:56.000Z","updated_at":"2025-06-21T18:09:02.000Z","dependencies_parsed_at":"2025-06-21T19:21:26.578Z","dependency_job_id":null,"html_url":"https://github.com/Laruschkaj/Props","commit_stats":null,"previous_names":["laruschkaj/props"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Laruschkaj/Props","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FProps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FProps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FProps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FProps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Laruschkaj","download_url":"https://codeload.github.com/Laruschkaj/Props/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FProps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261997402,"owners_count":23242250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","conditional-rendering","exercises","frontend","inventory-management","javascript","jsx","learning","props","react","web-development"],"created_at":"2025-06-26T04:01:50.131Z","updated_at":"2026-05-06T08:32:44.096Z","avatar_url":"https://github.com/Laruschkaj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Props\n15.2.16 Props Exercise\n\n# Props Exercise\n\n## Spacecraft Inventory System 🌌\n\nHello, future software developer! In this exercise, we will practice props in React by creating a spacecraft inventory management system. 🥹\n\nYour mission is to showcase various items aboard a spacecraft, detailing each one's name, type, quantity, and price. But there's a twist! You'll need to implement smart messages within your application: one to warn when any item's stock is running low 🚨 and another to highlight items of high value 💎 that could attract interstellar thieves. This is how it should look: \n\n![Demo.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/163f1722-85e9-4a3c-adba-457a91094f00/9a8726c0-98cc-4df3-8f77-20dc6b9d82f7/Demo.png)\n\n## Tasks 📋\n\n- `index.html`\n    - Add CDN links for React, ReactDOM, and Babel to enable JSX processing in the browser.\n    - Add the message, inventory item, and app component files. Be mindful of their import order.\n- `Message.js`\n    - Accept `children` as props and render them as is.\n- `InventoryItem.js`\n    - Accept `name`, `type`, `quantity`, and `price` as props.\n    - Set defaults to `quantity` and `price`.\n    - Render the item's details.\n    - Render a `Message` if the quantity is below the 5 threshold, indicating low stock.\n    - Render a `Message` if the total value (`quantity * price`) exceeds the $1000 threshold, suggesting extra protection due to high value.\n- `App.js`\n    - You are given a list of inventory items. Feel free to change the list.\n    - Loop through the inventory items and render an `InventoryItem` for each item in the list.\n\nHappy coding!\n\n## Starter Code 🌱\n\n- `index.html` serves as the entry point for the web application. You will load React libraries and link to the React component scripts for in-browser JSX processing.\n- `App.js` is the main component that you will use to aggregate the inventory list, rendering `InventoryItem` components for each item in the inventory.\n- `InventoryItem.js` represents individual inventory items. You will display their name, type, quantity, and price. You will also conditionally render messages based on stock levels and value.\n- `Message.js` displays warnings or notifications. You will render the wrapped messages through its children props.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaruschkaj%2Fprops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaruschkaj%2Fprops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaruschkaj%2Fprops/lists"}