Role 3 — React Web Developer

Headcount    3
Reporting to    Technical Lead (DaaS Labs)
Seniority    3-6 years; junior-to-mid preferred per Nick Green's guidance
Repository    FT-web (React 18, MUI v5, MSAL, React hooks / useReducer)

3.8 Functional Requirements

The React Web Developer builds and maintains the FT web application — the dashboard-heavy coordinator, dispatcher, timekeeper, and branch operations interface. The app is data-dense, with complex grids, calendar views, map integrations, and real-time job status displays.

•    Build responsive, accessible UI components using React 18 and Material-UI v5
•    Implement complex data grid interfaces and dashboard views (MUI X Data Grid)
•    Develop and maintain authentication flows using MSAL and Azure AD
•    Build form workflows with validation — Formik + Yup or equivalent
•    Consume RESTful APIs via Axios, handle loading, error, and empty states consistently
•    Implement file export features — Excel (XLSX) and PDF generation (jsPDF)
•    Integrate Azure Application Insights and Microsoft Clarity for observability
•    Ensure cross-browser compatibility and responsive behavior across device sizes
•    Collaborate with UX/UI designers to translate mockups into production-quality components
•    Collaborate with QA engineers to validate releases and write component-level tests
•    Participate in code reviews, sprint ceremonies, and pair programming as needed

3.9 Technical Requirements

Core Stack — Required
•    React 18.3+ — functional components, hooks (useState, useEffect, useReducer, useContext, useMemo, useCallback), modern patterns
•    JavaScript ES6+ — destructuring, async/await, modules, optional chaining
•    TypeScript — must be comfortable writing TypeScript; not JavaScript-only
•    Material-UI (MUI) v5 — component library, theming, responsive grid
•    React Router 6+ — SPA navigation, nested routes, protected routes

State Management — Important Clarification
The FT-web app uses React hooks and useReducer, not Redux. Candidates whose primary state management experience is Redux should demonstrate familiarity with hook-based patterns. Redux experience alone is not considered architectural alignment with this codebase.

•    useReducer + Context API for shared state — required
•    Redux familiarity is acceptable if candidate can demonstrate hook-based patterns in interview
•    No Redux in the current web codebase — do not overweight Redux experience in screening

Authentication — Required
•    MSAL (Microsoft Authentication Library) — token acquisition, silent refresh, protected routes
•    Azure AD / Entra ID integration patterns — user claims, role-based rendering

Additional Skills — Required
•    Formik + Yup (or React Hook Form + Zod) — complex multi-step form workflows
•    Axios — REST API consumption, interceptors, error handling
•    MUI X Data Grid — large dataset rendering, sorting, filtering, pagination
•    XLSX and jsPDF — file export functionality
•    Jest + React Testing Library — component testing

Additional Skills — Preferred
•    Azure Application Insights client SDK integration
•    Microsoft Clarity implementation
•    Create React App with CRACO configuration
•    Map or calendar component experience (the dispatcher view uses both)