UI Developer (Javascript)

📍 Job Overview

Job Title: UI Developer (Javascript)

Company: METRO/MAKRO

Location: Pune, Maharashtra, India

Job Type: Full-time

Category: Front-End Engineering / UI Development

Date Posted: May 22, 2026

Experience Level: 8+ Years (5+ in Front-End)

Remote Status: On-Site

🚀 Role Summary

• Spearhead the implementation of high-fidelity, responsive, and accessible user interfaces from design prototypes.

• Drive technical excellence in front-end development by optimizing application performance, including asset loading, code splitting, and bundle size reduction.

• Champion the development and maintenance of a cohesive design system through the creation of scalable, reusable UI components.

• Ensure seamless integration with backend services by effectively consuming REST APIs with clean, maintainable JavaScript.

• Uphold stringent web accessibility standards (WCAG) and cross-browser compatibility, ensuring a consistent user experience across all platforms.

📝 Enhancement Note: While the title is "UI Developer (Javascript)", the responsibilities and qualifications clearly indicate a senior front-end engineering role with a strong emphasis on JavaScript, performance, and accessibility, rather than purely UI design. The AI-derived experience level of "10+" years is also noted, suggesting this role is for a highly experienced candidate, potentially exceeding the stated 8+ years.

📈 Primary Responsibilities

• Translate Figma (or similar design tools) prototypes into pixel-perfect, semantic HTML5, modern CSS/SCSS, and well-structured JavaScript code.

• Develop and maintain a robust design system by architecting scalable, reusable UI components that ensure visual consistency and brand integrity.

• Implement advanced performance optimization techniques, including but not limited to, lazy loading, code splitting, dynamic imports, and bundle size analysis, to meet Lighthouse and Core Web Vitals targets.

• Ensure comprehensive cross-browser compatibility by implementing necessary polyfills and fallbacks for a consistent user experience.

• Integrate front-end applications with RESTful APIs, ensuring clean, maintainable JavaScript logic and efficient data handling.

• Implement and rigorously enforce WCAG 2.1 (or latest) compliant accessibility standards across all developed user interfaces.

• Contribute to the testing strategy by writing robust unit, integration, and end-to-end tests using frameworks like Jest, React Testing Library, Cypress, or Playwright.

• Actively participate in code reviews, providing constructive feedback to peers and junior developers to elevate UI quality and front-end architectural standards.

• Collaborate with cross-functional teams, including designers, backend developers, and product managers, to ensure alignment on technical feasibility and user experience goals.

• Write clear, concise, and comprehensive documentation for UI components, architecture, and implementation details to facilitate knowledge sharing and maintainability.

📝 Enhancement Note: The primary responsibilities have been detailed to reflect the senior nature of this role, emphasizing architectural contributions, performance leadership, and mentorship through code reviews. The integration with REST APIs and the focus on clean JavaScript logic are crucial for this role.

🎓 Skills & Qualifications

Education: While no specific degree is mentioned, a Bachelor's or Master's degree in Computer Science, Software Engineering, or a related field is typically expected for roles requiring 8+ years of experience. Equivalent practical experience will also be considered.

Experience: 8+ years of professional software development experience, with a minimum of 5 years specifically focused on front-end engineering.

Required Skills:

• JavaScript (ES6+): Deep expertise in modern JavaScript, including asynchronous programming, module systems, and common patterns.

• HTML5 & CSS3: Strong proficiency in semantic HTML5 and advanced CSS techniques, including Flexbox, Grid, and animations.

• SCSS/SASS: Extensive experience with CSS preprocessors for efficient styling and maintainability.

• Responsive Design: Proven ability to implement mobile-first, responsive layouts that adapt seamlessly across various devices and screen sizes.

• Performance Optimization: Solid understanding and practical experience with techniques such as lazy loading, code splitting, dynamic imports, bundle analysis, and Core Web Vitals optimization.

• WCAG Accessibility: Demonstrated experience in implementing and auditing web applications against WCAG 2.1 (or latest) accessibility standards.

• RESTful API Integration: Experience consuming and interacting with RESTful APIs using JavaScript.

