Senior Frontend Developer

Senior Frontend Developer Next.js & TypeScript (FinTech)

1. Job Title

Senior Frontend Developer Next.js & TypeScript

2. Experience Required

• 3-5 years of professional hands-on experience in frontend development.

Minimum 3 years of hands-on experience with React.js.

• Minimum 2 years of hands-on experience with Next.js and TypeScript. Experience developing and maintaining production-level web applications.
• Experience building complex dashboards, enterprise applications, and reusable UI components.

Ability to take ownership of frontend implementation, code quality, and technical decisions.

FinTech, Banking, Payment Gateway, or enterprise SaaS experience is strongly preferred.

3. Educational Qualification

Preferred qualifications:

• B.E./B.Tech in Computer Science, Information Technology, or a related technical discipline.

MCA, M.Sc. Computer Science/IT, or equivalent qualifications may also be considered.

Strong practical frontend development skills and production experience are essential.

4. Core Technical Skills

A. JavaScript and TypeScript

• Strong knowledge of modern JavaScript (ES6+).
• TypeScript interfaces, types, generics, utility types, and type narrowing.
• Async/await, Promises, event handling, and error handling.
• Modules, closures, scope, and object-oriented programming fundamentals.
• Writing maintainable, reusable, type-safe code.
• Debugging browser and application issues.

B. React.js

Strong hands-on experience building production applications using React.js.

Functional components, props, state, and component composition.

React Hooks, including useState, useEffect, useMemo, useCallback, and custom hooks.

Reusable components and scalable frontend architecture.

Forms, validation, conditional rendering, and dynamic UI. API integration and asynchronous data handling. Performance optimization and unnecessary re-render prevention. Error boundaries, loading states, empty states, and error handling. Understanding of React rendering behavior and component lifecycle concepts.

C. Next.js

Hands-on experience developing production applications using Next.js. Next.js App Router, layouts, pages, nested routes, route groups, and navigation.

Server Components and Client Components.

Server-Side Rendering (SSR), Static Site Generation (SSG), and Client-Side Rendering (CSR).

Data fetching, caching, revalidation, and rendering strategies.

Route handlers and middleware where appropriate.

Authentication-protected routes and role-based navigation.

Loading, error, and not-found handling.

Environment variables and application configuration.

Image optimization, code splitting, and performance optimization.

Understanding of server/client boundaries and Next.js security considerations.

D. Tailwind CSS and Modern UI Component Libraries

Strong hands-on experience with Tailwind CSS.

Mandatory practical experience with at least one modern UI component library, such as shadcn/ui, Material UI, or Ant Design.

Ability to create reusable, responsive, and consistent UI components. Experience with dashboards, data tables, forms, dialogs, dropdowns, filters, date pickers, and navigation components.

Customization of component styles to match approved Figma designs. Understanding of design tokens, typography, spacing, themes, and component consistency.

Ability to maintain and extend a reusable frontend design system.

E. State Management and API Data Management

Hands-on experience with Redux Toolkit or Zustand for client-side state management.

Practical experience with TanStack Query (React Query) or an equivalent server-state management solution.

Understanding of local state, global state, server state, caching, refetching, and cache invalidation.

Managing loading states, API errors, stale data, and asynchronous operations.

REST API integration using Fetch, Axios, or equivalent tools.

Form submission, validation, pagination, filtering, sorting, and search. Understanding of request cancellation, duplicate requests, and concurrent API calls.

Ability to choose suitable state management approaches based on application requirements.

F. Micro-Frontend Architecture

Understanding of Micro-Frontend Architecture and its use in large-scale enterprise applications.

Knowledge of independently developed frontend modules and their integration into a unified application.

Understanding of module boundaries, shared components, routing, authentication, and cross-module communication.

Knowledge of shared dependencies, version compatibility, independent deployments, and failure isolation.

Understanding of Module Federation or an equivalent micro-frontend integration approach.

Ability to evaluate the benefits, limitations, and operational complexity of micro-frontends.

Ability to collaborate with the System Architect on frontend architecture decisions. Hands-on production experience with Module Federation is preferred. The candidate should understand when a micro-frontend architecture is appropriate and when a modular frontend application is sufficient.

G. HTML, CSS, and Responsive Design

Strong knowledge of semantic HTML5 and modern CSS.

Flexbox, CSS Grid, responsive layouts, and media queries.

Responsive design for desktop, tablet, and mobile.

Cross-browser compatibility and accessibility fundamentals.

Pixel-accurate implementation of approved Figma designs.

Consistent user experience across different screen sizes.

5. FinTech Product and Dashboard Experience

The candidate should have experience developing complex, data-driven enterprise applications. FinTech or payment-domain experience is strongly preferred. The frontend will support the following products:

1. Super Admin Dashboard Platform administration, user management, roles, permissions, and system-level operations.

2. Platform User Management User creation, role assignment, permission configuration, and account status management.

3. Merchant Dashboard Merchant profiles, configurations, API credentials, and operational status.

4. Merchant Onboarding & KYC Registration forms, document uploads, verification status, and approval workflows.

5. Payment Collections Transaction lists, status filters, payment details, and reports.

6. Payouts Payout initiation, maker-checker approvals, status tracking, and failure handling.

7. Bank Switch & Integrations Integration status, routing information, and operational monitoring interfaces where applicable.

8. Reconciliation & Settlement Transaction matching, mismatch reports, settlement tracking, and operational views.

9. Autopay Mandate management and recurring-payment workflows.

10. Refunds & Chargebacks Refund tracking, dispute details, and operational workflows.

11. Risk & Fraud Management Risk indicators, alerts, review queues, and case-management interfaces.

12. Notifications, Audit Logs & Reporting Activity history, searchable records, filters, exports, and reports.

