Full Stack Developer (UI)

📍 Job Overview

Job Title: Full Stack Developer (UI)

Company: Qode

Location: Eastern Province, Saudi Arabia

Job Type: CONTRACTOR

Category: Software Development / Engineering

Date Posted: 2026-06-24

Experience Level: 5-10 Years

Remote Status: On-site Only

🚀 Role Summary

• Develop and maintain production-grade React applications with a strong emphasis on component architecture, state management, and performance optimization.

• Build and manage Node.js service layers, including RESTful API design, middleware implementation, and robust error-handling patterns.

• Implement secure authentication and authorization mechanisms, including JWT lifecycle management and role-based access control (RBAC) on the UI.

• Integrate with complex backend systems, including data services feeding from SAP and BigQuery, ensuring seamless data flow and application functionality.

📝 Enhancement Note: While the title specifies "Full Stack Developer (UI)", the description heavily emphasizes front-end development with React and TypeScript, alongside Node.js for the service layer. This role is crucial for the client-facing UI and immediate backend service layer, suggesting a focus on the developer's ability to bridge the gap between user experience and backend functionality, particularly within a secure, enterprise environment. The "MRO Inventory Optimization platform" context points towards a need for developers familiar with complex data visualization and workflow management in an industrial setting.

📈 Primary Responsibilities

• Design, develop, and deploy interactive dashboards and advanced analytics visualizations using chart libraries such as Recharts, Chart.js, or D3, powered by API data.

• Construct dynamic inventory management screens featuring complex tables, advanced filtering capabilities, bulk actions, and inline editing functionalities.

• Implement multi-step approval workflows with distinct states, role-based action permissions, and real-time status tracking.

• Develop robust user management features, including role definition, permission assignment, and ensuring UI elements adhere to RBAC principles.

• Seamlessly integrate with backend APIs, manage authentication flows (session/token-based, JWT), and ensure responsive, cross-device compatibility.

• Collaborate closely with an offshore delivery team to ensure cohesive development and timely delivery of platform features within the client's secure onsite environment.

• Contribute to the design and implementation of secure coding practices, focusing on preventing common vulnerabilities within both the front-end and Node.js service layers.

📝 Enhancement Note: The responsibilities highlight a need for developers who can handle complex business logic and UI implementations within an enterprise context. The emphasis on "production-grade" applications, "complex tables," "multi-step states," and "RBAC-driven UI" indicates a requirement for seasoned developers capable of building scalable and maintainable solutions, not just basic front-end components.

🎓 Skills & Qualifications

Education: While not explicitly stated, a Bachelor's degree in Computer Science, Software Engineering, or a related field is typically expected for roles requiring 5-6 years of experience in full-stack development. Equivalent practical experience will also be considered.

Experience: 5-6 years of professional experience in full-stack development, with a significant focus on front-end technologies and Node.js backend services.

Required Skills:

• ReactJS: Deep understanding of component architecture, React Hooks (useState, useEffect, useMemo, useCallback), Context API, and advanced state management (Redux Toolkit, Zustand, or React Query). Proficiency in optimizing React application performance through memoization, code-splitting, and lazy loading.

• TypeScript: Strong command of static typing for components and API contracts, including interfaces, generics, and discriminated unions. Strict adherence to typing API responses and props, with zero tolerance for any in production code.

• Node.js: Proven experience building and maintaining RESTful services using frameworks like Express or NestJS. Expertise in middleware, request validation, effective error-handling patterns, and asynchronous programming with async/await.

• REST APIs: Ability to design and consume RESTful endpoints, understanding of HTTP status codes, pagination, filtering, and designing robust request/response schemas and error contracts.

• Authentication & Authorization: Solid understanding of session vs. token-based authentication, JWT lifecycle (issuance, refresh, revocation), secure cookie handling, UI route guarding, and implementing role-based access control (RBAC) within the front-end.

Preferred Skills:

• Next.js: Experience with Server-Side Rendering (SSR), Static Site Generation (SSG), and the Next.js App Router.

• SSO/OAuth 2.0 + OIDC: Familiarity with Single Sign-On, OAuth 2.0, and OpenID Connect integration patterns.

• Responsive & Accessible Design: Basic understanding of WCAG guidelines for creating accessible and responsive user interfaces.

• Docker: Experience with containerizing applications for consistent deployment environments.

