Versori Interview

Interview Todo

• Do Graph Course
• Practice White Boarding UX
• Practice Planning Session
• Watch a video about CRDT
• Play with the platform
• Get familiar with React Flow
• Prep some questions

Interview prep

Today

Morning

• Core Frontend Design (1.5h)
  • Design systems and their importance
  • Practice articulating how you would structure components for reusability
  • Accessibility (ARIA, Keyboard nav)
  • Responsive and mobile-first design principles
• System Design for Frontend
  • How to design scalable, reusable components
  • Sketch or map out how you would structure design system with tokens
  • components and utilities
  • Practice a feature design (responsive navbar or datepicker)

Midday session

• React Flow Basics(1.5h)
• Feature design exercise(2h):
  • use the User Profile Card or Filter dropdown or task manager
    • Fully flesh out:
      • Component hierarchy
      • State management
      • Integration with APIs
      • Accessibility
      • Write down your thought process and decision as if you were presenting them
• Backend Basics(1h):
  • Review RESTful APIs:
    • Http methods
    • Response handling (success, error, retries)
  • Review Database Basics
    • Understand common schemas (users, posts, etc)
    • SQL vs NoSQL in simple terms

Afternoon

• Simulated Design meeting (1.5h)
  • Choose a feature idea (task list with drag-and-drop)
  • Lead yourself through the design discussion
    • Define user stories and requirements
    • Discuss component hierarchy
    • Outline trade-offs in design decision
    • Address questions like scaling, error handling and accessibility
• Q&A Practice (1.5h)
  • Answer behavioural and situational questions
  • Prepare questions for them

Evening

• Review Company’s context (1h)
  • Spend some time exploring their website and product
  • Take notes on what excits you or stands out
• Frontend discussion (1h)

Tomorrow

Morning

• Quick refresh (1.5h)
  • Skim notes from yesterday
  • Review key topics you might feel less confident
  • Check libraries to recall common APIs
• Mental rehersal
  • practice summarising key design princples or project experiences
  • Mentally walk through leading a frontend feature design meeting
• Break:
  • Take a break and relax

Notes on the Company

Versori is a technology group that develops and maintains software products for business and enterprise use. With a specialised focus on high dependency and highly available software, Versori products are built to provide its clients with the key infrastructure to run their operations.

• Founded in 2022

Recent News

https://www.manchesterdigital.com/post/versori/manchester-start-up-versori-wins-usd500k-y-combinator-funding

• Andy said that you can use Versori with Walmart?

Leadership team

Dan Jones
Sean Brown

Notes on the role

• On-site: 5 times a week
• Seed
• 90% Frontend / 10% backend

Questions

1. What makes you unique/better in comparison to Workato
2. What is the reason to moving part of the business to the US?
3. What is your Frontend and Backend stack?
   1. 3 top level APIs for customers
   2. CockroachDB
   3. Kubernetes
4. What are your short and long term growth plans?

Interview Stages

1. Technical and white boarding  
2. Culture fit  

• White Board Exercise

• Planning session

• May be more than 9-5

• Get share options (for the rest)

  • Grant shares when

• They plan to grow to 50mln

Notes on a product

• IPaaS

• Helps companies to build complex integrations in a short period of time

• It is a tool that makes dev’s live easier

• Industries they help

  • Ecommerce
  • Business Ops
  • Supply chains
  • Hospitality
  • SaaS
  • AI

• They use AI to interpret requirements to build integration plan

• AI is not THAT useful

Tell us about yourself
I’m a software engineer with 3 years of specialised experience in frontend development. My professional philosophy centres on two core beliefs: creating exceptional user experiences and empowering developers through efficient tooling.

I’m passionate about building accessible and user-friendly web and mobile applications. I strongly believe that smooth interactions and great user experience are critical to a products’s success. This extends beyond the end user and I am also interested in improving developer experience, recognising that great and intuitive tooling enables teams to deliver value faster and more effectively.

Currently, I work at [Current Company], where I’ve been leading frontend development across multiple critical applications. My responsibilities include developing customer dashboards, admin panels, and B2B management systems for our tenanted applications. A significant achievement has been leading the design system development from inception, coordinating the entire process to ensure it met our requirements.

I’ve recently started expanding my skills by exploring backend development. My goal is to build a t-shaped skill set to understand the entire development cycle from initial system design through to final release.

