Frontend Engineer

Experience: 6.00 + years

Salary: USD 2500 / month (based on experience)

Expected Notice Period: 7 Days

Shift: (GMT+05:30) Asia/Kolkata (IST)

Opportunity Type: Remote

Placement Type: Full Time Contract for 6 Months(40 hrs a week/160 hrs a month)

**(*Note: This is a requirement for one of Uplers' client - BR)

**What do you need for this opportunity?

Must have skills required:

NA, CI/CD, Component-Based Architecture, Jest or Vitest, Performance Optimization, react, Redux, Tailwind CSS, TypeScript

BR is Looking for:**

General Technical Overview

Potential Partnership

Phase 1 of development (first 2 months) will focus on establishing a partnership grounded

in trust and quality, delivering a modular, high-performance base architecture alongside a

foundational implementation of the dashboard using TypeScript, React, and Tailwind CSS.

The architecture will prioritize scalability, maintainability, and a strong developer

experience, with an emphasis on component modularity, performance optimization, and

seamless integration with a design system.

Importantly, while the initial focus is on the dashboard, the architecture and development

effort are not limited to this feature alone; should the dashboard be completed earlier than

expected or if internal priorities shift, the development resources and base architecture can

be readily adapted to other features or modules.

This flexible foundation is intended to support and accelerate future development phases,

including the progressive migration of additional features and functionalities from the

existing internal project.

Key Technical Features & Specifications

Technology Stack

Language: TypeScript

Framework: React

Styling: Tailwind CSS

Routing: React Router v6 or TanStack Router

Global State Management: Zustand or Redux Toolkit

Local State Management: React Context + useReducer

Architecture & Scalability

Component-Based Architecture: Modular and domain-driven structure enabling

feature isolation and reuse.

Optimized File Structure: Organized by features/domains to enhance

discoverability and reduce coupling.

Design System Integration: Figma integration via tokens (optional) and

Storybook for visual documentation and approval.

Theme Support: Built-in dark/light mode support.

Internationalization (i18n): Ready for multilingual interfaces using tools like

i18next.

Performance Optimization:

Lazy loading of routes and components

Debounced inputs, memoization, virtualization (if needed)

Efficient rendering of large datasets

UI/UX Requirements

Responsive & Accessible Design: Desktop-first layout adaptable to smaller

viewports (portrait-oriented).

Persistent Navigation: Sidebar and topbar with responsive collapse/expand

behavior.

Stateful UX Support:

Loading indicators (skeletons, spinners)

Empty state components

Data Export Features: CSV, PDF exports (format and content to be defined)

Conditional UI Rendering: Based on user roles/permissions

Notification System: Inline and toast-based alerts

Component Library & Design System

Component Library: Radix UI or ShadCN (for accessible and themeable primitives)

Design Documentation: Storybook (isolated component testing, visual QA, and

collaboration)

Design Tokens: Optional use of @tokens-studio/react for importing Figma

variables directly into code

Testing & Quality Assurance

Unit Testing: Vitest (modern, fast alternative to Jest) or Jest

Integration Testing: React Testing Library (focuses on testing components the

way users interact with them)

End-to-End (E2E) Testing: Playwright or Cypress (for full user-flow testing across

the UI and backend)

Accessibility Audits: axe-core, WAVE, or Pa11y (to ensure WCAG-compliant

interfaces)

Code Coverage: c8 with Codecov integration (automated coverage reporting on

pull requests)

CI/CD & Development Workflow

CI/CD Pipeline: GitHub Actions for:

Linting (ESLint)

Formatting (Prettier)

Running tests and builds

Version Control: Git with a clean PR strategy and conventional commit standards

Code Quality Gates: Optional SonarCloud integration for detecting code smells,

duplication, and technical debt

Performance Audits: Lighthouse CI for tracking performance, accessibility, and

SEO across PRs

Observability & UX Monitoring (Optional)

Error Monitoring: Sentry or LogRocket for real-time exception logging and

alerting session replays

UX Session Replay: LogRocket for identifying UX bottlenecks through user

API Integration & Design

API Review: Audit and refactor existing APIs as needed

Mock API Layer: Use Beeceptor or Mockoon to simulate endpoints during

frontend development

API Standards: Define consistent patterns for RESTful APIs or GraphQL,

depending on backend direction

Functional Scope – Phase I: "Super Dashboard"

The initial delivery phase will focus on developing a robust, performant dashboard ("Super

Dashboard") featuring:

Settings Management: User/system-level configurations

Advanced Filtering: Multi-criteria, dynamic filter panel

Global Search: Full-text search across modules

Date Selector: Predefined and custom date range pickers

Navigation: Persistent sidebar + topbar with adaptive layout

Role-Based Access: Conditional rendering based on user roles

Notifications: Visual alerts for system or user events

Responsive Layout: Collapsible/resizable panels; mobile-adaptive components

Loading/Empty States: Visual cues for data absence or load delays

Data Exporting: CSV/PDF output (final specs TBD)

Project Considerations

Design and UX workflows should be provided by b-rayZ.

Final Backend, and API infrastructure will be provided by b-rayZ, but should be

revised and defined by the frontend developer.

Frontend developers are responsible for:

Develop frontend

Reviewing and refining API specs

Ensuring frontend-backend contract alignment

Mocking endpoints when backend is not ready

Ensure frontend best practices

Maintain daily communication with b-rayZ

How to apply for this opportunity?

• Step 1: Click On Apply! And Register or Login on our portal.
• Step 2: Complete the Screening Form & Upload updated Resume
• Step 3: Increase your chances to get shortlisted & meet the client for the Interview!

About Uplers:

Our goal is to make hiring reliable, simple, and fast. Our role will be to help all our talents find and apply for relevant contractual onsite opportunities and progress in their career. We will support any grievances or challenges you may face during the engagement.

(Note: There are many more opportunities apart from this on the portal. Depending on the assessments you clear, you can apply for them as well).

So, if you are ready for a new challenge, a great work environment, and an opportunity to take your career to the next level, don't hesitate to apply today. We are waiting for you!**