• CI/CD Pipelines: Familiarity with Continuous Integration and Continuous Deployment processes.

• Enterprise Application Patterns: Prior experience with enterprise-level features such as audit trails, multi-tenancy, and complex RBAC implementations.

📝 Enhancement Note: The "Must-Have" section is exceptionally detailed, indicating a high bar for technical proficiency. The emphasis on avoiding any in TypeScript and specific state management libraries (Redux Toolkit, Zustand, React Query) suggests a mature development environment that values code quality and maintainability. The preference for Next.js and enterprise patterns points towards building sophisticated, scalable applications.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrated UI/UX Impact: Showcase projects where you've significantly improved user interface design, user experience, or front-end performance, highlighting quantifiable results.

• Complex Application Architecture: Include examples of applications with intricate component structures, robust state management, and well-defined API integrations, illustrating your ability to manage complexity.

• Backend Service Layer Contribution: Provide evidence of your work on Node.js backend services, particularly those serving REST APIs, demonstrating your understanding of API design, data handling, and service integration.

• Security Implementation: Highlight projects where you've implemented authentication, authorization, or security best practices, showcasing your awareness of secure coding principles and RBAC.

Process Documentation:

• Workflow Design and Optimization: Be prepared to discuss how you approach designing and optimizing workflows in applications, particularly for tasks like inventory management or approval processes, detailing your problem-solving methodology.

• API Integration Strategies: Demonstrate your understanding of how to effectively integrate front-end applications with backend APIs, including error handling, data transformation, and asynchronous operations.

• Performance Measurement and Analysis: Be ready to explain how you measure and analyze the performance of your applications, including front-end rendering times, API response times, and overall user experience metrics.

📝 Enhancement Note: For a role involving enterprise-level applications and potential client interaction, a portfolio demonstrating not just technical skill but also the ability to solve business problems and deliver tangible value is crucial. Candidates should be prepared to articulate the "why" behind their technical choices and the business impact of their work.

💵 Compensation & Benefits

Salary Range: Given the 5-6 years of experience required, the on-site nature in Saudi Arabia, and the contract duration (3 months with extension possibility), a competitive hourly or daily rate is expected. Based on industry benchmarks for senior full-stack developers in the Eastern Province, Saudi Arabia, the range could be approximately SAR 400 - 700 per day (or equivalent hourly rate). This estimate considers the demand for specialized skills in React, TypeScript, and Node.js within the petrochemical sector.

Benefits: As this is a contractor role, benefits are typically not provided by the hiring company beyond the agreed-upon daily/hourly rate. However, it is common for contractors to receive:

• Potential for contract extension based on performance and project needs.

• Opportunity to work on a critical platform for a major petrochemical client.

• Experience with enterprise-level systems and secure environments.

• Professional development through exposure to complex technical challenges.

Working Hours: The role specifies onsite work in Dhahran/Khobar, KSA, implying a standard full-time workweek. A typical workweek in Saudi Arabia is 40 hours, Monday through Friday, with potential for extended hours depending on project deadlines.

📝 Enhancement Note: Salary for contract roles is often negotiable and depends on the candidate's specific experience and the urgency of the client's needs. It's advisable for candidates to research current contract rates for senior developers in the Saudi Arabian market, particularly in the Eastern Province, before discussing compensation. The absence of traditional benefits is standard for contract positions, so the focus should be on the rate and the project's intrinsic value.

🎯 Team & Company Context

🏢 Company Culture

Industry: The client operates within the Petrochemical and Energy sector, requiring a high degree of reliability, security, and precision in their IT solutions. The platform being developed is for MRO (Maintenance, Repair, and Operations) Inventory Optimization, indicating a focus on operational efficiency and supply chain management within an industrial context.

Company Size: Qode is described as a company that provides developers to clients. While the exact size of Qode isn't specified, the nature of their business suggests they are likely a tech staffing or consulting firm, potentially of medium to large size, capable of sourcing specialized talent for enterprise clients.

Founded: Information on Qode's founding date is not provided, but their engagement with a major petrochemical client implies a level of establishment and credibility in the market.

Team Structure:

• Project-based: You will be working on a specific project to develop an MRO Inventory Optimization platform.

• Hybrid Team Model: You will be an onsite developer in KSA, working as an extension of an offshore delivery team. This implies a need for strong communication and collaboration skills to bridge geographical and temporal differences.

