UI / Front-End Developer

📍 Job Overview

Job Title: UI / Front-End Developer

Company: FLiiP

Location: Brossard, Quebec, Canada

Job Type: Full-Time

Category: Front-End Development / UI Development

Date Posted: April 02, 2026

Experience Level: 5+ Years

🚀 Role Summary

• Spearhead the development and implementation of a comprehensive React component library and design system, directly impacting the platform's user interface consistency and developer efficiency.

• Bridge the critical gap between UI/UX design vision (Figma) and robust technical execution in React, ensuring pixel-perfect, responsive, and cross-browser compatible interfaces for both web and React Native mobile applications.

• Drive the modernization of legacy front-end code, progressively refactoring HTML, CSS, JavaScript, and jQuery to align with modern standards while maintaining backward compatibility.

• Collaborate closely with UI/UX designers and leverage AI development tools to accelerate development cycles and enhance code quality, contributing to an AI-first product vision.

📝 Enhancement Note: This role is positioned as foundational to the platform's modernization efforts, focusing heavily on establishing a scalable and maintainable design system. The emphasis on bridging design and implementation, coupled with legacy code refactoring, indicates a need for a developer who can both build new components and strategically improve existing architecture. The mention of AI tools suggests an innovative and forward-thinking development environment.

📈 Primary Responsibilities

• Design System Development: Build, maintain, and evolve a reusable React component library using Storybook, directly translating Figma designs into functional UI elements and establishing design tokens with clear usage patterns and documentation.

• Component Creation: Develop individual components adhering to atomic design principles, ensuring modularity, reusability, and consistency across the FLiiP platform.

• Interface Implementation: Deliver pixel-perfect, responsive, and cross-browser compatible user interfaces for both web applications and React Native mobile applications, ensuring a seamless user experience.

• CSS & Styling: Write clean, maintainable, and efficient CSS, considering existing codebase constraints and implementing modern CSS techniques (e.g., Flexbox, Grid, animations) for optimal styling and responsiveness.

• Legacy Code Modernization: Proactively identify and refactor legacy HTML, CSS, JavaScript, and jQuery codebases to align with modern front-end development standards, improving code quality, performance, and maintainability.

• Cross-Functional Collaboration: Work in close partnership with the UI/UX designer to validate technical feasibility of designs, provide constructive feedback, and ensure accurate implementation of visual elements.

• AI Tool Integration: Utilize AI-powered development tools (e.g., GitHub Copilot, Cursor) to accelerate repetitive coding tasks, enhance code generation, and improve overall development efficiency.

• Documentation: Create and maintain comprehensive documentation for the design system, component library, and best practices to facilitate knowledge sharing and onboard new team members.

📝 Enhancement Note: The responsibilities highlight a dual focus on building new, modern front-end architecture (design system, React components) and actively managing the evolution of existing code. The explicit mention of React Native suggests a need for a developer comfortable with cross-platform development considerations within the React ecosystem. Responsibilities also underscore the importance of collaboration with design and the adoption of emerging AI tools.

🎓 Skills & Qualifications

Education:

Experience:

• A minimum of 5 years of progressive experience in front-end development, with a proven track record of building and maintaining complex user interfaces.

• Demonstrated experience working in a startup environment, understanding the dynamics of evolving priorities and the need for adaptability.

Required Skills:

• Advanced CSS: Deep expertise in responsive design techniques, Flexbox, CSS Grid, animations, transitions, and ensuring cross-browser compatibility.

• JavaScript Proficiency: Strong command of vanilla JavaScript, including modern ES6+ features, and the ability to read, understand, and modify existing jQuery code.

• React Expertise: Solid experience with React, including functional components, hooks, state management (e.g., Context API, Redux basics), and understanding component lifecycles.

• Design Translation: Proven ability to translate UI/UX designs from Figma into accurate, high-fidelity code.

• Startup Agility: Comfort and proven ability to thrive in a fast-paced startup environment with shifting priorities and a need for rapid iteration.

• Communication: Effective communication skills in English and/or French, enabling clear collaboration with team members and stakeholders.

Preferred Skills:

• Experience with Storybook or similar component documentation and development tools.

• Familiarity with design system methodologies, such as atomic design principles.

• Knowledge of CSS-in-JS solutions (e.g., styled-components, Emotion) for component-level styling.

