π¨βπΌ 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
and implement the classes,
interfaces, and methods. Every π¨ comment is something for you to fill in.
π¨ Open
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: 10Observable results:
getDescription()includes the name, brand, and modelcalculatePrice(2)β1800with those price/discount valuesgetTrackingInfo()includes serial and location detailsupdateLocation('Warehouse')is reflected in later tracking info
Clothing β Hoodie
Fields:
name: 'Hoodie', basePrice: 40, size: 'M', color: 'Navy',
discountPercent: 0getDescription()includes the name, size, and colorcalculatePrice(1)β40when discount is0
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.