• Cross-functional Collaboration: You will likely collaborate with project managers, offshore developers, UI/UX designers (if applicable), and client stakeholders from the petrochemical company.

Methodology:

• Agile/Scrum (Likely): Given the nature of software development and the offshore/onsite model, an Agile methodology like Scrum or Kanban is probable for managing sprints, iterations, and continuous delivery.

• DevOps Practices: The mention of CI/CD pipelines and Docker suggests an adoption of DevOps principles for efficient development, testing, and deployment.

• Data-Driven Development: The focus on "Inventory Optimization" and "analytics visualizations" indicates that development decisions will be informed by data and performance metrics.

Company Website: https://jobs.workable.com/company/d9Gs4Q7pnWjZVXU2mK6CGd/jobs-at-qode (This links to Qode's Workable page, not a direct company website)

📝 Enhancement Note: The context of working for a "provider" like Qode means the candidate will be embedded within a client's project. Understanding the client's industry (petrochemical) and the specific needs of an MRO optimization platform is key. The offshore/onsite dynamic requires strong remote collaboration and communication skills.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned at a Senior Full Stack Developer level, specifically with a strong emphasis on UI and Node.js service layer development. The requirement for 5-6 years of experience and deep technical expertise in multiple complex technologies (React, TypeScript, Node.js, state management, API design) places it beyond mid-level.

Reporting Structure: As an onsite contractor, you will likely report to a project lead or a manager within Qode, who in turn liaises with the offshore delivery team and the client's project management. Your direct technical collaboration will be with other developers, both onsite and offshore.

Operations Impact: Your work will directly impact the operational efficiency of a petrochemical client by enabling better inventory management, streamlining repair and maintenance processes, and providing data-driven insights through interactive dashboards. This role is critical for optimizing critical business functions within the client's organization.

Growth Opportunities:

• Technical Specialization: Deepen expertise in React, TypeScript, Node.js, and potentially Next.js, or explore advanced areas like performance optimization and security.

• Cross-Functional Expertise: Gain exposure to enterprise-level system integration, particularly with ERP systems like SAP and data warehouses like BigQuery.

• Project Leadership Potential: Successful completion of this contract and demonstration of strong technical and communication skills could lead to opportunities for leading smaller features or taking on more complex development tasks within future projects.

• Contract Extension: The potential for contract extension provides stability and the opportunity to see a project through significant development phases.

📝 Enhancement Note: For a contractor role, growth is often defined by the breadth and depth of technical challenges encountered and the opportunity to work on impactful projects. Demonstrating strong problem-solving skills and adaptability in complex environments can lead to future contract opportunities with Qode or its clients.

🌐 Work Environment

Office Type: The role explicitly states "onsite only" in Dhahran/Khobar, KSA. This suggests working within the client's facilities or a dedicated project office provided by Qode. The environment will likely be a professional corporate or industrial IT setting.

Office Location(s): Dhahran/Khobar, Eastern Province, Saudi Arabia. These are major industrial and business hubs in the region, suggesting good infrastructure and accessibility.

Workspace Context:

• Collaborative Environment: Expect to work closely with other developers, potentially both onsite and remotely offshore. Daily stand-ups and collaborative coding sessions are probable.

• Technology & Tools: Access to modern development tools, workstations, and potentially specific client-side software or network access protocols required for secure onsite operations.

• Team Interaction: Regular interaction with Qode project leads and the offshore delivery team, as well as potential engagement with the client's technical and operational staff.

Work Schedule: Standard professional working hours are expected, likely Monday to Friday, totaling approximately 40 hours per week. The contract is for 3 months initially, with the possibility of extension, indicating a focused project timeline.

📝 Enhancement Note: The "onsite only" requirement is a critical factor. Candidates must be willing and able to work exclusively from the specified location in Saudi Arabia. The collaborative nature of working as an extension of an offshore team means effective communication and proactive engagement are paramount.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A preliminary call with a Qode recruiter to assess basic qualifications, experience, and interest in contract roles.

• Technical Assessment: This will likely involve a technical interview with senior developers or a technical lead from Qode or the client. Expect coding challenges, in-depth questions about React, TypeScript, Node.js, API design, and scenario-based problem-solving.

