Full Stack Developer (UI)

📍 Job Overview

Job Title: Full Stack Developer (UI)

Company: Qode

Location: Dhahran/Khobar, KSA (Onsite Only)

Job Type: CONTRACTOR

Category: Software Engineering / Full Stack Development

Date Posted: 2026-06-24

Experience Level: 5-10 Years

Remote Status: On-site Only

🚀 Role Summary

• Develop and maintain the front-end and Node.js service layer for an MRO Inventory Optimization platform, catering to a petrochemical client.

• Design and implement production-grade React applications, ensuring seamless integration with complex enterprise systems.

• Build interactive dashboards, analytics visualizations, and sophisticated inventory management screens with advanced filtering and editing capabilities.

• Implement robust approval workflows and user management features, including role-based access control (RBAC).

• Collaborate closely with an offshore delivery team, acting as a key technical contributor within the client's secure onsite environment.

📝 Enhancement Note: While the title is "Full Stack Developer (UI)", the description emphasizes ownership of both the front-end and a Node.js service layer. This suggests a significant backend responsibility for API development and integration, making it more than just a UI-focused role. The "Onsite Only" requirement in a specific geographic region (Dhahran/Khobar, KSA) is a critical constraint.

📈 Primary Responsibilities

• Architect, develop, and deploy interactive dashboards and data visualizations utilizing libraries such as Recharts, Chart.js, or D3, powered by API data feeds.

• Create dynamic inventory management screens featuring complex data tables, advanced filtering mechanisms, bulk action capabilities, and inline editing functionalities.

• Implement multi-step approval workflows with clear status tracking and role-based action permissions.

• Develop and manage user authentication and authorization systems, including user roles, permissions, and RBAC-driven UI elements.

• Integrate with backend APIs, including data services that ingest information from enterprise systems like SAP and BigQuery, ensuring secure authentication flows and responsive cross-device behavior.

• Write clean, maintainable, and well-documented code following best practices for component architecture, state management, and API contract design.

• Troubleshoot and debug issues across the full stack, from UI rendering to API service layer operations.

• Participate in code reviews, providing and receiving constructive feedback to ensure code quality and adherence to standards.

• Collaborate effectively with offshore development teams, project managers, and client stakeholders to gather requirements and deliver solutions.

📝 Enhancement Note: The scope of work details specific functional areas like "inventory management screens," "approval workflows," and "user management." This indicates a need for a developer who can translate complex business logic into functional UI components and associated backend logic. The mention of SAP and BigQuery implies a need for experience with large-scale enterprise data integration.

🎓 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 5-6 years of deep technical expertise.

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

Required Skills:

• ReactJS: Deep understanding of component architecture, hooks (useState, useEffect, useMemo, useCallback), context API, and advanced state management solutions (Redux Toolkit, Zustand, or React Query). Proficiency in handling controlled forms and implementing performance optimization techniques (memoization, code-splitting, lazy loading).

• TypeScript: Strong typing skills across components, API contracts, interfaces, generics, and discriminated unions. Expertise in typing API responses and props, with a strict adherence to avoiding any in production code.

• Node.js: Proven experience building and maintaining RESTful services using frameworks like Express or NestJS. Familiarity with middleware, request validation, robust error-handling patterns, async/await, and integrating with downstream APIs and databases.

• REST APIs: Expertise in designing, developing, and consuming RESTful endpoints, understanding status-code semantics, pagination, filtering, and designing consistent request/response schemas and error contracts.

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

Preferred Skills:

• Next.js: Experience with Server-Side Rendering (SSR), Static Site Generation (SSG), and the 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 (Web Content Accessibility Guidelines) and implementing responsive layouts.

• Docker: Experience with containerizing applications for development and deployment.

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

• Enterprise Application Patterns: Prior experience with audit trails, multi-tenant architectures, and complex RBAC implementations in enterprise environments.

