{"id":30672827,"url":"https://github.com/will8ug/webflux-client-poc-ts","last_synced_at":"2025-09-01T05:39:12.171Z","repository":{"id":311612328,"uuid":"1043735682","full_name":"will8ug/webflux-client-poc-ts","owner":"will8ug","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-25T13:09:50.000Z","size":104,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-25T15:22:36.083Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/will8ug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-24T14:08:12.000Z","updated_at":"2025-08-25T13:09:53.000Z","dependencies_parsed_at":"2025-08-25T15:22:45.898Z","dependency_job_id":"e3c66f17-04d7-42b6-b045-68126f0d4a75","html_url":"https://github.com/will8ug/webflux-client-poc-ts","commit_stats":null,"previous_names":["will8ug/webflux-client-poc-ts"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/will8ug/webflux-client-poc-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/will8ug%2Fwebflux-client-poc-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/will8ug%2Fwebflux-client-poc-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/will8ug%2Fwebflux-client-poc-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/will8ug%2Fwebflux-client-poc-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/will8ug","download_url":"https://codeload.github.com/will8ug/webflux-client-poc-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/will8ug%2Fwebflux-client-poc-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273077227,"owners_count":25041358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-01T05:39:11.623Z","updated_at":"2025-09-01T05:39:12.122Z","avatar_url":"https://github.com/will8ug.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebFlux Reactive Client Demo\n\nA TypeScript frontend application that demonstrates how to fully utilize the reactive power of Spring WebFlux APIs using modern reactive programming patterns.\n\n## 🚀 Features\n\n- **Reactive HTTP Client**: Built with RxJS and Axios for non-blocking HTTP requests\n- **Streaming Data Handling**: Real-time data streaming with backpressure handling\n- **Error Recovery**: Automatic retry mechanisms and graceful error handling\n- **Modern UI**: React with TypeScript and responsive design\n- **Comprehensive Testing**: Unit tests, integration tests, and reactive pattern testing\n\n## 🏗️ Architecture\n\nThis project demonstrates several key reactive programming concepts:\n\n### 1. Reactive HTTP Client (`src/services/api.ts`)\n- **RxJS Observables**: All HTTP requests return observables for reactive data flow\n- **Automatic Retry**: Built-in retry logic with exponential backoff\n- **Error Handling**: Reactive error streams with proper error transformation\n- **Request Caching**: ShareReplay for efficient request caching\n- **Timeout Handling**: Configurable timeouts with reactive error propagation\n\n### 2. Reactive Hooks (`src/hooks/useReactiveApi.ts`)\n- **Custom React Hooks**: Encapsulate reactive logic for React components\n- **State Management**: Reactive state updates with loading, error, and data states\n- **Subscription Management**: Automatic cleanup of subscriptions\n- **Mutation Hooks**: Specialized hooks for create, update, delete operations\n\n### 3. Streaming Demo (`src/components/StreamingDemo.tsx`)\n- **Real-time Data Flow**: Demonstrates streaming data from WebFlux\n- **Backpressure Handling**: RxJS automatically handles data flow control\n- **Memory Efficiency**: Processes data as it arrives, not all at once\n\n## 🛠️ Technology Stack\n\n- **Frontend**: React 18 + TypeScript\n- **Reactive Programming**: RxJS 7\n- **HTTP Client**: Axios with RxJS integration\n- **Build Tool**: Vite\n- **Testing**: Jest + React Testing Library\n- **Styling**: Modern CSS with responsive design\n\n## 📦 Installation\n\n1. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n2. **Start the WebFlux API**\n   \n   Note: Assume the WebFlux API runs on port 9001 by default.\n\n3. **Start the development server**:\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser** and navigate to `http://localhost:3000`\n\n## 🧪 Testing\n\n### Unit Tests\n```bash\nnpm test\n```\n\n### Test Coverage\n```bash\nnpm run test:coverage\n```\n\n### Watch Mode\n```bash\nnpm run test:watch\n```\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate a `.env` file in the root directory:\n\n```env\nVITE_API_BASE_URL=http://localhost:9001\n```\n\n### API Proxy\n\nThe development server is configured to proxy API requests to the WebFlux backend:\n\n```typescript\n// vite.config.ts\nserver: {\n  proxy: {\n    '/api': {\n      target: 'http://localhost:9001',\n      changeOrigin: true,\n    },\n  },\n}\n```\n\n## 📚 Reactive Patterns Demonstrated\n\n### 1. Observable Streams\n```typescript\n// All API calls return observables\napiService.getAllUsers().subscribe({\n  next: (users) =\u003e console.log('Users received:', users),\n  error: (error) =\u003e console.error('Error:', error),\n  complete: () =\u003e console.log('Stream completed')\n});\n```\n\n### 2. Error Handling with Retry\n```typescript\n// Automatic retry with exponential backoff\napiService.getAllUsers().pipe(\n  retry({ count: 3, delay: 1000 }),\n  catchError(handleError)\n).subscribe(/* ... */);\n```\n\n### 3. Request Caching\n```typescript\n// ShareReplay caches the result for multiple subscribers\nprivate get\u003cT\u003e(url: string): Observable\u003cT\u003e {\n  return from(apiClient.get\u003cT\u003e(url)).pipe(\n    shareReplay(1) // Cache for multiple subscribers\n  );\n}\n```\n\n### 4. Streaming Data\n```typescript\n// Handle streaming data from WebFlux\napiService.getUsersStream().subscribe({\n  next: (user) =\u003e console.log('User streamed:', user),\n  complete: () =\u003e console.log('Stream completed')\n});\n```\n\n### 5. React Integration\n```typescript\n// Custom hook for reactive data\nconst { data: users, loading, error, refetch } = useUsers();\n```\n\n## 🎯 Key Benefits of Reactive Programming\n\n### 1. **Non-blocking Operations**\n- All HTTP requests are non-blocking\n- UI remains responsive during data loading\n- Efficient resource utilization\n\n### 2. **Automatic Error Recovery**\n- Built-in retry mechanisms\n- Graceful error handling\n- User-friendly error messages\n\n### 3. **Memory Efficiency**\n- Streaming processes data as it arrives\n- Automatic cleanup of subscriptions\n- No memory leaks\n\n### 4. **Backpressure Handling**\n- RxJS automatically handles data flow control\n- Prevents overwhelming the client with data\n- Smooth user experience\n\n### 5. **Real-time Updates**\n- Streaming data from WebFlux\n- Live updates without polling\n- Efficient real-time communication\n\n## 🔄 Integration with WebFlux\n\nThis frontend is designed to work seamlessly with your Spring WebFlux API:\n\n### API Endpoints Used\n- `GET /api/users` - Get all users (streaming)\n- `GET /api/users/{id}` - Get user by ID\n- `POST /api/users` - Create new user\n- `DELETE /api/users/{id}` - Delete user\n- `GET /api/users/test-error` - Test error handling\n- `GET /api/users/test-bad-request` - Test bad request handling\n\n### Reactive Data Flow\n1. **WebFlux API** emits reactive streams (Flux/Mono)\n2. **Frontend** subscribes to these streams via RxJS\n3. **UI** updates reactively as data flows\n4. **Error handling** is reactive and automatic\n\n## 🚀 Production Deployment\n\n### Build for Production\n```bash\nnpm run build\n```\n\n### Preview Production Build\n```bash\nnpm run preview\n```\n\n### Environment Configuration\nSet the `VITE_API_BASE_URL` environment variable to point to your production WebFlux API.\n\n## 📖 Learning Resources\n\n- [RxJS Documentation](https://rxjs.dev/)\n- [Spring WebFlux Documentation](https://docs.spring.io/spring-framework/reference/web/webflux.html)\n- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)\n- [Reactive Programming Principles](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwill8ug%2Fwebflux-client-poc-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwill8ug%2Fwebflux-client-poc-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwill8ug%2Fwebflux-client-poc-ts/lists"}