• Practical experience utilizing AI development tools (e.g., GitHub Copilot, Cursor) in a professional capacity.

• Bilingual proficiency in both French and English.

• Demonstrated ability to present design work and technical solutions to various stakeholders.

📝 Enhancement Note: The requirement for 5+ years of experience, coupled with advanced CSS, JavaScript, and React skills, positions this as a mid-to-senior level role. The emphasis on legacy code and startup agility suggests that candidates who can demonstrate problem-solving in less-than-ideal environments will be highly sought after. The "Nice to Have" skills, particularly Storybook and atomic design, point towards a structured approach to front-end architecture.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Component Library Showcase: A significant portion of the portfolio should demonstrate experience in building and documenting reusable UI components, ideally using tools like Storybook. This should highlight modularity, state management within components, and adherence to design principles.

• Design-to-Code Examples: Provide clear examples of how you've translated Figma or other design mockups into pixel-perfect, responsive, and functional web interfaces. Showcase the before (design) and after (implemented code/live demo).

• CSS Architecture & Efficiency: Include examples that demonstrate advanced CSS skills, such as complex responsive layouts, animations, or efficient styling strategies. Showcase understanding of CSS specificity, maintainability, and cross-browser compatibility.

• Legacy Code Modernization Case Study: If possible, present a case study or example where you have refactored or modernized legacy front-end code (HTML, CSS, jQuery, older JavaScript). Highlight the challenges, your approach, and the improvements achieved (e.g., performance, maintainability).

Process Documentation:

• Workflow Design: Demonstrate an understanding of how to design and document front-end development workflows, from design handoff to implementation and testing.

• Component Development Methodology: Explain your process for developing reusable components, including considerations for accessibility, performance, and integration into larger applications.

• Testing & Validation: Showcase how you approach testing UI components and interfaces, including unit testing, integration testing, and ensuring cross-browser/device compatibility.

📝 Enhancement Note: For a role focused on design systems and modernization, the portfolio is paramount. Candidates should be prepared to showcase not just finished products, but their process of building and maintaining components, and how they approach technical debt. Demonstrating an understanding of atomic design and component-based architecture will be key.

💵 Compensation & Benefits

Salary Range:

Benefits:

• Health Coverage: 50% coverage of group health insurance premiums, providing essential medical benefits.

• Wellness Support:

  • Gym allowance to support physical fitness.
  • Reimbursement or access to fitness classes and team sports activities.
  • CAD $900/year telecommunications allowance to support remote work infrastructure.

• Remote Work: A 100% remote position within Canada, offering significant flexibility.

• Office Access: Occasional (1 day/month) requirement to be present at the Brossard office, facilitating in-person collaboration.

Working Hours:

• Standard full-time working hours are expected, likely around 40 hours per week. While the role is remote, a commitment to core working hours for collaboration and team synchronization is anticipated.

📝 Enhancement Note: The salary range is an estimation for a mid-to-senior level Front-End Developer in the Canadian market, specifically Quebec. The benefits package is detailed and emphasizes wellness, reflecting a company culture that values employee health and work-life balance, particularly for remote employees. The hybrid requirement for one day a month is a key detail for candidates.

🎯 Team & Company Context

🏢 Company Culture

Industry: Software as a Service (SaaS) within the Fitness & Wellness Technology sector. FLiiP is positioned as a leader in transforming how fitness centers and multi-site operators manage their operations.

Company Size: Fast-growing SaaS startup. While not explicitly stated, seed funding of CAD $4M+ and participation in Google for Startups Accelerator suggest a company that has moved beyond the early seed stage and is scaling, likely in the range of 50-150 employees.

Founded: While the founding date is not provided, the company's rapid growth and seed funding indicate a relatively young, dynamic organization focused on innovation.

Team Structure:

• This role is foundational to the platform modernization team. The UI/Front-End Developer will work very closely with the UI/UX Designer.

• Collaboration is expected with back-end developers, product managers, and potentially leadership, given the AI-first vision and direct contribution to product growth.

Methodology:

• AI-First Approach: Integration of AI tools and an AI-first vision are central to FLiiP's strategy.

• Continuous Experimentation: A culture that encourages trying new approaches and learning from outcomes.

• Agile Development: Implied by the startup environment, fast growth, and evolving priorities, suggesting agile methodologies are likely used.

