CHARON YU RESUME

Charonyu

About Me

I am a React frontend engineer with a passion for continuous learning and exploring new technologies. I enjoy applying this knowledge to create high-quality websites and mobile applications, always striving to provide a better user experience. The sense of accomplishment I feel upon completing a project is immense, and I constantly seek ways to refine and elevate my skills. I look forward to collaborating with teams that share a common goal, aiming to develop astonishing applications together. Thank you for reading.

Skills

I have experience in the following technologies.

Frontend

ReactReact NativeNext.jsTypeScriptStyled ComponentsTailwind CSSRedux/ZustandJest Unit TestReact Queryi18n / react-intlWebRTC/WebSocketDexie.jsThree.js

Backend

Node.jsExpressPHPRESTful APIGCP Compute EngineJWT/BcryptDockerGithub Action CI/CDCrawlingFlaskLine Bot

DataBase & Tools

GitMongoDBMySQLFirebasePostgresqlLightHouseVercel / Netlify / Github pagesFigmaGithubAsana

Career

Feb 2024 ~ Present
Full Stack Engineericon

MetaCRM-Full Stack Engineer

react.jsreduxstorybookvscode Extensionmaterial-uireact-intlechartsnode.jsmongodbgit
  • Responsible for developing and maintaining the company's web3 CRM system.
  • Developed and maintained the company's CRM system using React, Redux, and related tools.
  • Developed custom Storybook components for the company's UI design based on Material-UI (MUI).
  • Created Bash scripts to automate project setup for QA testing.
  • Developed a VS Code Extension to help developers quickly insert react-intl snippets into their code.
  • Occasionally involved in backend development and assisting in troubleshooting backend issues.
  • Regularly participate in code reviews with colleagues, collaborating to discuss best practices and optimize code quality.
Feb 2023 ~ Jan 2024
Full Stack Engineericon

FANXI-Full Stack Engineer

reactjsnextjsredux/zustandtailwind csstypescriptweb3websocketwebRTCdexie.jslighthousereact profilercoveragegit
  • In charge of the company's product web design and feature development.
  • Using typeScript to develop and maintain the company's website, ensuring high-quality code and user experience.
  • Refactored and optimized company projects while communicating and collaborating with colleagues to ensure the product met the desired user experience.
  • Engaged in frontend development using React, Next.js, and related tools.
  • Applied Tailwind CSS for web design.
  • Utilized the Redux state management library in conjunction with react-query to manage global states and reduce server load.
  • Implemented WebRTC technology to achieve real-time communication and video conferencing features between web pages.
  • Employed the WebSocket communication protocol to establish bidirectional communication channels for real-time updates and interactive functionalities.
  • Applied Web3 technology to interact with blockchain, connecting smart contracts to develop required features.
  • Used Dexie.js to temporarily store message data in IndexedDB.
  • Used Git for version control and collaboration.
  • Employed tools such as LightHouse, React Profiler, and coverage to optimize projects.
Mar 2022 ~ Nov 2022
Frontend Engineericon

CacDi-Frontend Engineer

reactjsnextjsscsscanvasgitlabasanai18n
  • Responsible for developing website features, rectifying errors, and discussing API integrations with backend engineers to ensure timely delivery of projects while maintaining high-quality standards.
  • Collaborated closely with designers using Figma and employed SCSS for web design, aiming to achieve exceptional user experience and visual design.
  • Independently developed projects using React and Next.js.
  • Assisted team members in resolving issues and addressing daily technical challenges.
  • Understood and applied frontend internationalization (i18n) techniques to cater to multilingual website requirements.
  • Implemented drawing games on the web, using Canvas technology to develop a highly interactive gaming experience, while employing JavaScript to manage game logic and animation effects.
  • Utilized GitLab for version control and team collaboration, and used Asana for project management and team coordination.

Project List

Here are some of the projects I have worked on. I always try to make side projects to learn new things. I hope you like them.

Ithome Blog Upload Readme Github Action

Ithome Blog Upload On Readme is a GitHub Action that automatically uploads the latest blog post from Ithome to the README.md file of a GitHub repository. It uses Node.js and Puppeteer to crawl the Ithome website and retrieve the latest blog post. The action is triggered by a GitHub workflow and updates the README.md file with the latest blog post content.

link-preview-details

link-preview-details is an npm package that uses Node.js and Puppeteer to crawl websites and retrieve link preview details. It provides a user-friendly web link preview, including title, description, and image, when a URL is provided.

React-Intl AutoComplete Vscode Extension

React-Intl AutoComplete Vscode Extension is a Visual Studio Code extension that helps developers quickly insert react-intl snippets into their code. It saves time for developers who use react-intl in their projects. The extension is available on the Visual Studio Code Marketplace and includes react-intl snippets and auto complete translate features. It facilitates faster translation of text to react-intl code and can automatically add entries to en.json.

ETF Net Worth PWA

ETF Net Worth PWA is a Progressive Web App that provides a convenient way to check the net worth of ETFs on the Taiwan Stock Exchange. It integrates with an API to quickly search for the desired ETFs and allows users to store their favorites using localStorage for easy access. The app is deployed on Netlify.