• Testing Frameworks: Familiarity with front-end testing tools like Jest, React Testing Library, Cypress, or Playwright.

• Version Control: Strong knowledge of Git workflows, including branching, merging, and pull requests.

• Cross-Browser Compatibility: Proven ability to ensure consistent rendering and functionality across major web browsers.

• Problem-Solving: Excellent analytical and problem-solving skills with a keen eye for detail.

• Communication: Clear and effective verbal and written communication skills.

Preferred Skills:

• Next.js/React: While not the primary focus, experience with React and frameworks like Next.js is highly advantageous, particularly for understanding SSR/SSG/ISR concepts.

• SSR/SSG/ISR: Practical experience with Server-Side Rendering, Static Site Generation, or Incremental Static Regeneration.

• Headless CMS & JAMstack: Familiarity with Headless Content Management Systems and JAMstack architecture.

• CI/CD: Experience with Continuous Integration and Continuous Deployment pipelines.

• Design System Development: Experience in building or contributing to design systems.

• UI Component Libraries: Familiarity with popular UI component libraries.

📝 Enhancement Note: The distinction between "Required" and "Preferred" skills is crucial for candidates. The emphasis on JavaScript, performance, and accessibility are core requirements, while React/Next.js experience is noted as a strong plus that could differentiate candidates, especially given the mention of SSR/SSG/ISR.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Case Studies of UI Implementation: Showcase projects where you've translated complex designs into functional, responsive, and accessible web interfaces. Highlight the technical challenges overcome and the solutions implemented.

• Performance Optimization Examples: Include examples demonstrating your ability to improve front-end performance. Quantify improvements using metrics like load times, Core Web Vitals scores, and bundle size reductions.

• Accessibility Compliance Projects: Present projects where you've successfully implemented WCAG standards, detailing the process, tools used for auditing, and the impact on user experience for individuals with disabilities.

• Reusable Component Development: Demonstrate experience in creating scalable and reusable UI components, ideally within the context of a design system. Explain the architecture and benefits of your approach.

• API Integration Examples: Show how you've integrated front-end applications with backend services via REST APIs, emphasizing clean code practices and efficient data handling.

Process Documentation:

• Workflow Design & Optimization: Be prepared to discuss your process for taking a design from concept to a fully implemented, performant, and accessible UI component, including your approach to code reviews and testing.

• System Implementation Standards: Articulate your understanding of best practices for integrating front-end code with various systems, including CMS platforms and API backends.

• Measurement & Performance Analysis: Demonstrate how you measure the success of your UI implementations, focusing on user experience, performance metrics, and accessibility compliance.

📝 Enhancement Note: For a senior role like this, a portfolio is critical. The guidance emphasizes showcasing tangible results, quantifiable improvements, and a clear understanding of development processes, especially concerning performance and accessibility.

💵 Compensation & Benefits

Salary Range: For a senior UI Developer (8+ years experience) in Pune, India, with specialized skills in JavaScript, performance optimization, and accessibility, the estimated annual salary range is ₹15,00,000 to ₹25,00,000. This range can vary based on the candidate's specific experience, the depth of their specialized skills, and the company's compensation philosophy.

Benefits:

• Comprehensive health insurance (medical, dental, vision).

• Paid time off (vacation, sick leave, public holidays).

• Retirement savings plan/Provident Fund contributions.

• Professional development opportunities, including training, workshops, and conference attendance.

• Potential for performance-based bonuses or incentives.

• Employee assistance programs.

• Opportunities for on-site collaboration and team building.

Working Hours: The standard working hours are 40 hours per week, typically Monday to Friday. Flexibility may be offered based on team needs and project deadlines.

📝 Enhancement Note: Salary estimates for Pune are based on current market data for senior software engineering roles, considering the specialized skills required. Benefits are typical for a large international company like METRO/MAKRO operating in India.

🎯 Team & Company Context

🏢 Company Culture

Industry: Retail and Wholesale (specifically, international wholesale operations). METRO/MAKRO is a significant player in the global wholesale market, operating in numerous countries.

Company Size: 1100-1200 employees (at the MGSC Pune location). This indicates a substantial, well-established organization with dedicated support functions.