• Data-Driven Insights: While not explicitly stated for this role, SaaS companies typically leverage data to drive product decisions.

Company Website: myfliip.com

📝 Enhancement Note: FLiiP appears to be a dynamic, well-funded startup with a clear vision centered on AI and innovation within the fitness tech industry. The culture is described as fast-paced and experimental, which will appeal to developers who enjoy building and iterating quickly. The team structure emphasizes close collaboration, particularly between design and front-end development.

📈 Career & Growth Analysis

Operations Career Level: This position is for a mid-to-senior level UI/Front-End Developer. The responsibilities include foundational work on a design system and significant contribution to platform modernization, indicating a role with substantial technical ownership and impact.

Reporting Structure: The developer will likely report to a Lead Front-End Developer, Engineering Manager, or Head of Product/Engineering. Close collaboration with the UI/UX Designer is a core aspect of the role.

Operations Impact: While this is a UI/Front-End role, its impact on "operations" (in the broader sense of platform functionality and user experience) is significant. By building a robust design system and modernizing the front-end, this role will:

• Improve the efficiency of the development team by providing reusable components.

• Enhance the user experience for fitness center operators and members, directly impacting member retention and operational efficiency for FLiiP's clients.

Growth Opportunities:

• Technical Specialization: Deepen expertise in React, React Native, design systems, and front-end architecture. Opportunity to become a subject matter expert in these areas.

• Leadership Potential: As the company grows, there may be opportunities to mentor junior developers, lead front-end initiatives, or transition into a Tech Lead role.

• Cross-Functional Learning: Exposure to AI technologies, product strategy, and the business side of a growing SaaS company.

• Impactful Contribution: Directly influence the product's user interface and user experience, leaving a lasting mark on a fast-growing product in a large market.

📝 Enhancement Note: This role offers substantial technical growth, particularly in design system architecture and React/React Native development. The opportunity to shape foundational elements of a rapidly scaling product is a significant draw. The mention of contributing to an "AI-driven company" suggests potential exposure to cutting-edge technologies beyond core front-end development.

🌐 Work Environment

Office Type: Hybrid model. FLiiP operates from an office in Brossard, Quebec, but this role is primarily remote (100% remote within Canada). The office serves as a hub for collaboration, likely for team meetings, workshops, or specific project sprints.

Office Location(s): Brossard, Quebec, Canada.

Workspace Context:

• Remote Flexibility: The 100% remote nature within Canada provides significant autonomy and flexibility in daily work setup.

• Collaborative Hub: The occasional day in the Brossard office is designed for in-person interaction, team building, and focused collaborative work, likely in a modern startup office environment that fosters innovation.

• Technology Stack: The role will involve working with modern development tools and technologies, including React, Storybook, Figma, and AI development assistants, within a cloud-based infrastructure typical of SaaS companies.

Work Schedule:

• While specific hours are not detailed, a standard full-time schedule (e.g., 40 hours/week) is expected. Given the remote and hybrid nature, there's likely flexibility around daily start/end times, provided core collaboration hours are met and project deadlines are achieved. This flexibility allows for better integration of personal wellness activities, aligning with the company's focus on fitness.

📝 Enhancement Note: The hybrid model is a key differentiator, offering the benefits of remote work with the option for in-person collaboration. This setup requires candidates to be self-motivated and disciplined for remote work, while also being amenable to occasional office visits. The emphasis on wellness suggests a work environment that supports work-life integration.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A review of your resume and portfolio to assess technical skills and experience against the job requirements.

• Technical Interview: Likely a deep dive into your front-end development skills, covering React, CSS, JavaScript, and your experience with design systems. This may involve coding challenges or in-depth discussions about past projects.

• Portfolio Presentation: A dedicated session where you will present your portfolio, walking through key projects, explaining your design choices, technical approach, and lessons learned. This is where you'll demonstrate your ability to translate designs into code and manage legacy systems.

• Team/Culture Fit Interview: An opportunity to meet with team members and discuss how you collaborate, your approach to problem-solving, and your alignment with FLiiP's AI-first, experimental culture.

• Final Interview: Potentially with a hiring manager or senior leadership to discuss overall fit, career aspirations, and finalize the offer.

Portfolio Review Tips:

• Quantify Impact: For each project, clearly articulate the problem you solved, your specific role, the technologies used, and the outcome. Use metrics where possible (e.g., "improved load time by X%", "reduced bug reports by Y%", "built Z reusable components").

