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, TypeScriptBR is Looking for:
General Technical OverviewPotential PartnershipPhase 1 of development (first 2 months) will focus on establishing a partnership groundedin trust and quality, delivering a modular, high-performance base architecture alongside afoundational implementation of the dashboard using TypeScript, React, and Tailwind CSS.The architecture will prioritize scalability, maintainability, and a strong developerexperience, with an emphasis on component modularity, performance optimization, andseamless integration with a design system.Importantly, while the initial focus is on the dashboard, the architecture and developmenteffort are not limited to this feature alone; should the dashboard be completed earlier thanexpected or if internal priorities shift, the development resources and base architecture canbe 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 theexisting internal project.Key Technical Features & SpecificationsTechnology StackLanguage: TypeScriptFramework: ReactStyling: Tailwind CSSRouting: React Router v6 or TanStack RouterGlobal State Management: Zustand or Redux ToolkitLocal State Management: React Context + useReducerArchitecture & ScalabilityComponent-Based Architecture: Modular and domain-driven structure enablingfeature isolation and reuse.Optimized File Structure: Organized by features/domains to enhancediscoverability and reduce coupling.Design System Integration: Figma integration via tokens (optional) andStorybook for visual documentation and approval.Theme Support: Built-in dark/light mode support.Internationalization (i18n): Ready for multilingual interfaces using tools likei18next.Performance Optimization:Lazy loading of routes and componentsDebounced inputs, memoization, virtualization (if needed)Efficient rendering of large datasetsUI/UX RequirementsResponsive & Accessible Design: Desktop-first layout adaptable to smallerviewports (portrait-oriented).Persistent Navigation: Sidebar and topbar with responsive collapse/expandbehavior.Stateful UX Support:Loading indicators (skeletons, spinners)Empty state componentsData Export Features: CSV, PDF exports (format and content to be defined)Conditional UI Rendering: Based on user roles/permissionsNotification System: Inline and toast-based alertsComponent Library & Design SystemComponent Library: Radix UI or ShadCN (for accessible and themeable primitives)Design Documentation: Storybook (isolated component testing, visual QA, andcollaboration)Design Tokens: Optional use of @tokens-studio/react for importing Figmavariables directly into codeTesting & Quality AssuranceUnit Testing: Vitest (modern, fast alternative to Jest) or JestIntegration Testing: React Testing Library (focuses on testing components theway users interact with them)End-to-End (E2E) Testing: Playwright or Cypress (for full user-flow testing acrossthe UI and backend)Accessibility Audits: axe-core, WAVE, or Pa11y (to ensure WCAG-compliantinterfaces)Code Coverage: c8 with Codecov integration (automated coverage reporting onpull requests)CI/CD & Development WorkflowCI/CD Pipeline: GitHub Actions for:Linting (ESLint)Formatting (Prettier)Running tests and buildsVersion Control: Git with a clean PR strategy and conventional commit standardsCode Quality Gates: Optional SonarCloud integration for detecting code smells,duplication, and technical debtPerformance Audits: Lighthouse CI for tracking performance, accessibility, andSEO across PRsObservability & UX Monitoring (Optional)Error Monitoring: Sentry or LogRocket for real-time exception logging andalerting session replaysUX Session Replay: LogRocket for identifying UX bottlenecks through userAPI Integration & DesignAPI Review: Audit and refactor existing APIs as neededMock API Layer: Use Beeceptor or Mockoon to simulate endpoints duringfrontend developmentAPI Standards: Define consistent patterns for RESTful APIs or GraphQL,depending on backend directionFunctional Scope – Phase I: "Super Dashboard"The initial delivery phase will focus on developing a robust, performant dashboard ("SuperDashboard") featuring:Settings Management: User/system-level configurationsAdvanced Filtering: Multi-criteria, dynamic filter panelGlobal Search: Full-text search across modulesDate Selector: Predefined and custom date range pickersNavigation: Persistent sidebar + topbar with adaptive layoutRole-Based Access: Conditional rendering based on user rolesNotifications: Visual alerts for system or user eventsResponsive Layout: Collapsible/resizable panels; mobile-adaptive componentsLoading/Empty States: Visual cues for data absence or load delaysData Exporting: CSV/PDF output (final specs TBD)Project ConsiderationsDesign and UX workflows should be provided by b-rayZ.Final Backend, and API infrastructure will be provided by b-rayZ, but should berevised and defined by the frontend developer.Frontend developers are responsible for:Develop frontendReviewing and refining API specsEnsuring frontend-backend contract alignmentMocking endpoints when backend is not readyEnsure frontend best practicesMaintain 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!