📝 Enhancement Note: The "Must-Have" section clearly outlines the core technical requirements. The emphasis on avoiding any in TypeScript and specific state management libraries points to a need for developers who write high-quality, maintainable code. The "Good-to-Have" section indicates areas where a candidate can stand out.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstration of React Component Architecture: Showcase well-structured, reusable React components with clear separation of concerns and effective state management.

• TypeScript Implementation Examples: Provide examples of robust TypeScript usage, demonstrating type safety in components, API interactions, and data structures.

• Node.js Service Layer Examples: Include examples of RESTful API endpoints built with Express or NestJS, highlighting request validation, error handling, and authentication middleware.

• Complex UI Feature Implementations: Showcase projects that involve intricate UIs such as dashboards with data visualizations, sophisticated tables with filtering/editing, or multi-step forms/workflows.

• Authentication/Authorization Integration: Demonstrate how authentication (e.g., JWT) and RBAC have been implemented in previous projects, both on the client and server sides.

Process Documentation:

• Workflow Design & Optimization: Be prepared to discuss how you approach designing and optimizing complex workflows, such as approval processes, ensuring efficiency and clarity.

• System Integration Documentation: Provide examples or discuss your approach to integrating disparate systems, handling data flows, and ensuring data consistency.

• Performance Optimization Strategies: Document and be ready to present strategies employed to optimize front-end performance (e.g., code splitting, memoization) and backend service responsiveness.

📝 Enhancement Note: For a role involving enterprise-level development, a portfolio demonstrating not just coding ability but also architectural thinking and problem-solving for complex business logic is crucial. The emphasis on "production-grade" and "secure onsite environment" suggests a need for robust, well-documented, and tested code.

💵 Compensation & Benefits

Salary Range: Given the 5-6 years of experience requirement, the specialized nature of the role (Full Stack with strong UI/Node.js focus), and the location in the United Arab Emirates (Dubai/Abu Dhabi timezone often dictates rate), a competitive daily rate or equivalent monthly salary is expected for a contractor.

• Estimated Daily Rate: AED 800 - 1200+ (or equivalent monthly salary of AED 16,000 - 24,000+).

• Research Methodology: This estimate is based on market rates for experienced full-stack developers in the UAE, considering the specific technical stack (React, Node.js, TypeScript), the contract nature of the role, and the specialized industry (petrochemicals, inventory optimization). Rates can fluctuate based on the specific hiring company's budget and the candidate's precise skill match.

Benefits: As this is a contractor role, benefits are typically limited and may vary.

• Contract Duration: 3 months initially, with potential for extension, offering project-based work.

• Potential for Extension: Opportunity for longer-term engagement based on performance and project needs.

• Exposure to Enterprise Systems: Gaining experience with large-scale systems like SAP and BigQuery within a critical industry.

• Onsite Work Environment: Access to a dedicated workspace within the client's secure facilities.

Working Hours: Approximately 40 hours per week, aligned with standard business operations in the region. The role specifies "onsite only," implying a structured work schedule within the client's premises.

📝 Enhancement Note: Compensation for contract roles is often presented as a daily or hourly rate. The provided estimate is a guideline for the UAE market for experienced technical contractors. It's essential for candidates to clarify the exact payment structure and any included allowances during the interview process.

🎯 Team & Company Context

🏢 Company Culture

Industry: Technology / Software Development, with a focus on enterprise solutions for the Energy & Petrochemical sector.

Company Size: Information not directly provided, but the need for an "offshore delivery team" suggests Qode is a company that manages distributed development teams, likely of moderate to significant size to support multiple clients and projects.

Founded: Information not directly provided. Qode, as a company, likely aims to provide specialized development services.

Team Structure:

• The developer will work as an "extension of an offshore delivery team," implying a distributed team structure with a strong emphasis on remote collaboration and project management.

• Direct collaboration will occur with the client's onsite team in Dhahran/Khobar, KSA, requiring adaptation to their specific environment and stakeholders.

• The role involves working with backend APIs that feed from enterprise systems (SAP, BigQuery), suggesting interaction with data engineering or backend teams responsible for those systems, even if indirectly. Methodology:

