Senior React/TypeScript Frontend Architect for Analyst Workbench Redesign and Mobile PWA
Budget: -
HOURLY / FULL_TIME
⭐ 0.00 (0)
Kenya
frontend-development, react-js, typescript, progressive-web-apps
Preferred qualifications
- Experience: Expert
This is a macro and risk intelligence platform covering East Africa. It has a substantial Node.js backend and an existing React/TypeScript dashboard, but the frontend has not kept pace with the platform’s capabilities.
The backend defines roughly 440–500 distinct API path patterns. The React dashboard contains 381 source files and approximately 133,000 lines, with 10 top-level sections and about 73 primary views plus several nested views. Its selectors module is 16,955 lines, and its main types file is 3,932 lines.
What we Need
The engagement has five parts:
- Audit backend capability against actual frontend coverage.
- Redesign the desktop analyst workbench information architecture.
- Remove proven dead, duplicated, stale, and snapshot-dependent frontend code.
- Implement missing analyst workflows against existing authoritative backend contracts.
- Productionize and integrate an already-approved mobile companion design.
First Paid Milestone: Audit and Workbench Design
The first milestone will be funded separately. You will:
• Inventory backend capabilities, routes, roles, country scope, lifecycle rules, and readiness flags.
• Map those capabilities to existing frontend screens, components, hooks, selectors, and API helpers.
• Classify each capability as fully surfaced, partially surfaced, frontend-ready, internal-only, default-off, unsafe, or blocked by a missing backend contract.
• Identify snapshot, WebSocket-state, fixture, mock, hardcoded-data, and fallback dependencies.
• Identify code that is genuinely dead, duplicated, stale, or no longer connected to a rendered workflow.
• Review current analyst journeys, navigation, information density, and workflow dead ends.
• Propose a new information architecture for the desktop analyst workbench.
• Produce wireframes or a clickable prototype for the main workbench areas.
• Deliver a prioritized implementation plan with estimated effort and explicit backend dependencies.
• Not every backend route belongs in the interface. The audit must distinguish analyst-facing capability from internal infrastructure and experimental or default-off systems.
Desktop Analyst Workbench
The desktop application is the main professional environment. The audit and redesign should evaluate workflows such as:
• Country monitoring, alerts, watch conditions, and triage
• Evidence, claims, contradictions, provenance, and grading
• Intelligence products, reports, versions, approval, dissent, publication, dissemination, and feedback
• Collection requirements, collection gaps, candidates, tasks, and source coverage
• Outcomes, history, baselines, forecasts, scenarios, and evaluation
• Source health, freshness, reliability, and trust
• Collaboration, annotations, casefiles, and analyst activity where supported
• Graph, geographic, humanitarian, economic, and operational analysis where contracts are production-ready
The result should be a dense, efficient analyst tool built for repeated work, comparison, evidence review, and accountable decisions. It should not look like a collection of marketing dashboards.
Frontend Architecture and Cleanup
After the audit is accepted, implementation milestones will include:
• Removing code only after proving that it has no required consumer.
• Breaking oversized selectors, API utilities, and types into maintainable domain modules.
• Consolidating duplicated loading, empty, stale, unavailable, validation, and conflict states.
• Replacing snapshot-derived reads when an authoritative backend route already exists.
• Removing production reliance on mock data, fixtures, fabricated IDs, and hardcoded intelligence.
• Preserving role boundaries, country isolation, provenance, versioning, and backend lifecycle rules.
• Expanding existing Node-based frontend contract tests.
• Establishing dedicated React component testing and browser-based end-to-end testing.
• Improving accessibility, responsive behavior, and performance.
The dashboard currently has contract and regression tests, but no dedicated React component-testing framework or modern browser-automation framework.
Missing Analyst Workflows
Approved workflows will be implemented in small, reviewable slices. Every workflow must use an existing authoritative backend contract. After writes, the frontend must invalidate or refetch authoritative data. It must not fabricate records, identifiers, scores, successful states, or optimistic intelligence.
Backend validation and conflict responses must be displayed truthfully. If a required backend contract is missing or unsafe, document it for the backend engineer rather than recreating the rule in browser code.
Mobile Companion
The mobile product is a responsive React web application and installable PWA. The approved mobile design is a companion for alerts, supporting evidence, briefs, reports, country orientation, search, Ask Dagu ((our evidence-grounded LLM assistant) where authorized, and handoff to the desktop workbench. It is not a mobile copy of the full analyst workbench. The prototype is design-complete but not production-wired. The current dashboard has no service worker, web app manifest, or coherent mobile-responsive layout system, so this work includes establishing that foundation.
Mobile screens may only be connected when their backend contracts are approved. Production code must never fall back to design fixtures, mock intelligence, fixture IDs, hardcoded analytics, or simulated freshness. Blocked surfaces must remain truthfully unavailable.
Frontend-Only Boundary
A separate backend engineer owns backend implementation. You may inspect backend source to understand contracts, but this engagement must not modify:
• Backend routes, stores, analytics engines, or persistence
• Authentication or authorization policies
• Production data or server-side data stores
• Environment variables, Railway configuration, or deployment flags
• Default-off capability or production-readiness settings
Backend requirements should be delivered as clearly scoped dependency tickets.
Current Frontend Stack
React 18, TypeScript, Vite, TanStack React Query, Zustand, React Router, Recharts, MapLibre, Leaflet, and deck.gl.
Engagement Terms
• This is a fixed-price, milestone-based engagement expected to run for approximately 3–6 months. Initially, quote only for the audit and workbench-design milestone.
• NDA and full IP assignment are required. Work will take place in a private repository using scoped branches and reviewed pull requests. No direct pushes to main. Existing CI and trust gates must pass, and checks must not be weakened to obtain a green build.
• Collaboration will be async-first, with one or two short video calls per week when useful.
When Applying
Please provide:
• A complex React workbench, analytical product, or operational system you personally designed or rebuilt.
• Your approach to measuring backend capability against frontend coverage.
• How you prove code is dead before removing it.
• How you would reduce snapshot dependence without breaking existing workflows.
• Your experience productionizing PWAs.
• Your fixed-price quote and timeline for the first milestone.
• Confirmation that you personally will perform the work.
Please do not apply if your portfolio is primarily landing pages, templates, React Native applications, or visual reskins.
Open job
AI proposal draft
Generate a short cover letter to copy into the offer. Says you are interested and ready to work.
Sign in to generate an AI proposal draft.
Log in