LinkedIn Augmentation Service - Observability Dashboard

A modern React + TypeScript dashboard for monitoring and observing the LinkedIn Augmentation Service.

Features

• Real-time Updates: WebSocket connection for live scrape progress and metrics
• Dashboard Overview: Key stats and active scrapes at a glance
• Scrape Monitoring: Track individual scrape operations with detailed progress
• API Metrics: Monitor API performance, response times, and error rates
• Pipeline Tracking: View pipeline execution history and status
• Error Tracking: Centralized error logging and monitoring

Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• React Router - Routing
• Zustand - State management
• Socket.io Client - WebSocket connections
• Recharts - Data visualization
• Axios - HTTP client
• Lucide React - Icons

Prerequisites

• Node.js >= 20.0.0
• Backend service running on localhost:8080

Getting Started

1. Install Dependencies

npm install

2. Configure Environment

Create a .env.local file in the root directory:

VITE_API_URL=http://localhost:8080
VITE_WS_URL=ws://localhost:8080

3. Start Development Server

npm run dev

The dashboard will be available at http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Project Structure

src/
├── api/              # API client and methods
├── components/       # React components
│   ├── common/      # Reusable components
│   ├── dashboard/   # Dashboard-specific components
│   ├── layout/      # Layout components
│   ├── metrics/     # Metrics visualization components
│   └── scrapes/     # Scrape-related components
├── hooks/           # Custom React hooks
├── pages/           # Page components
├── store/           # Zustand stores
├── types/           # TypeScript type definitions
├── utils/           # Utility functions
├── App.tsx          # Main app component
├── main.tsx         # Entry point
└── index.css        # Global styles

WebSocket Events

The dashboard listens for these real-time events:

• connection:established - WebSocket connection confirmed
• scrape:progress - Scrape progress updates
• api:call - API call metrics
• pipeline:update - Pipeline status changes
• error:occurred - Error notifications

API Endpoints

The dashboard communicates with these backend endpoints:

• GET /api/dashboard/stats - Overall statistics
• GET /api/dashboard/active-scrapes - Currently running scrapes
• GET /api/dashboard/scrapes - Scrape history
• GET /api/dashboard/api-metrics - API performance metrics
• GET /api/dashboard/pipelines - Pipeline executions
• GET /api/dashboard/errors - Error logs
• WS /ws - WebSocket connection

Development

Local Backend Connection

Ensure your backend service is running:

cd ../linkedin-augmentation-service-overhaul
npm run dev

The backend should be available at http://localhost:8080

Building for Production

npm run build

The optimized production build will be in the dist/ directory.

Deployment

This app is configured for deployment to Vercel:

1. Connect your GitHub repository to Vercel
2. Configure environment variables in Vercel dashboard:
   • VITE_API_URL - Production backend URL
   • VITE_WS_URL - Production WebSocket URL
3. Deploy

Troubleshooting

WebSocket Connection Issues

• Verify backend is running and accessible
• Check VITE_WS_URL environment variable
• Ensure no CORS issues between frontend and backend

Build Errors

• Clear node_modules and reinstall: rm -rf node_modules && npm install
• Verify Node.js version: node --version (should be >= 20)

Contributing

1. Create a feature branch
2. Make your changes
3. Test thoroughly with local backend
4. Submit a pull request

License

Proprietary - Series