🔷 NEXAFLOW — Smart AI Supply Chain Platform

AI-powered supply chain intelligence: disruption prediction, dynamic route optimization, supplier risk scoring, and smart inventory rebalancing.

---

🚀 QUICK START — Mac Setup (Step by Step)

STEP 1 — Install Prerequisites

Open Terminal on your Mac (Command + Space → type "Terminal" → Enter)

Check if Node.js is installed:

node --version

If you see a version number (e.g. v18.x.x), skip to Step 2.

If NOT installed — install Node.js:

1. Go to https://nodejs.org
2. Download the LTS version (left button)
3. Run the installer package
4. Follow all the prompts (click Continue, Agree, Install)
5. After install, close and reopen Terminal
6. Run node --version to confirm it works

---

STEP 2 — Open the Project in VS Code

1. Download and unzip the NEXAFLOW.zip file
2. You should see a folder called nexaflow
3. Open Visual Studio Code
   • If you don't have it: download from https://code.visualstudio.com
4. In VS Code: go to File → Open Folder
5. Navigate to and select the nexaflow folder
6. Click "Open"

---

STEP 3 — Open the Integrated Terminal in VS Code

In VS Code:

• Press Control + ` (backtick key, top-left of keyboard)
• OR go to Terminal → New Terminal in the menu bar

You should see a terminal panel open at the bottom of VS Code.

---

STEP 4 — Install Dependencies

In the VS Code terminal, type this command and press Enter:

npm install

⏳ This will take 1–3 minutes. You'll see packages downloading. Wait until it's fully done (you'll see a blinking cursor and no more output).

If you see a warning about vulnerabilities, that's normal — ignore it for development.

---

STEP 5 — Start the App

In the same terminal, type:

npm start

⏳ Wait about 30–60 seconds. The terminal will say:

Compiled successfully!
Local: http://localhost:3000

✅ Your browser will automatically open to http://localhost:3000

If the browser doesn't open automatically, open any browser and go to:

http://localhost:3000

---

🎯 DEMO WALKTHROUGH (For Hackathon Judges)

1. Dashboard (/)

• See live global map with 7 active shipments
• Color-coded routes: 🟢 on-track · 🟡 at-risk · 🔴 critical
• 8 KPI cards showing real-time supply chain health
• Click any shipment on the map or table for details
• Live alert ticker at the top shows active disruptions

2. Disruptions (/disruptions)

• Click "Run AI Scan" to simulate the AI prediction engine
• See probability bars for each disruption event
• Click "Auto-Reroute" on any disruption card
• Shows affected shipments with delay costs

3. Suppliers (/suppliers)

• Click any supplier card to view detailed risk analysis
• Interactive map shows supplier locations sized by risk
• Risk breakdown: geopolitical · delay history · disruption exposure
• Color coded: 🟢 Low · 🟡 Medium · 🔴 High

4. Route Optimizer (/routes)

• Select SHP-001 for the full optimization demo
• See current vs optimized route comparison
• Map shows both paths simultaneously
• Click "Apply Optimized Route" → see $3,500 savings card appear

5. Inventory (/inventory)

• See Chicago Central (26% fill — CRITICAL) and Dubai Hub (20%)
• Click "Auto Restock" on critical warehouses
• "Transfer Stock" button creates inter-warehouse transfers
• Demand forecast section shows 30-day projections

6. Analytics (/analytics)

• 4 live charts: disruption trends, cost savings, supplier scores, fill rates
• 6-month trend analysis
• Insight cards with AI recommendations

7. Digital Twin Simulation (/simulation)

• Select "Port Closure — Shanghai" scenario
• Click "Run Simulation"
• Watch the AI log fill in real-time showing system response
• See final result: $52,000 saved 💰

8. AI Chat Assistant

• Click the teal chat button (bottom right corner)
• Try asking:
  • "Which shipments are at risk?"
  • "Best route for SHP-001?"
  • "Stockout warnings?"
  • "Supplier health summary"

---

🛑 HOW TO STOP THE APP

In the VS Code terminal, press:

Control + C

---

🔄 HOW TO RESTART

npm start

---

📁 PROJECT STRUCTURE

nexaflow/
├── public/
│   └── index.html          # HTML shell
├── src/
│   ├── data/
│   │   └── mockData.js     # All simulated data (shipments, suppliers, warehouses)
│   ├── components/
│   │   ├── Dashboard/
│   │   │   └── AlertBanner.js    # Scrolling alert ticker
│   │   └── Chat/
│   │       └── ChatAssistant.js  # AI chat interface
│   ├── pages/
│   │   ├── Dashboard.js          # Main map view
│   │   ├── DisruptionMonitor.js  # AI disruption alerts
│   │   ├── SupplierPanel.js      # Supplier risk scoring
│   │   ├── RouteOptimizer.js     # Route comparison & optimization
│   │   ├── InventoryManager.js   # Warehouse stock tracking
│   │   ├── AnalyticsPage.js      # Charts & predictive analytics
│   │   └── SimulationPanel.js    # Digital twin simulation
│   ├── App.js              # Routing & sidebar
│   ├── App.css             # Full design system
│   └── index.js            # React entry point
└── package.json            # Dependencies

---

🧠 TECH STACK

Layer	Technology
Frontend	React 18
Maps	Leaflet.js + React-Leaflet
Charts	Chart.js + React-ChartJS-2
Icons	Lucide React
Routing	React Router v6
Fonts	Syne + Space Mono + DM Sans
Map Tiles	CartoDB Dark Matter
Data	Simulated mock data (realistic)

---

🏆 HACKATHON HIGHLIGHTS

• ✅ AI Disruption Predictor — probability scoring with severity classification
• ✅ Dynamic Route Optimizer — A*/Dijkstra visualization with cost/time savings
• ✅ Supplier Risk Engine — 0–100 scoring with geopolitical + delay factors
• ✅ Smart Inventory Manager — stockout prediction + auto-restock
• ✅ Digital Twin Simulation — real-time scenario playback with log
• ✅ Cost Loss Calculator — savings displayed on apply
• ✅ AI Chat Assistant (NEXUS) — natural language Q&A
• ✅ Predictive Analytics — 6-month trend charts
• ✅ Sustainability Tracker — CO₂ avoided metric
• ✅ Alert Engine — live scrolling disruption ticker
• ✅ Role-Ready Architecture — modular page structure

---

❓ TROUBLESHOOTING

"npm: command not found" → Node.js is not installed. Go back to Step 1.

"Cannot find module..." → Run npm install again in the terminal.

App loads but map is blank → Wait a few seconds — map tiles load from the internet. Check your WiFi.

Port 3000 already in use → Type Y and press Enter when prompted to use a different port.

Terminal shows red errors after npm start → Try: rm -rf node_modules && npm install && npm start

---

Built with ❤️ for the national hackathon · NEXAFLOW v1.0