Florentin Hetriuc

GrubHub, one of the largest food delivery companies in the United States, provided me with the opportunity to work on their food delivery application. As part of the frontend team, I was primarily responsible for the checkout process, which included the following flow: Add to Bag → Proceed to Checkout → Place Your Order.

Key responsabilities:

• Refactoring Legacy React Components:
  I refactored outdated React components, some of which exceeded 4,000 lines of code, to improve maintainability, readability, and performance. This effort significantly reduced technical debt and enhanced the overall code quality.
• Enforcing 100% Code Coverage:
  I implemented and enforced a 100% code coverage rule for all newly added components and functions, ensuring robust and reliable code through comprehensive testing practices.
• Fixing/Stabilizing Flaky TestCafe E2E Tests:
  I identified and resolved issues with broken or unstable TestCafe end-to-end (E2E) tests, ensuring consistent and reliable test execution across the application.
• Implementing New TestCafe E2E Tests:
  I developed additional E2E tests to cover critical user flows and key functionalities that were not adequately addressed by integration tests. To achieve this, I mocked API calls using HAR files, ensuring thorough test coverage.
• Participating in PR Reviews:
  I actively participated in the pull request (PR) review process, providing constructive feedback to ensure code quality, consistency, and adherence to best practices.

As a separate initiative, I led the frontend team’s effort to implement a Braintree 3D Secure Authentication step during the checkout process. This feature played a crucial role in reducing fraudulent transactions. The project involved the following steps:

• Research:
  Investigated the feasibility of building a reusable component compatible with both web and mobile platforms (via webview).
  Conducted in-depth research on the Braintree SDK to understand its capabilities and integration requirements.
• MVP Development:
  Built a small MVP to test the Braintree 3DS Web SDK on both web and mobile environments.
• Documentation and Proposal:
  Wrote the RFC (Request for Comments) documentation to outline the project’s scope and technical approach.
  Presented the proposal in the WBR (Weekly Business Review) meeting to secure stakeholder approval.
• Collaboration and Planning:
  Collaborated with the backend team to align on expectations, requirements, and API contracts.
  Broke down the implementation process into smaller, manageable tasks for efficient execution.
• Implementation:
  Led the actual implementation of the Braintree 3D Secure Authentication feature, ensuring seamless integration into the checkout flow.

Technologies used:

• Frontend: React.js
• State Management: React-Redux and ReactContext
• API Integration: REST API, Axios
• Testing: React Testing Library, Jest, TestCaffe
• Monitoring: DataDog, PagerDuty
• SDK's: Braintree, Stripe, ApplePay, AmazonPay

I worked on a single-page application designed for B2B clients, enabling them to create customizable labels for any product available in the market. (we are speaking about product labels which can be found on every single product). These labels were fully customizable and could include barcodes, ingredients, allergens, nutrient values, and even a nutri-score.

Key Responsibilities:

Implementing Concurrent Editing with WebSockets:

I developed a feature that allowed real-time concurrent editing for specific pages/editors using WebSockets. When a user began editing a particular object, that editor was locked to prevent other users from modifying the same object simultaneously. If another user attempted to access the locked object/editor, they would receive a notification indicating that the editor/object was currently being edited by the primary user while the action buttons where disabled and the api-calls for that specific functionality blocked. Once the primary user completed their editing session, a "editor-closed" message was sent via WebSockets, unlocking the editor for other users.

Implementing design-system components:

I built reusable components on top of the Material-UI framework, ensuring a consistent look and feel across the company’s ecosystem.

Technologies used:

• Frontend: React.js, Next.js
• State Management: TanStack Query
• Form Handling: Formik
• Date/Time Handling: Moment.js
• API Integration: REST API, Axios
• Testing: React Testing Library, Jest, Cypress
• Real-Time Communication: WebSockets

This experience allowed me to enhance user interaction, improve system efficiency, and deliver a seamless and consistent experience across the application.

Implemented new functionalities for SPA from concept through deployment.

Worked closely with UX designers, BE developers and Testers to deliver best outcome.

Actively participate in estimating new tasks.

Technologies:

Mobile:

• React native
• Redux
• Redux Saga
• React-navigation
• Jest

Web

• Clojurescript;
• Material-UI;
• CSS.
• Rest API.

Tasks:

• Implement best practices in terms of code reusability and dumb components;
• Coordinate, develop, assist, help the team on the development stages;
• Coodrinate with UI/UX team;

Technologies:

• ReactJs;
• React-Query;
• Testing-library/Jest;
• Graphql;
• Moment.js;
• React-i18next;
• Rest API.

Tasks:

Implemented new design based on design mockups for 10 years old b2b and b2c C# application.

Main tasks:

• Implementing PixelPerfect design based on new design mockups;
• Refactoring and cleanup on existing HTML and JS code;
• Implementing responsive design;
• Adding new pages in React with Redux;
• Implementing React Design System components like (Button, Modal, Popover, Panel, Slider, Tab etc);
• Implementing React unit-tests with Jest and Enzyme;
• Use of REST API.

Technologies:

• Javascript;
• Reactjs;
• Redux;
• LESS;
• Bootstrap;
• React-Bootstrap;
• Material-UI;
• Lodash;
• Moment;
• Rest API
• ASP.Net

Tasks:

Developing b2c web-application from scratch.

Main tasks:

• Adding project architecture for frontend side;
• Creating reusable components;
• Using BEM methodology for SCSS code;
• Implementing PixelPerfect design using tools like: https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
• Implementing new React pages;
• Use of REST API.

Technologies:

• HTML/SCSS;
• Javascript;
• Reactjs;
• Redux;
• Lodash;
• Videojs;
• Google maps API;
• Youtube API;
• Rest API;
• Ruby.

Tasks:

Developing b2c web-application from scratch.

Main tasks:

• Adding project architecture for frontend side using React, Redux and SCSS for styling part;
• Developing React components like (Buttons, Inputs, LazyImages);
• Implementing PixelPerfect design;
• Use of Rest API;
• Developing standalone widgets which are used by b2b applications.

Technologies:

• Reactjs;
• Redux;
• SCSS/Styled-Components;
• Atomic Design;
• Lodash;
• Google API;
• Facebook API;
• Plaid API;
• Videojs;
• Python.

Main tasks:

• Work with Meteor.js framework;
• Integrate new pages, sections and components for CRM App System;
• Implement responsive landing pages;
• Implement responsive web application;
• Use Pixel Perfect tools in order to get perfect visual results.

Technologies:

• Meteor.js;
• HTML;
• CSS;
• Twitter Bootstrap;
• LESS/SCSS.

Main tasks:

• Implementing websites using design files and customer requirements;
• Implementing responsive websites;
• Implementing new pages or new sections on existing websites;
• Use of Pixel Perfect tools in order to get perfect visual results.

Technologies:

• HTML;
• CSS;
• Javascript;
• jQuery;
• Twitter Bootstrap;
• LESS/SCSS;
• Atomic design.