• Portfolio Review: Be prepared to walk through selected projects from your portfolio, explaining your role, technical contributions, architectural decisions, and the impact of your work. Focus on demonstrating your proficiency in the "Must-Have" skills.

• Client/Team Fit: A final interview may occur with the client's project manager or key stakeholders to assess your fit with the team dynamics and understand your approach to working within an extended team.

Portfolio Review Tips:

• Curate Strategically: Select 2-3 projects that best showcase your expertise in React, TypeScript, Node.js, REST APIs, and state management. Prioritize projects with demonstrable UI complexity, performance improvements, or secure feature implementations.

• Quantify Impact: Whenever possible, use metrics to describe the success of your projects. For example, "Reduced page load time by X%," "Improved user task completion rate by Y%," or "Implemented RBAC that reduced unauthorized access by Z%."

• Explain Your Role Clearly: For team projects, clearly articulate your specific contributions, responsibilities, and the challenges you overcame.

• Technical Depth: Be ready to discuss your architectural choices, design patterns used, and the reasoning behind them. For example, why you chose a specific state management library or how you approached API error handling.

• Security Focus: Highlight any security features you implemented, such as JWT handling, secure cookie management, or RBAC logic.

Challenge Preparation:

• Coding Challenges: Practice common algorithms and data structure problems, as well as scenarios involving React component development, TypeScript type definitions, and Node.js API endpoint creation.

• System Design: Be prepared to discuss how you would design specific features, like an inventory management screen or an approval workflow, considering scalability, performance, and security.

• Scenario-Based Questions: Anticipate questions like, "How would you handle a sudden spike in API traffic?" or "Describe a time you had to debug a complex UI issue." Focus on structured problem-solving approaches.

📝 Enhancement Note: Given the specific technical requirements, expect a rigorous technical interview. Candidates should be ready to demonstrate not just theoretical knowledge but practical application, especially in areas like state management and API design within a Node.js context. The portfolio review will be a critical component for validating these skills.

🛠 Tools & Technology Stack

Primary Tools:

• ReactJS: The core front-end library for building user interfaces.

• TypeScript: Essential for strong typing across the application, ensuring code quality and maintainability.

• Node.js (Express/NestJS): The runtime environment and preferred frameworks for building the service layer and REST APIs.

• Redux Toolkit / Zustand / React Query: Key state management libraries for handling complex application state in React.

• RESTful APIs: The standard for communication between the front-end and back-end services.

Analytics & Reporting:

• Recharts / Chart.js / D3.js: Libraries for creating interactive dashboards and data visualizations.

• SAP / BigQuery: Potential sources for data that will be integrated into the platform, requiring developers to understand how to consume data from these systems.

CRM & Automation:

• JWT (JSON Web Tokens): For secure authentication and authorization.

• Docker: For containerizing applications, ensuring consistent deployment environments.

• CI/CD Pipelines: Tools and practices for automating the build, test, and deployment processes.

📝 Enhancement Note: The technology stack is heavily focused on modern JavaScript/TypeScript development. Candidates should be proficient in the specified libraries and frameworks. Familiarity with data sources like SAP and BigQuery, while not directly a development tool, is important for understanding the data context and integration challenges.

👥 Team Culture & Values

Operations Values:

• Quality & Reliability: Given the petrochemical industry context, there's a strong emphasis on building robust, reliable, and error-free software.

• Efficiency & Optimization: The core purpose of the platform is inventory optimization, so a culture that values efficiency, performance, and continuous improvement is expected.

• Collaboration & Communication: Working as an extension of an offshore team requires strong communication, transparency, and a collaborative spirit to overcome geographical and time zone differences.

• Security Focus: Adherence to security best practices, especially concerning data handling and access control, is paramount in this industry.

Collaboration Style:

• Agile & Iterative: Expect to work in an agile environment with regular feedback loops and iterative development cycles.

• Remote-First Integration: While onsite, you'll be part of a broader, likely remote, delivery team. This necessitates proactive communication, clear documentation, and a willingness to engage across different time zones.

• Problem-Solving Oriented: The team likely fosters a culture where challenges are tackled collaboratively, with an emphasis on finding practical and effective solutions.

📝 Enhancement Note: For a contractor role embedded within a client project, understanding and adapting to the team's existing culture and values is crucial for success. Proactive engagement and a commitment to collaborative problem-solving will be highly valued.

