About the Role
The Frontend Developer will be responsible for designing and developing responsive web application interfaces using React and TypeScript, integrating with REST APIs, and building efficient, accessible interfaces and workflows for examination-related systems within a defined application architecture.
Responsibilities
- The Frontend Developer will be responsible for:
- Designing and developing responsive web application interfaces using React and TypeScript.
- Building reusable, maintainable, and well-structured UI components.
- Integrating the frontend with REST APIs provided by the ASP.NET Core backend.
- Developing interfaces for exam and question management.
- Developing marker allocation and workload interfaces.
- Developing reviewer and moderation workflows for double-marked responses and marking discrepancies.
- Developing dashboards, reports, tables, filters, and progress indicators.
- Implementing role-based user-interface behavior for administrators, coordinators, markers, and reviewers.
- Handling API errors, loading states, network interruptions, and recovery gracefully.
- Ensuring good performance when working with large datasets and high-resolution examination images.
- Implementing appropriate client-side state management and data-fetching strategies.
- Writing automated frontend tests.
- Participating in code reviews and technical design discussions.
- Working closely with backend developers, UI/UX designers, QA engineers, and product stakeholders.
Qualifications
Required Skills
- Strong knowledge of JavaScript and TypeScript.
- Strong practical experience with React.
- Good understanding of React component architecture, hooks, and application state.
- Experience integrating frontend applications with REST APIs.
- Strong knowledge of HTML and CSS.
- Experience building complex forms and data-driven user interfaces.
- Good understanding of asynchronous programming and browser networking.
- Experience handling authentication and authorization in web applications.
- Ability to build reusable and maintainable component architectures.
- Good understanding of responsive design.
- Experience with Git and collaborative software development.
- Ability to write clean, maintainable, and testable code.
Preferred Skills
- Experience in any of the following would be an advantage:
- Material UI (MUI) or another mature React component library.
- TanStack Query / React Query or similar server-state management tools.
- Advanced data grids and large data tables.
- Image viewers, document viewers, Canvas, SVG, or similar browser graphics technologies.
- Image zooming, panning, selection, overlays, and coordinate-based regions.
- PDF or high-resolution image display in web applications.
- State-management libraries such as Zustand or Redux Toolkit.
- React Hook Form or similar form-management libraries.
- WebSockets or other real-time communication technologies.
- OpenAPI-generated TypeScript clients.
- Accessibility standards, particularly WCAG 2.2.
- Automated testing using tools such as Vitest, Jest, React Testing Library, or Playwright.
- Performance optimization for large React applications.
- Internationalization and right-to-left (RTL) interfaces.
- Education, assessment, examination, document-management, or workflow systems.
Application Architecture
- The developer will work within an architecture approximately consisting of:
- Web Frontend: React / TypeScript
- Backend: ASP.NET Core / C#
- API: REST / OpenAPI
- Database: PostgreSQL
- Scanned Document Storage: Object storage
- Source Control & CI/CD: Git / GitLab
- The frontend will not communicate directly with the database. All business operations and data access will be performed through backend APIs.
Key Technical Challenges
- This project requires more than conventional web-page development. Important frontend challenges include:
- Efficiently displaying and manipulating high-resolution scanned examination images.
- Mapping predefined question coordinates to displayed image regions.
- Providing smooth zooming and panning without unnecessary image downloads.
- Building extremely efficient repetitive marking workflows.
- Preventing accidental loss of marks during navigation or network interruptions.
- Managing complex application and server state.
- Presenting large datasets efficiently.
- Supporting keyboard-heavy workflows for professional markers.
- Building accessible interfaces without sacrificing marking speed.
- Clearly communicating workflow states such as pending, marked, double-marked, disputed, reviewed, and finalized.
Working Hours:
- Monday to Friday: 8:00 AM to 5:00 PM (including 1 hour lunch break)
- Saturday: 8:00 AM to 1:30 PM