• Agile/Scrum Practices: Common in software development, likely employed for managing sprints, feature development, and iterative delivery.

• DevOps Principles: Implied through the "Good-to-Have" skills like Docker and CI/CD, suggesting a focus on efficient deployment and operational excellence.

• Data-Driven Development: The role involves building dashboards and analytics, requiring a data-centric approach to feature development and problem-solving.

Company Website: https://jobs.workable.com/company/d9Gs4Q7pnWjZVXU2mK6CGd/jobs-at-qode (Company profile page on Workable)

📝 Enhancement Note: The "offshore delivery team" aspect is key. This means the candidate needs to be comfortable working asynchronously and communicating effectively across different time zones and potentially cultures, while also being present onsite for client-specific needs.

📈 Career & Growth Analysis

Operations Career Level: This role is for an experienced Full Stack Developer with a specialization in UI and Node.js. It sits at a mid-to-senior level, requiring significant autonomy and technical depth. The "5-6 years" experience benchmark points to a seasoned professional.

Reporting Structure: The developer will report to a lead within Qode's offshore delivery team, likely a Tech Lead or Project Manager. However, they will also be accountable to client stakeholders onsite for project delivery and technical communication.

Operations Impact: The developer's work directly impacts the client's "MRO Inventory Optimization platform." Successful delivery leads to improved inventory management, reduced costs, and enhanced operational efficiency for a petrochemical company. This role provides tangible impact on a critical business function.

Growth Opportunities:

• Technical Specialization: Deepen expertise in React, TypeScript, Node.js, and related modern web technologies.

• Enterprise Integration Experience: Gain hands-on experience integrating with complex enterprise systems like SAP and BigQuery, a valuable skill in many industries.

• Domain Expertise: Develop knowledge in MRO (Maintenance, Repair, and Operations) and inventory optimization within the petrochemical sector.

• Project Leadership Potential: Successful completion of this contract could lead to opportunities for leading features or smaller projects within Qode's engagements.

• Cross-Cultural Collaboration: Enhance skills in working with distributed teams and international clients.

📝 Enhancement Note: This is a contract role, so "growth" is more about skill acquisition and project experience rather than traditional internal career progression within Qode. However, the experience gained can be highly valuable for future full-time roles or subsequent contract opportunities.

🌐 Work Environment

Office Type: Onsite, within the client's secure petrochemical facility in Dhahran/Khobar, KSA. This implies a professional, potentially industrial, office environment.

Office Location(s): Dhahran/Khobar, Saudi Arabia. This is a specific, non-negotiable location requirement.

Workspace Context:

• Dedicated Workspace: Likely provided with a desk, computer, and access to necessary office infrastructure.

• Secure Environment: Access to the client's network and systems will be controlled and monitored.

• Collaborative Hub: While working as an extension of an offshore team, the onsite presence facilitates direct interaction with client personnel, potentially leading to ad-hoc problem-solving sessions and clearer communication channels.

• Technology Access: Access to client-specific tools, VPNs, and potentially specialized software relevant to the petrochemical industry.

Work Schedule: Standard business hours, approximately 40 hours per week, onsite. Exact daily start/end times and break schedules will be determined by the client's operational policies.

📝 Enhancement Note: The "onsite only" requirement is highly restrictive. Candidates must be willing and able to work in Dhahran/Khobar, KSA, for the entire duration of the contract. This also means understanding potential cultural nuances and local working practices.

📄 Application & Portfolio Review Process

Interview Process:

1. Initial Screening: A review of your CV and any provided portfolio links to assess basic qualifications and experience.

2. Technical Interview (Core Skills): In-depth discussion and coding challenges focused on ReactJS, TypeScript, Node.js, and REST API design. Expect questions on state management, component lifecycles, type safety, async patterns, and API error handling.

3. System Design/Architecture Discussion: Questions related to building scalable, maintainable applications, integrating complex systems, and implementing authentication/authorization. You may be asked to draw out architectures or discuss trade-offs.