• Showcase Design System Work: If you have experience building design systems or component libraries (especially with Storybook), make this a central theme. Demonstrate your understanding of atomic design, design tokens, and documentation.

• Highlight Legacy Refactoring: Prepare to discuss your approach to dealing with technical debt. Showcase examples where you've successfully modernized older code, emphasizing efficiency gains and maintainability improvements.

• Figma to Code Demonstration: Be ready to walk through a specific example of taking a Figma design and implementing it, explaining your thought process for component breakdown, styling, and responsiveness.

• Tell a Story: Structure your portfolio presentation like a narrative. Start with the challenge, explain your solution, detail your process, and conclude with the results and learnings.

Challenge Preparation:

• Live Coding/Code Review: Be prepared for a live coding exercise or a code review scenario. Practice common React patterns, CSS challenges (flexbox, grid, responsive), and JavaScript problem-solving.

• Design System Scenario: You might be given a hypothetical design or a set of requirements and asked to outline how you would build a component or a small system for it.

• Problem-Solving: Anticipate questions about how you would approach specific technical challenges, such as integrating legacy code with new components, optimizing performance, or ensuring accessibility.

📝 Enhancement Note: The interview process emphasizes practical skills and the ability to articulate one's work. A strong, well-curated portfolio that directly addresses the requirements of design system development and legacy code modernization will be crucial for success. Candidates should be ready to demonstrate both their technical prowess and their collaborative approach.

🛠 Tools & Technology Stack

Primary Tools:

• React: The core JavaScript library for building user interfaces. Proficiency in functional components, hooks, and state management is essential.

• CSS (SCSS/LESS/Styled-Components): Advanced CSS skills are critical, including responsive design, Flexbox, Grid, and potentially CSS preprocessors or CSS-in-JS solutions.

• HTML5: Solid understanding of semantic HTML for accessibility and SEO.

• JavaScript (ES6+): Modern JavaScript features and best practices.

• jQuery: Necessary for understanding and modifying existing legacy code.

Analytics & Reporting:

• Storybook: Essential for developing, documenting, and testing UI components in isolation.

• Figma: The primary tool for UI/UX design and design handoff.

CRM & Automation:

• React Native: For developing cross-platform mobile applications.

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

• AI Development Tools: GitHub Copilot, Cursor, or similar AI assistants for code generation and development acceleration.

📝 Enhancement Note: The technology stack is clearly defined, with a strong emphasis on the React ecosystem and modern front-end development practices. The explicit mention of jQuery highlights the need to manage technical debt, and the inclusion of AI tools signals a forward-looking development environment.

👥 Team Culture & Values

Operations Values:

• Innovation & Speed: A culture that values rapid iteration, experimentation, and a forward-thinking approach, particularly with AI integration.

• Fitness & Wellness: Reflecting the industry, there's an implied appreciation for health and well-being, supported by benefits like gym allowances and team sports.

• Collaboration: Emphasis on working closely with designers, engineers, and leadership to achieve common goals.

• Ownership & Impact: Encouraging individuals to take ownership of their work and contribute directly to the product's growth and success.

• Building: A hands-on culture where team members are actively involved in creating and developing the product.

Collaboration Style:

• Design-Centric: Close partnership between UI/UX designers and front-end developers is a cornerstone, ensuring designs are technically feasible and accurately implemented.

• Cross-Functional: While the immediate focus is on UI/UX collaboration, expect interaction with backend engineers, product managers, and leadership to align on feature development and product strategy.

• Feedback-Oriented: An environment that likely encourages constructive feedback to improve code quality, design implementation, and overall product development processes.

• AI-Assisted: Collaboration may extend to how AI tools are used collectively to enhance workflows and knowledge sharing.

📝 Enhancement Note: The company culture appears to be a blend of startup dynamism, tech innovation (AI-first), and a focus on employee well-being, fitting for a company in the fitness tech space. Developers who are proactive, enjoy building in a fast-paced environment, and value collaboration will likely thrive here.

⚡ Challenges & Growth Opportunities

Challenges:

• Legacy Code Integration: Strategically modernizing and integrating new React components with an existing HTML/CSS/jQuery codebase presents a significant technical challenge.

