An interactive pricing + demand simulator built with React Typescript + Vite.
Users adjust the price of a product to visualize demand, revenue, and profit in real-time — complete with market twist events like a crash, new competition, or viral trend.
🔗 Live Demo: https://priceprofit.cleof.us
- 📊 Dynamic demand curve visualization with Chart.js
- 💰 Real-time calculation of:
- Profit = (Price - Cost) × Demand
- Revenue = Price × Demand
- 🔀 Random market events (simulate a crash, new competitor, etc.)
- 🎛️ Responsive slider UI for live price control
- 🔥 Fully responsive and mobile-ready
This project helps demonstrate:
| Concept | Description |
|---|---|
| Supply & Demand | Inverse relationship shown visually |
| Price Elasticity | See how demand shifts with price changes |
| Profit Optimization | Maximize profit, not just sales |
| Market Forces | See how external shocks affect demand |
Connected to lessons:
Pricing, Supply & Demand, Game Theory, Econ Strategy @ Business & Econ Tesla STEM High School
| Tool | Purpose |
|---|---|
| React 18 | UI Framework |
| Vite | Build tool / Dev server |
| TypeScript | Type safety |
| Chart.js + react-chartjs-2 | Graph rendering |
| Tailwind CSS | Styling / Layout |
| Lucide-react | Icons |
# 1. Install dependencies
npm install
# 2. Start dev server
npm run dev
# 3. Visit localhost
http://localhost:5173