Senior Frontend Engineer  • Frontier.cool

August 2022 - February 2024

Project Development

• Developed and maintained the TextileCloud™ SaaS platform (Vue + Pinia + Vue Router).
• Developed a 3D Viewer to simulate digital fabrics on different 3D models (Three.js + U3M + Blender).
• Developed a color-changing algorithm allowing users to specify fabric Pantone colors in the 3D Viewer.
• Built a perspective transformation cropping tool for fabric scanned images, addressing Moiré patterns and performance bottlenecks (Konva + OpenCV + Web Worker).
• Developed an online spreadsheet to support batch data editing on the platform (AG Grid + Zod).

Technology Implementation

• Introduced TypeScript to enhance project maintainability and readability.
• Replaced Vuex with Pinia for state management, reducing boilerplate code while reusing existing Composables.
• Used Zod and VeeValidate for data validation, ensuring all UI forms operate based on domain logic.
• Utilized Vitest for unit testing and integrated CI/CD to ensure code quality across environments.
• Conducted asynchronous cross-browser E2E testing using Playwright.
• Enhanced user experience by adopting Optimistic UI after discussions with UI/UX designers.

Delivery Process Contributions

• Implemented Trunk Based Development Flow, considering team pace and delivery habits to increase product delivery flexibility and stability.
• Established CI/CD for internal testing environments based on Trunk Based Development.
• Collaborated with 3D designers to establish glTF file format delivery standards: ensuring that what is seen in Blender matches the final product, reducing communication costs.
• Optimized frontend and backend API processes by splitting the original single Swagger YAML file into domain-specific files to reduce cognitive load for communication and development.
• Integrated Swagger Repo with CI/CD to block merge requests with syntax errors.
• Automatically generated TypeScript API SDK using OpenAPI Generator, avoiding manual type definitions and API integrations.

Side Projects

• Website: https://application-frontend-mhkzpmkvca-de.a.run.app
• Storybook: https://61f6c7a2e97ef3003af9a465-ovoucjtugi.chromatic.com/
• Github Repo: https://github.com/beecool-cocktail/application-frontend

The product is still in internal testing, and the first launch requires a 10-second wait due to cold start.

Introduction

This website is meticulously crafted by Marc jr., named after the initials of the team members’ English names. We are a project team of six dedicated to creating an exclusive space for cocktail enthusiasts. On our cocktail platform, you can find diverse recipes or share your own unique creations! Whether you’re a drinker, a connoisseur, a drunkard, or someone who enjoys a sip, we hope you’ll find your favorite cocktail here!

Technologies Used

• Developed with Next.js + Material UI + Zustand + SWR.
• Deployed using Github Actions integrated with GCP Cloud Build & Cloud Run.
• Supports PWA, allowing it to be added to the mobile home screen as an app.

Collaboration with Backend Developer

• Used OpenAPI Generator to generate TypeScript API SDK based on Swagger YAML.
• Utilized each other’s Docker images for local development to reduce environment setup difficulties.

Collaboration with UI/UX Designer

• Discussed design guidelines to ensure consistency in UI/UX experience.
• Verified various scenarios using Storybook + MSW and made team members aware of component differences in each chromatic build through visual tests.
• Developed animations using Rive + React Spring.
• Discussed image optimization strategies with designers and backend engineers to speed up loading times and reduce network traffic.