What I like about BrightHR is your commitment to innovation and developer-led culture, and the opportunity to contribute to a well established SaaS product. I am excited about having the opportunity to join a team that values engineers and continuous improvement.

Tell us about your recent achievements in a current role or project
B2B Dashboard with Multi-tenancy
Situation
The company sought to expand its business model by enabling other businesses to use our services as a white-labeled product. This required a significant architectural challenge: developing a multi-tenant solution that could work seamlessly with both our legacy and new systems while maintaining scalability and performance.

The primary constraint was developing a Minimum Viable Product (MVP) within an extremely tight timeframe, which added complexity to our technical approach.

Task
Develop a flexible, scalable solution that would:

• Support white-labeling across frontend applications
• Enable custom configurations once MVP is done
• Integrate with existing legacy and new system architectures
• Provide a path for future expansion

My specific responsibility was to lead the frontend implementation, working closely with the architect and senior developers to ensure a cohesive, comprehensive solution. I also had to figure out how we can dynamically deploy this application for all tenants.

Action

• Collaborated with senior technical team to design a multi-tenant architecture
• Modified the Admin Panel to enable tenant management for our internal tea,
• Implemented a tenant identification strategy:
  • Introduced tenant-ids in the access pattern for all services
  • Temporarily flagged data in new system tables by adding tenantId
• Ensured seamless integration between legacy and new system approaches
• Developed flexible configuration mechanisms to support customization

Result

• Successfully delivered MVP within two weeks

• Enabled the business to onboard its first B2B customer

• Laid groundwork for white-labeling by:

  • Creating a B2B dashboard for tenanted application management
  • Implementing dynamic theming capabilities
  • Developing granular access control features

• Provided a scalable solution that supported future business growth

Design System
Situation

• The company had two applications using different UI libraries and styling technologies, causing productivity issues. Developers needed to learn distinct tools for each application, slowing delivery and reducing efficiency.
• Accessibility requirements for a financial services company were not met, as flagged by an external review for FCA compliance.
• The system was incompatible with planned mobile app development.
• Applications lacked easy theming for B2B and internal use cases.
• Designers had no consistent Figma components for wireframing, leading to inefficiencies. This also resulted in skipped design steps to speed up the development process, leaving developers to improvise UI resulting in subpar implementations.
• Existing components lacked visual or behavioral tests, leading to accidental breakages and regressions during development.
• Collaboration between designers and developers was hindered by the absence of a centralized, interactive tool for component review and documentation.

Task

• Build a comprehensive design system to standardize UI components and accelerate design and development.
• Identify a styling solution that bridges design and development, avoiding manual “translation” of values.
• Architect a system design package decoupling styling from functional implementation.
• Ensure compatibility with both React and React Native for potential mobile app development.
• Implement a tool for component review, documentation, and testing to facilitate designer-developer collaboration.

Action
Created a UI package using Radix UI, TailwindCSS, and Storybook:

• Radix UI: Provided accessible, headless UI components, addressing FCA compliance requirements.
• TailwindCSS:
  • Decoupled styles from frameworks, allowing usage across platforms, including vanilla HTML/CSS.
  • Offered tokenized CSS classes with sensible defaults, simplifying naming conventions and fostering a shared language between design and development teams.
  • Enabled potential React Native compatibility via NativeWind.
    Collaboration Framework: Introduced a unified workflow between design and development teams:
• Created reusable Figma components mirroring the design system, reducing redundant effort and inconsistencies.
• Mapped Figma variables directly to TailwindCSS tokens, ensuring seamless alignment between designs and code.
  Testing and Reliability:
• Integrated Chromatic and Storybook to automate visual testing, ensuring any UI changes were immediately flagged.
• Added behavioral tests to components, preventing accidental regressions and ensuring predictable functionality.
• As Chromatic uses Storybook, we also had a centralised place for documentation linked to our Figma.

Result

• New features are consistent, and old features are progressively reworked into the new design system.

• Feature delivery is faster due to standardized components and seamless alignment between Figma and code variables.

• Design teams provide early feedback, improving collaboration and avoiding rework.

• Chromatic ensures confidence in changes by visually identifying affected components.

• The company now has a consistent UI, resolved accessibility issues, and a future-ready design system compatible with mobile app development.

Migration of legacy app to React
TODO

ADMIN PANEL
TODO