4. Portfolio Review & Behavioral Questions: Walkthrough of your portfolio projects, focusing on your role, technical decisions, challenges faced, and how you overcame them. Behavioral questions will assess your fit with the offshore/onsite collaboration model and problem-solving approach.

5. Client-Side Interview (Potentially): Depending on Qode's process, there might be a final interview with the client's technical lead or project manager.

Portfolio Review Tips:

• Curate Relevant Projects: Highlight projects that best demonstrate your expertise in React, TypeScript, Node.js, and building complex UIs or APIs. Prioritize projects with similar complexity or domain relevance if possible.

• Showcase Code Quality: If possible, link to GitHub repositories (ensure they are public or you can share snippets). Focus on well-structured, commented, and typed code.

• Explain Your Role and Decisions: For each project, clearly articulate your specific contributions, the technical challenges, the solutions you implemented, and the impact of your work.

• Demonstrate Full-Stack Capabilities: If you have projects that showcase both front-end and Node.js backend work, make sure to present them.

• Highlight Optimization and Security: If your projects involved performance optimization or robust security measures (like authentication/RBAC), be ready to discuss them in detail.

Challenge Preparation:

• Live Coding: Be prepared for live coding exercises on platforms like CoderPad or similar, testing your ability to write clean, functional code under time pressure.

• System Design Whiteboarding: Practice sketching out system architectures for common web application features (e.g., user management, data dashboards).

• Conceptual Questions: Review core concepts of JavaScript, React, Node.js, and REST principles. Be ready to explain why certain approaches are preferred.

📝 Enhancement Note: The emphasis on "production-grade," "secure onsite environment," and "extension of an offshore delivery team" suggests interviewers will probe deeply into your ability to deliver reliable code and collaborate effectively in a structured, potentially high-stakes environment.

🛠 Tools & Technology Stack

Primary Tools:

• Frontend Framework: ReactJS (with hooks, context API)

• State Management: Redux Toolkit, Zustand, or React Query

• Language: TypeScript

• Backend Framework: Node.js (Express, NestJS)

• API Design: RESTful APIs

Analytics & Reporting:

• Charting Libraries: Recharts, Chart.js, D3.js

• Data Visualization: Tools and techniques for building interactive dashboards.

CRM & Automation:

• Backend Data Sources: SAP, BigQuery (integration experience)

• Authentication/Authorization: JWT, OAuth 2.0, OIDC (concepts and implementation)

• Containerization: Docker (preferred)

• CI/CD: Pipelines for automated testing and deployment (preferred)

📝 Enhancement Note: The core stack is React, TypeScript, and Node.js. Experience with specific state management libraries and charting tools is crucial. Familiarity with enterprise data sources like SAP and BigQuery is a significant plus for integration tasks.

👥 Team Culture & Values

Operations Values:

• Technical Excellence: A strong emphasis on writing clean, efficient, and maintainable code, adhering to best practices in React, TypeScript, and Node.js.

• Collaboration & Communication: The ability to work effectively with both offshore and onsite teams, fostering clear communication and knowledge sharing.

• Problem-Solving: A proactive approach to identifying and resolving technical challenges, particularly in complex enterprise environments.

• Delivery Focus: Commitment to meeting project deadlines and delivering high-quality solutions that meet client requirements.

• Security & Reliability: Understanding the importance of secure coding practices and building robust, reliable systems, especially within a client's sensitive infrastructure.

Collaboration Style:

• Asynchronous Communication: Proficient in using tools and practices for effective collaboration with remote/offshore teams (e.g., Slack, Jira, email).

• Synchronous Onsite Interaction: Ability to engage directly with client stakeholders for requirements gathering, feedback, and problem-solving.

• Code Review Culture: Active participation in code reviews to ensure quality and share knowledge.

• Documentation: Emphasis on documenting code, APIs, and processes to facilitate understanding and maintenance.