• Balancing Priorities: In a fast-growing startup, priorities can shift rapidly. Adapting to these changes while maintaining code quality and project momentum will be crucial.

• Design System Adoption: Ensuring consistent adoption and adherence to the new design system across the platform requires clear communication, documentation, and ongoing support.

• Remote Collaboration: Maintaining effective communication and collaboration with a distributed team, even with hybrid elements, requires strong interpersonal and digital communication skills.

Learning & Development Opportunities:

• Deepen React/React Native Expertise: Opportunity to become a highly skilled specialist in the React ecosystem.

• Master Design System Architecture: Gain in-depth experience in building and managing scalable design systems from the ground up.

• AI Tool Proficiency: Become proficient in leveraging cutting-edge AI tools to enhance development workflows, potentially leading to specialized roles in AI-assisted development.

• Product Development Lifecycle: Gain exposure to the full product development lifecycle in a rapidly growing SaaS company.

• Industry Exposure: Work within the burgeoning fitness technology sector, understanding market dynamics and user needs.

📝 Enhancement Note: The challenges are typical of a scaling tech company with evolving codebases. The growth opportunities are substantial, offering a chance to become a key architect of FLiiP's front-end and contribute to its AI-driven future.

💡 Interview Preparation

Strategy Questions:

• Design System Philosophy: "Describe your approach to building a scalable design system from scratch. What are the key considerations for component architecture, design tokens, and documentation?"

• Legacy Code Modernization: "Walk me through a time you had to refactor or modernize a significant piece of legacy front-end code. What was your strategy, what challenges did you face, and what were the outcomes?"

• Figma to Code Process: "How do you ensure pixel-perfect translation from Figma designs to functional code? What steps do you take to ensure responsiveness and cross-browser compatibility?"

• React Component Design: "Explain your process for creating reusable React components. How do you handle state management, props, and potential reusability issues?"

• AI in Development: "How have you used AI tools like Copilot or Cursor in your development workflow? What are the benefits and potential drawbacks?"

Company & Culture Questions:

• "What interests you about FLiiP's mission and our AI-first approach?"

• "How do you adapt to changing priorities in a fast-paced startup environment?"

• "Describe your ideal collaboration style with a UI/UX designer."

Portfolio Presentation Strategy:

• Structure is Key: Organize your presentation logically. Start with your most relevant projects (design systems, complex React UIs, refactoring examples). For each, clearly state the problem, your solution, your role, the technologies used, and the impact.

• Show, Don't Just Tell: Use live demos or well-annotated screenshots. For code examples, be prepared to discuss specific snippets that illustrate your technical approach.

• Highlight Process: Emphasize your thought process, decision-making, and problem-solving skills, not just the final output.

• Quantify Results: Whenever possible, use numbers to demonstrate the impact of your work (e.g., performance improvements, efficiency gains, bug reduction).

• Be Ready for Deep Dives: Expect detailed questions about your projects, so be prepared to discuss technical choices, challenges, and lessons learned in depth.

📝 Enhancement Note: Interview preparation should focus on demonstrating practical application of skills, understanding of design systems, and adaptability in a startup context. Candidates should be ready to articulate their process and quantify their impact, especially concerning the modernization of legacy code and the implementation of new design principles.

📌 Application Steps

To apply for this UI / Front-End Developer position:

• Submit Your Application: Apply through the provided Workable link, ensuring all required fields are completed accurately.

• Tailor Your Resume: Highlight your experience with React, advanced CSS, JavaScript, UI/UX design translation (Figma), and any experience with design systems or legacy code modernization.

Use keywords from the job description to optimize for ATS.

• Curate Your Portfolio: Ensure your portfolio prominently features projects demonstrating:

  • React component library development (Storybook experience is a plus).
  • Successful translation of Figma designs into responsive, pixel-perfect interfaces.
  • Examples of advanced CSS techniques and cross-browser compatibility.
  • Any case studies or examples of legacy code refactoring and modernization.

• Prepare for Technical Discussions: Be ready to articulate your development process, discuss technical challenges you've overcome, and explain your rationale behind specific architectural or coding decisions. Practice explaining your portfolio projects clearly and concisely.

• Research FLiiP: Understand FLiiP's mission, product, and AI-first vision. Familiarize yourself with their target market (fitness centers) and their growth trajectory. This will help you tailor your responses and demonstrate genuine 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.