⚡ Challenges & Growth Opportunities

Challenges:

• Bridging the Offshore-Onsite Gap: Effectively communicating and collaborating with an offshore team across time zones and cultural nuances can be challenging.

• Complex Domain Knowledge: Understanding the intricacies of MRO inventory optimization within the petrochemical industry requires a learning curve.

• Integration with Legacy/Enterprise Systems: Connecting modern applications with potentially older or complex enterprise systems like SAP can present integration hurdles.

• Security Compliance: Meeting the stringent security requirements of a petrochemical client in Saudi Arabia will demand meticulous attention to detail.

Learning & Development Opportunities:

• Deep Dive into Enterprise Systems: Gain hands-on experience integrating with major enterprise resource planning (ERP) systems and data warehouses.

• Advanced Front-End & Node.js Techniques: Opportunity to refine skills in performance optimization, complex state management, and secure API development.

• Cross-Cultural Teamwork: Develop expertise in collaborating effectively within distributed, international teams.

• Industry-Specific Expertise: Acquire valuable knowledge in a critical sector (petrochemicals) and a specialized domain (inventory optimization).

📝 Enhancement Note: The challenges presented are typical for complex enterprise projects involving distributed teams. Candidates who can proactively address these challenges, particularly in communication and domain learning, will find significant growth opportunities.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex UI feature you built using React and TypeScript. What was your approach to state management and component architecture, and how did you ensure performance?" (Preparation: Prepare a detailed case study of a challenging React project, focusing on specific libraries, design patterns, and performance metrics.)

• "How would you design a Node.js REST API endpoint to handle inventory updates, considering potential concurrent requests and data integrity? What security measures would you implement?" (Preparation: Outline your API design process, including input validation, error handling, and JWT-based security mechanisms.)

• "Imagine you need to implement a multi-step approval workflow with role-based permissions. How would you structure this on the front-end and what considerations would you have for the backend service layer?" (Preparation: Detail your approach to state machines for workflows, RBAC implementation in React, and how this would map to Node.js service logic.) Company & Culture Questions:

• "How do you approach working as an extension of an offshore team? What methods do you use to ensure seamless communication and collaboration?" (Preparation: Emphasize proactive communication, clear documentation, and leveraging collaboration tools. Provide examples of successful remote collaboration.)

• "What do you know about the petrochemical industry or MRO inventory optimization, and how do you think your development skills can contribute to optimizing these processes?" (Preparation: Research the industry and the role of technology in optimizing operations. Connect your skills to specific business benefits.)

• "This is a contract role with potential for extension. How do you approach project-based work and adapting to new teams and environments?" (Preparation: Highlight your adaptability, focus on delivering value quickly, and your commitment to project success.) Portfolio Presentation Strategy:

• Focus on Impact: For each project, clearly state the problem, your solution, your specific role, the technologies used, and the quantifiable business impact or improvement achieved.

• Technical Deep Dive: Be ready to answer detailed technical questions about your code, architectural decisions, and the trade-offs you made.

• Security First: If applicable, highlight any security features or considerations you implemented.

• Showcase Collaboration: If it was a team project, explain how you collaborated with others and contributed to the team's success.

📝 Enhancement Note: The interview will likely be highly technical, with a strong focus on practical application of React, TypeScript, and Node.js in an enterprise context. Candidates should be prepared for in-depth discussions about architecture, security, and performance.

📌 Application Steps

To apply for this operations position:

• Submit your application through the provided link on Workable.

• Tailor Your Resume: Optimize your resume to highlight your 5-6 years of experience with React, TypeScript, and Node.js. Use keywords from the job description like "component architecture," "state management," "REST APIs," "JWT," and "RBAC." Quantify achievements where possible.

• Prepare Your Portfolio: Select 2-3 key projects that best demonstrate your skills in UI development, Node.js service layer creation, and the implementation of complex features. Be ready to present these projects with a focus on technical details and business impact.

• Practice Technical Scenarios: Review common interview questions related to React, TypeScript, Node.js, API design, and security. Practice articulating your thought process and problem-solving approach clearly.

• Research Qode and the Industry: Understand Qode's business model (providing developers) and research the petrochemical industry and the importance of MRO inventory optimization to prepare for company and industry-specific questions.

⚠️ 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.