Founded: 2011 (for Metro Global Solution Center, Pune). This suggests a mature but still dynamic center with over a decade of operational experience.

Team Structure:

• The UI Development team likely operates within a broader IT or Digital Solutions department at MGSC Pune.

• The team structure is expected to be collaborative, with senior developers mentoring mid-level and junior engineers.

Methodology:

• Agile Development: Given the nature of software development, Agile methodologies (Scrum, Kanban) are likely employed for project management and execution.

• Data-Driven Decision Making: The emphasis on performance metrics (Lighthouse, Core Web Vitals) and user feedback suggests a data-driven approach to UI development.

• Continuous Improvement: The focus on code reviews, testing, and performance optimization points towards a culture of continuous improvement and adherence to best practices.

Company Website: https://www.metro-gsc.in/

📝 Enhancement Note: The company context highlights METRO/MAKRO's global presence and the role of MGSC Pune as a key internal solution partner. The size and founding date suggest a stable yet evolving environment for operations professionals.

📈 Career & Growth Analysis

Operations Career Level: This role represents a Senior Front-End Engineer or UI Developer position. It requires deep technical expertise, the ability to architect solutions, and potentially mentor junior team members. The focus is on hands-on development with significant ownership and impact on user-facing applications.

Reporting Structure: The UI Developer will likely report to an IT Manager, Head of Front-End Development, or a similar lead position within the Digital Solutions or IT department. They will work closely with product owners and project managers.

Operations Impact: The impact of this role is directly on the user experience of internal and potentially external-facing applications that support METRO/MAKRO's global operations. High-quality, performant, and accessible UIs are critical for driving efficiency, user adoption, and overall satisfaction with digital tools.

Growth Opportunities:

• Technical Specialization: Deepen expertise in front-end performance, accessibility, or specific JavaScript frameworks.

• Architectural Leadership: Transition into roles focused on front-end architecture, setting technical direction, and leading major development initiatives.

• Mentorship & Team Lead: Progress to leading a team of UI developers, guiding their technical growth and project execution.

• Cross-Functional Roles: Explore opportunities in areas like DevOps, full-stack development, or product management, leveraging a strong understanding of the development lifecycle.

• Global Project Involvement: Contribute to large-scale, international digital transformation projects within the METRO/MAKRO group.

📝 Enhancement Note: This analysis focuses on the career trajectory for a senior front-end engineer within a large, global organization, emphasizing both technical depth and potential leadership pathways.

🌐 Work Environment

Office Type: On-Site. The role is based at the METRO/MAKRO office in Pune, India.

Office Location(s): 7th Floor, ITPP, Kharadi, Pune, Maharashtra, India. This is a modern office environment, likely equipped with the necessary infrastructure to support development teams.

Workspace Context:

• Collaborative Spaces: The office likely features collaborative zones, meeting rooms, and open-plan areas conducive to team discussions and problem-solving.

• Technology & Tools: Access to standard development hardware, high-speed internet, and potentially specialized software for design and development.

• Team Interaction: Opportunities for regular face-to-face interaction with colleagues, fostering a strong sense of team cohesion and facilitating efficient communication.

Work Schedule: The standard work schedule is typically Monday to Friday, aligning with business hours in India (Asia/Kolkata timezone). The on-site nature promotes consistent team presence and facilitates synchronous collaboration.

📝 Enhancement Note: The on-site requirement is clearly stated. The description focuses on the benefits of this environment for collaboration and team dynamics, which are crucial for complex development projects.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will review your application and resume, focusing on the required years of experience and key skills.

• Technical Assessment: Expect a coding challenge or technical interview to assess your proficiency in JavaScript, HTML, CSS, and problem-solving abilities. This may involve a take-home assignment or live coding session.

• Portfolio Review: Be prepared to walk through your portfolio, discussing specific projects, your role, technical decisions, and the outcomes achieved. Focus on demonstrating experience with performance optimization and accessibility.

• Behavioral & Situational Interviews: Questions will assess your problem-solving approach, teamwork, communication skills, and how you handle challenging situations in a development environment.

