Andrei
7cb2ff97de
Implemented comprehensive offline-first state management: Redux Store Setup: - Configure Redux Toolkit with @redux-offline/redux-offline - Setup redux-persist with IndexedDB (localforage) - Custom offline config with exponential backoff retry - Normalized state with entity adapters State Slices: - activitiesSlice: Normalized activities with optimistic CRUD - childrenSlice: Normalized children with optimistic CRUD - networkSlice: Network status and connection quality - offlineSlice: Sync queue and pending actions Middleware: - offlineMiddleware: Queue actions when offline - syncMiddleware: Process pending actions when online - Conflict resolution strategies (SERVER_WINS, CLIENT_WINS, LAST_WRITE_WINS, MERGE) - Version-based conflict detection Features: - Optimistic updates for immediate UI feedback - Automatic sync queue with retry logic (5 retries max) - Network detection (browser events + periodic checks) - Connection quality monitoring (excellent/good/poor/offline) - Latency tracking - Conflict resolution with multiple strategies - Entity versioning for optimistic updates Components: - NetworkStatusIndicator: Full-screen status banner - NetworkStatusBadge: Compact app bar badge - ReduxProvider: Provider with network detection setup Custom Hooks: - useAppDispatch/useAppSelector: Typed Redux hooks - useIsOnline: Check online status - useHasPendingSync: Check for pending actions - useSyncStatus: Get sync progress info - useOptimisticAction: Combine optimistic + actual actions - useNetworkQuality: Get connection quality - useIsOptimistic: Check if entity is being synced Documentation: - Comprehensive README with usage examples - Architecture overview - Best practices guide - Troubleshooting section State Structure: - Normalized entities with byId/allIds - Optimistic metadata (_optimistic, _localId, _version) - Entity adapters with memoized selectors - Offline queue persistence to IndexedDB 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
65 lines
1.8 KiB
JSON
65 lines
1.8 KiB
JSON
{
|
|
"name": "maternal-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev -p 3030 -H 0.0.0.0",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"test": "jest",
|
|
"test:watch": "jest --watch",
|
|
"test:coverage": "jest --coverage",
|
|
"test:e2e": "playwright test",
|
|
"test:e2e:ui": "playwright test --ui",
|
|
"test:e2e:headed": "playwright test --headed"
|
|
},
|
|
"dependencies": {
|
|
"@emotion/react": "^11.14.0",
|
|
"@emotion/styled": "^11.14.1",
|
|
"@hookform/resolvers": "^5.2.2",
|
|
"@mui/icons-material": "^5.18.0",
|
|
"@mui/material": "^5.18.0",
|
|
"@mui/material-nextjs": "^7.3.2",
|
|
"@redux-offline/redux-offline": "^2.6.0",
|
|
"@reduxjs/toolkit": "^2.9.0",
|
|
"@tanstack/react-query": "^5.90.2",
|
|
"axios": "^1.12.2",
|
|
"date-fns": "^4.1.0",
|
|
"framer-motion": "^11.18.2",
|
|
"localforage": "^1.10.0",
|
|
"next": "14.2.0",
|
|
"next-pwa": "^5.6.0",
|
|
"react": "^18",
|
|
"react-dom": "^18",
|
|
"react-hook-form": "^7.63.0",
|
|
"react-redux": "^9.2.0",
|
|
"recharts": "^3.2.1",
|
|
"redux-persist": "^6.0.0",
|
|
"socket.io-client": "^4.8.1",
|
|
"web-vitals": "^5.1.0",
|
|
"workbox-webpack-plugin": "^7.3.0",
|
|
"workbox-window": "^7.3.0",
|
|
"zod": "^3.25.76"
|
|
},
|
|
"devDependencies": {
|
|
"@axe-core/react": "^4.10.2",
|
|
"@playwright/test": "^1.55.1",
|
|
"@testing-library/jest-dom": "^6.9.0",
|
|
"@testing-library/react": "^16.3.0",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/node": "^20",
|
|
"@types/react": "^18",
|
|
"@types/react-dom": "^18",
|
|
"identity-obj-proxy": "^3.0.0",
|
|
"jest": "^30.2.0",
|
|
"jest-axe": "^10.0.0",
|
|
"jest-environment-jsdom": "^30.2.0",
|
|
"postcss": "^8",
|
|
"tailwindcss": "^3.4.1",
|
|
"ts-jest": "^29.4.4",
|
|
"typescript": "^5"
|
|
}
|
|
}
|