An interactive, single-page ERP simulation that teaches SAP-style business process flows through a live, reactive interface.
This ERP Simulation is a fully interactive, browser-based business process trainer built as a single React application. It replicates the core modules of enterprise ERP systems (modeled after SAP's module structure) — Finance, Sales, Procurement, Production, and HR — using live state that flows between modules just like a real ERP.
Designed as an educational tool for business students, consultants-in-training, or anyone learning how ERP systems connect cross-functional business operations.
| Module | SAP Equivalent | What It Covers |
|---|---|---|
| Dashboard | SAP Fiori Launchpad | Real-time KPIs: revenue, inventory value, open orders |
| Finance (FI) | SAP FI | General Ledger with live double-entry bookkeeping |
| Sales (SD) | SAP SD | Create sales orders → auto inventory reservation & GL entries |
| Purchasing (MM) | SAP MM | Purchase orders → goods receipt → automatic inventory update |
| Production (PP) | SAP PP | Bill of Materials (BOM) execution → raw material consumption → finished goods creation |
| Human Resources (HCM) | SAP HCM | Employee roster, roles, salary management |
The simulation's key feature is that all modules share live state — actions in one module cascade across the system exactly as they would in a real ERP:
- Creating a Sales Order → reserves inventory in MM → posts revenue to FI General Ledger.
- Running a Production Order → consumes raw materials (MM) → creates finished goods → posts COGS to FI.
- Creating a Purchase Order → on goods receipt, updates MM inventory → posts payable to FI.
This demonstrates the end-to-end O2C (Order-to-Cash) and P2P (Procure-to-Pay) cycles in a single interactive session.
| Layer | Technology |
|---|---|
| Frontend | React 18 (functional components + hooks) |
| Build Tool | Vite |
| Styling | Tailwind CSS + custom SAP Fiori-inspired design tokens |
| Icons | Lucide React |
| State | React useState / useEffect (no external state lib) |
| Utilities | clsx + tailwind-merge |
The entire application runs as a single App.jsx file by design — demonstrating how complex business logic can be managed with pure React hooks and state, without a backend or database. All data is in-memory, making it instantly runnable with no setup.
erp-simulation/
├── src/
│ ├── App.jsx # Complete ERP simulation (all modules, state, UI)
│ ├── main.jsx # React entry point
│ └── index.css # Global styles + Tailwind imports
├── index.html
├── vite.config.js
└── package.json
No environment variables or database required — runs entirely in the browser.
git clone https://github.com/your-username/erp-simulation.git
cd erp-simulation
npm install
npm run dev
# Open http://localhost:5173npm run build
# Deploy /dist to any static host- Persistent state via localStorage (save ERP session between refreshes)
- Additional product types and multi-level BOM support
- Quality Management (QM) module simulation
- Export General Ledger to CSV for accounting exercises
- Multi-user mode (simulated concurrent ERP users)
Built by Cesar Matta — Full Stack Developer & ERP Consultant Part of the Nodyt ecosystem of educational tools.