• Team/Hiring Manager Interview: A final interview to assess cultural fit, team dynamics, and alignment with the company's values and the specific team's needs.

Portfolio Review Tips:

• Curate Select Projects: Choose 2-3 of your strongest projects that best highlight your skills in performance optimization, accessibility, and complex UI implementation.

• Quantify Achievements: For each project, clearly state your contributions, the technical challenges you addressed, and the measurable results (e.g., "reduced load time by 30%", "achieved WCAG 2.1 AA compliance").

• Explain Technical Decisions: Be ready to articulate why you made certain technical choices, the trade-offs involved, and how they contributed to the project's success.

• Showcase Code Quality: If possible, provide links to well-documented GitHub repositories or snippets of your code that demonstrate clean, maintainable, and efficient practices.

• Highlight Design System Contributions: If you've worked on design systems or reusable component libraries, clearly explain the architecture and its benefits.

Challenge Preparation:

• JavaScript Fundamentals: Brush up on core JavaScript concepts, including closures, prototypes, asynchronous programming (Promises, async/await), and ES6+ features.

• Performance Metrics: Familiarize yourself with Lighthouse audits, Core Web Vitals, and common strategies for improving page speed.

• Accessibility Standards: Review WCAG guidelines and common implementation patterns for accessible web development.

• Responsive Layouts: Practice implementing complex responsive layouts using modern CSS techniques.

📝 Enhancement Note: This section provides actionable advice tailored for a senior front-end role, emphasizing the importance of a well-curated portfolio that showcases specific technical achievements in performance and accessibility.

🛠 Tools & Technology Stack

Primary Tools:

• JavaScript (ES6+): The core language for all front-end development.

• HTML5 & CSS3/SCSS: For structuring and styling web content.

• Figma (or similar): For interpreting design prototypes and specifications.

• Version Control: Git (e.g., GitHub, GitLab, Bitbucket) for source code management.

Analytics & Reporting:

• Performance Auditing Tools: Google Lighthouse, WebPageTest, browser developer tools for performance analysis.

• Monitoring Tools: Experience with tools that track Core Web Vitals and application performance in production is a plus.

CRM & Automation: Not directly applicable to this front-end role, but understanding how front-end applications integrate with backend systems (which might include CRM or ERP data) is beneficial.

Testing Frameworks:

• Unit/Integration Testing: Jest, React Testing Library.

• End-to-End Testing: Cypress, Playwright.

Build Tools & Bundlers: Familiarity with tools like Webpack, Parcel, or Vite for module bundling and build optimization.

Potential Frameworks/Libraries (for context): While not the primary focus, familiarity with React and Next.js is a plus due to their prevalence in modern web development and relation to SSR/SSG/ISR concepts.

📝 Enhancement Note: This section details the expected technical toolkit, highlighting core front-end technologies and testing frameworks, while also noting the beneficial, though not strictly required, familiarity with React/Next.js.

👥 Team Culture & Values

Operations Values:

• Customer Focus: A commitment to building user-centric interfaces that enhance the experience for METRO/MAKRO's internal customers and stakeholders.

• Quality & Excellence: A dedication to producing high-quality, performant, accessible, and maintainable code, setting high standards for UI development.

• Collaboration & Teamwork: Valuing open communication, knowledge sharing, and mutual support within the development team and with cross-functional partners.

• Innovation & Continuous Improvement: An eagerness to explore new technologies, adopt best practices, and constantly refine development processes for greater efficiency and effectiveness.

• Accountability: Taking ownership of tasks, delivering on commitments, and proactively addressing challenges.

Collaboration Style:

• Cross-Functional Integration: The team works closely with designers, product managers, and backend engineers, requiring strong communication and a shared understanding of project goals.

• Process Review Culture: Openness to code reviews, feedback sessions, and collaborative problem-solving to ensure code quality and architectural integrity.

• Knowledge Sharing: Encouraging the sharing of technical expertise, best practices, and lessons learned through internal sessions, documentation, and pair programming.

📝 Enhancement Note: The team culture and values are inferred from the job description's emphasis on quality, performance, and collaboration, aligning with typical expectations for senior engineering roles in established tech departments.