The candidate should understand how business requirements translate into screens, user actions, validations, permissions, and API interactions.

6. Authentication, Authorization, and Frontend Security

Implement secure login, logout, and session-handling flows.

Understanding of JWT authentication and token lifecycle.

Role-Based Access Control (RBAC) and permission-based UI rendering.

Protected routes and access restrictions for different user roles.

Secure handling of authentication state and sensitive information.

Avoiding exposure of credentials, secrets, and sensitive configuration in client-side code.

Understanding of XSS, CSRF, clickjacking, and common web security risks.

Secure handling of file uploads and user inputs.

Understanding that hiding UI elements is not a substitute for backend authorization.

Coordination with Backend Developers to ensure API access controls are correctly enforced.

7. Forms, Tables, and Data-Heavy Interfaces

Complex forms with validations and conditional fields.

Multi-step merchant onboarding and approval workflows.

Data tables with sorting, filtering, pagination, and row actions.

File and document uploads with validation and progress states.

Transaction detail screens, status indicators, and confirmation dialogs.

Handling large datasets and performance-sensitive dashboards.

Clear user feedback for successful, failed, and pending operations.

Accessibility and usability for enterprise users.

8. Testing and Code Quality

Hands-on experience with Jest or Vitest.

React component testing using React Testing Library.

Unit and integration testing for components and frontend business logic.

API mocking and testing loading, success, and error scenarios.

End-to-end testing using Playwright or Cypress.

ESLint, Prettier, and consistent coding standards.

Debugging browser issues and resolving production defects.

Code reviews, refactoring, and maintainable component design.

9. Performance, Monitoring, and Error Tracking

Frontend performance profiling and optimization.

Understanding Core Web Vitals and page-rendering performance.

Bundle-size optimization, lazy loading, and code splitting.

Avoiding unnecessary API calls and excessive component re-renders.

Browser developer tools for debugging network and rendering issues. Frontend error monitoring using Sentry or an equivalent tool.

Understanding client-side errors, API failures, and production error reports.

Monitoring frontend performance and coordinating issue resolution with the backend team.

10. Git, Docker, CI/CD, and Deployment

Git, branching strategies, pull requests, and code reviews.

Understanding frontend CI/CD pipelines.

Environment-specific configuration and production builds.

Docker fundamentals for containerizing frontend applications.

Understanding Nginx or reverse proxies, domains, and HTTPS.

Build failures, deployment troubleshooting, and release verification.

Collaboration with the Backend Developer and DevOps/System Administrator during releases.

Understanding rollback procedures and release management.

11. Responsibilities

Develop and maintain production-ready FinTech web applications using Next.js, React.js, and TypeScript.

Convert approved Figma designs into responsive and reusable UI components.

Implement dashboards, forms, tables, filters, and approval workflows.

Integrate frontend applications with Java Spring Boot REST APIs.

Implement authentication flows, role-based navigation, and permission-aware interfaces.

Build and maintain consistent UI components using Tailwind CSS and the selected component library.

Implement suitable client-state and server-state management solutions.

Follow approved frontend architecture and design standards.

Write unit, integration, and end-to-end tests as appropriate.

Optimize application performance, reliability, accessibility, and maintainability.

Identify frontend dependencies, technical risks, and integration issues.

Coordinate with the System Architect, BA, UI Designer, Backend Developer, QA, and DevOps/System Administrator.

Support deployment, production troubleshooting, and technical documentation.

12. Frontend Lead-Type Responsibilities

The candidate must be a hands-on senior developer who can take ownership of frontend implementation as the team grows.

Establish frontend coding standards, reusable component patterns, and project structure.

Recommend suitable state management, API integration, and component architecture.

Review code and guide junior frontend developers when required.

Ensure consistency across dashboards and application modules.

Estimate frontend tasks and identify implementation dependencies.

Coordinate with the System Architect on frontend architecture and API contracts.

Work with the UI Designer to resolve design and implementation gaps. Evaluate micro-frontend architecture where justified by project scale and team requirements.

Identify security, performance, accessibility, and maintainability issues.

Ensure that approved business flows and designs are implemented correctly.

Maintain frontend technical documentation and onboarding guidance. This is a hands-on senior development position, not a purely managerial role.

13. Mandatory Skills Summary

3-5 years of professional frontend development experience.

Strong React.js, Next.js, and TypeScript skills.

Minimum 2 years of hands-on Next.js experience.

Strong Tailwind CSS knowledge.

Practical experience with at least one modern UI component library.

Redux Toolkit or Zustand for client-side state management.

TanStack Query or an equivalent solution for server-state management.

Understanding of Micro-Frontend Architecture.

REST API integration with backend services.

Authentication, RBAC, and permission-aware UI implementation.

Responsive design and Figma implementation.

Unit testing, integration testing, and debugging.

Git, code reviews, and frontend performance optimization.

Ability to take ownership of frontend technical implementation.

14. Preferred Skills

FinTech, Banking, Payment Gateway, or enterprise SaaS experience.

Production experience with Module Federation.

Playwright/Cypress and frontend error monitoring.

Docker and CI/CD pipeline experience.

OpenTelemetry or frontend performance monitoring integrations.

Accessibility and advanced performance optimization.

15. Candidate Evaluation Criteria Candidates will be assessed on:

Practical React.js, Next.js, and TypeScript skills.

Tailwind CSS and UI component library implementation.

State management and API integration.

Frontend architecture and reusable component design.

Micro-frontend concepts and architectural trade-offs.

Authentication, RBAC, and secure UI flows.

Testing, debugging, and performance optimization.

Code review and technical ownership.

Ability to build enterprise-grade dashboard interfaces.