Inventory Manager

👨‍💼 Welcome to the Inventory Manager! This is a practical React app that uses TypeScript classes for the core business logic. You'll implement the classes in a utilities module to power the UI.

Getting Started

🐨 Open

src/classes.ts

and implement the classes, interfaces, and methods. Every 🐨 comment is something for you to fill in.

🐨 Open

src/app.tsx

and look for TODO callouts in the UI. As you implement the class logic, those TODOs will turn into real data.

Running the App

npm run dev

What to Implement

In `src/classes.ts`

Inventory base class with private fields
Interfaces for Sellable and Trackable behaviors
Inheritance for Electronics, Clothing, and Perishable items
Method overriding for descriptions and pricing
Composition with logger implementations and InventoryManager

In `src/app.tsx`

Replace the placeholder item objects with real class instances
Wire InventoryManager + loggers so the Inventory Actions panel shows live data

Concrete examples (suggested fixtures)

Use these field values (constructor shape is up to you) so the UI has something concrete to show:

Electronics — Laptop

Fields: name: 'Laptop', basePrice: 1000, brand: 'Nova', model: 'X15', serialNumber: 'SN-100', location: 'Aisle 3', discountPercent: 10

Observable results:

getDescription() includes the name, brand, and model
calculatePrice(2) → 1800 with those price/discount values
getTrackingInfo() includes serial and location details
updateLocation('Warehouse') is reflected in later tracking info

Clothing — Hoodie

Fields: name: 'Hoodie', basePrice: 40, size: 'M', color: 'Navy', discountPercent: 0

getDescription() includes the name, size, and color
calculatePrice(1) → 40 when discount is 0

Perishable — Apples

Fields: name: 'Apples', basePrice: 3, expirationDate: '2026-08-01'

getDescription() includes the name and expiration date

Logging + InventoryManager

Logger.log(message: string): string returns the same message it received (no required prefix). ConsoleLogger also prints that message. InMemoryLogger stores that same message for getLogs().

const manager = new InventoryManager(new ConsoleLogger())
manager.receiveStock('Laptop', 5)
// log output mentions receiving Laptop / 5

const memoryLogger = new InMemoryLogger()
new InventoryManager(memoryLogger).shipStock('Hoodie', 2)
memoryLogger.getLogs().length // >= 1

Tips

💰 Start with the base InventoryItem class. Many other classes depend on it.

💰 For sellable pricing, combine basePrice, order quantity, and discountPercent so the Laptop example above yields 1800 for quantity 2.

💰 Use the logger classes to see the effects of dependency injection.

No Tests, No Solutions

📝 This is practice time! There are no tests or solutions. Experiment, make mistakes, and build confidence by applying what you've learned.

Extras/Inventory Manager