⚡ Challenges & Growth Opportunities

Challenges:

• Maintaining High Performance: Consistently optimizing web applications for speed and responsiveness across diverse network conditions and devices.

• Ensuring Universal Accessibility: Implementing and maintaining WCAG compliance across complex UIs, which can require creative solutions and diligent testing.

• Cross-Browser & Device Compatibility: Navigating the complexities of ensuring a seamless experience across a wide array of browsers, versions, and devices.

• Keeping Pace with Technology: Continuously learning and adapting to the rapidly evolving landscape of front-end technologies, frameworks, and best practices.

• Balancing Design Fidelity with Technical Constraints: Translating intricate design specifications into functional, performant, and maintainable code, sometimes requiring negotiation with design teams.

Learning & Development Opportunities:

• Advanced Front-End Training: Opportunities to attend workshops or online courses focusing on cutting-edge front-end techniques, performance optimization, and accessibility.

• Industry Conference Participation: Support for attending relevant tech conferences to gain insights into industry trends and network with peers.

• Mentorship Programs: Access to senior developers or architects for guidance on technical challenges, career progression, and leadership skills.

• Exposure to Global Projects: Working on projects for various international markets, providing exposure to different user needs and operational contexts.

📝 Enhancement Note: This section anticipates potential challenges and outlines the growth avenues, framing them as opportunities for skill development and career advancement within METRO/MAKRO.

💡 Interview Preparation

Strategy Questions:

• Performance Optimization Strategy: "Describe a time you significantly improved the performance of a web application. What metrics did you track, what techniques did you employ, and what was the impact?" (Focus on quantifiable results and technical depth).

• Accessibility Implementation: "How do you approach building accessible UIs? Walk me through your process for ensuring WCAG compliance, including testing and auditing." (Demonstrate practical knowledge and best practices).

• Component Architecture: "How would you design a reusable, scalable UI component for a design system? What considerations are important for maintainability and extensibility?" (Showcase architectural thinking and understanding of design systems).

Company & Culture Questions:

• Bridging Design & Development: "How do you collaborate with designers to ensure technical feasibility while maintaining design integrity and performance standards?" (Highlight collaboration and problem-solving skills).

• Handling Technical Debt: "Describe your strategy for managing technical debt in a front-end codebase." (Assess your approach to code quality and long-term maintenance).

• Impact Measurement: "How do you measure the success of your front-end work beyond just code functionality? What KPIs are important to you?" (Focus on user experience, performance, and business impact).

Portfolio Presentation Strategy:

• Storytelling: For each project, tell a story: the problem, your solution, the technologies used, your specific contributions, and the measurable outcomes.

• Visual Aids: Use screenshots, live demos (if possible), or code snippets to illustrate your points effectively.

• Focus on Impact: Emphasize the business value and user benefits of your work, not just the technical implementation details.

• Be Prepared for Deep Dives: Anticipate detailed questions about your technical choices, challenges faced, and how you overcame them.

📝 Enhancement Note: These interview questions are designed to probe the candidate's technical depth, problem-solving skills, and ability to articulate their contributions and impact, with a specific focus on performance and accessibility.

📌 Application Steps

To apply for this UI Developer position:

• Submit your application through the provided application link on SmartRecruiters.

• Tailor Your Resume: Highlight your 8+ years of software development experience, with a strong emphasis on the 5+ years in front-end engineering. Explicitly mention expertise in JavaScript (ES6+), HTML5, CSS/SCSS, responsive design, performance optimization, and WCAG accessibility. Quantify achievements where possible.

• Curate Your Portfolio: Prepare a portfolio that showcases 2-3 key projects demonstrating your skills in UI implementation, performance optimization, and accessibility compliance. Be ready to discuss these in detail.

• Prepare for Technical Assessments: Brush up on JavaScript fundamentals, common front-end performance bottlenecks, and accessibility best practices. Practice coding challenges related to these areas.

• Research METRO/MAKRO: Understand the company's business, its global presence, and the role of the Metro Global Solution Center. This will help you tailor your responses and demonstrate your interest.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.

---