📝 Enhancement Note: The dual nature of collaboration (offshore team + onsite client) requires adaptability. Candidates should be comfortable with both structured remote communication and direct, in-person interaction.

⚡ Challenges & Growth Opportunities

Challenges:

• Cross-Team Synchronization: Effectively bridging communication and development efforts between the offshore Qode team and the onsite client team.

• Integration Complexity: Navigating the intricacies of integrating with legacy enterprise systems like SAP and BigQuery within a secure environment.

• Onsite Requirement: The mandatory onsite presence in Dhahran/Khobar, KSA, for the entire contract duration.

• Rapid Development Cycles: Delivering production-grade features within a contract timeframe, potentially involving fast-paced iterative development.

• Security Constraints: Working within a secure, potentially restricted, client network environment.

Learning & Development Opportunities:

• Advanced Web Technologies: Deepening expertise in modern front-end and backend patterns.

• Enterprise System Integration: Gaining practical experience with enterprise data architectures and integration methodologies.

• Domain-Specific Knowledge: Understanding the nuances of MRO and inventory optimization within the high-stakes petrochemical industry.

• Cross-Cultural Project Management: Developing skills in managing projects with distributed international teams.

📝 Enhancement Note: The primary challenge is the strict onsite requirement. Growth opportunities are significant in terms of technical skill expansion and gaining experience in a critical industry.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex UI component you built recently with React. What state management solution did you use, and why?" (Focus on hooks, context, Redux Toolkit/Zustand/React Query)

• "How would you design a RESTful API endpoint for an inventory update, considering error handling, validation, and idempotency?" (Focus on API design principles, status codes, request validation)

• "Walk me through your process for implementing role-based access control (RBAC) on the front-end. What are the security considerations?" (Focus on JWT, route guarding, UI conditional rendering)

• "You need to integrate data from SAP into a React dashboard. What are the potential challenges, and how would you approach it?" (Focus on data fetching, API abstraction, ETL concepts) Company & Culture Questions:

• "How do you ensure effective communication and collaboration when working with a distributed offshore team?" (Focus on asynchronous communication tools, proactive updates)

• "What are your thoughts on working onsite exclusively in Dhahran/Khobar for the duration of this contract?" (Be positive and confirm commitment)

• "Describe a time you had to adapt to a new technology or framework quickly for a project." (Focus on learning agility and problem-solving) Portfolio Presentation Strategy:

• Structure Your Walkthrough: For each project, clearly state the problem, your role, the technologies used, the challenges you faced, your specific solutions, and the outcome/impact.

• Highlight Key Technologies: Explicitly point out where you've used React, TypeScript, Node.js, and any state management or charting libraries.

• Showcase Code Samples: Be ready to share snippets or discuss challenging code sections that demonstrate your technical prowess and adherence to best practices.

• Emphasize Collaboration: If applicable, discuss how you collaborated with team members (offshore or onsite) on the project.

📝 Enhancement Note: Expect deep dives into your technical skills, particularly in React and Node.js, and your ability to integrate complex systems. Be prepared to articulate your thought process for design decisions and problem-solving.

📌 Application Steps

To apply for this Full Stack Developer (UI) position:

• Submit your application through the provided Workable link.

• Tailor your Resume: Clearly highlight your experience with ReactJS, TypeScript, Node.js, REST APIs, and state management libraries. Quantify achievements where possible.

• Prepare Your Portfolio: Select 2-3 key projects that best demonstrate your full-stack capabilities, especially those involving complex UIs, data visualization, or API development. Ensure links are accessible.

• Practice Technical Concepts: Review core JavaScript, React, Node.js, and TypeScript concepts. Be ready for live coding challenges and deep-dive technical questions.

• Research Qode: Understand the company's service offerings and their approach to project delivery, especially concerning distributed teams.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and industry-standard assumptions. The "Onsite Only" requirement in Dhahran/Khobar, KSA, is critical and non-negotiable. All details regarding compensation, benefits, and specific project scope should be verified directly with Qode during the application and interview process.