Cascade simulates a distributed system where multiple microservices stream logs to a central "ingestor" service, which then pipes data to a React dashboard via WebSockets for live traffic monitoring.
- High-Performance Ingestion: Uses Node.js
stream.Transformto handle massive log streams without memory crashes. - Real-Time Updates: Socket.io pushes events to the client instantly.
- Visual Dashboard: React + Recharts for visualizing traffic volume (Logs/Sec).
- Live Log Feed: Scrollable, buffered log table with semantic highlighting.
- Backend: Node.js, Express, Socket.io, Mongoose (MongoDB), TypeScript
- Frontend: React (Vite), TailwindCSS, Recharts, Lucide React
- Generator: Node.js script (simulates microservice traffic)
Before running the project, ensure you have the following installed:
- Node.js (v18+ recommended)
- MongoDB (Must be running locally on port
27017)
Clone the repository and install dependencies for each service:
- Setup Backend
cd backend
npm installNote: Ensure your tsconfig.json is configured correctly.
- Setup Frontend
cd ../frontend
npm install- Setup Generator
cd ../generator
npm installYou will need three terminal windows open to run the full stack.
Terminal 1: Database & Backend
First, make sure MongoDB is running.
- Mac:
brew services start mongodb-community - Windows: Start "MongoDB Server" in Services.
- Linux:
sudo systemc start mongod
Then, start the ingestor server:
npx ts-node src/server.tsExpect output: Cascade Ingestor running on :3001 & MongoDB Connected to Cascade
Terminal 2: Frontend Dashboard
Start the React development server:
cd frontend
npm run devOpen your browser to the URL shown (usually http://localhost:5173). You should see the empty dashboard.
Terminal 3: Traffic Generator
Start the dummy log generator to simulate traffic:
cd generator
npx ts-node dummy.tsExpected output: Continuous logs like Sent: [info] auth-service