Hello, I'm
CharonyuFull Stack Engineer
React Developer passionate about building high-quality web & mobile applications with excellent user experience.
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
Frontend
Backend
DataBase & Tools
Career
Feb 2024 ~ Present

MetaCRM
Full Stack Engineer
- 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

FANXI
Full Stack Engineer
- 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

CacDi
Frontend Engineer
- 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.
Projects
Web apps, developer tools, open-source packages, and more.

Tripi - 旅行行程規劃平台
Tripi 是一個旅行行程規劃平台,支援多人協作、AI 行程建議、打包清單、行程匯出與分享等功能。使用 Next.js、TypeScript、Tailwind CSS 打造,支援 PWA 跨裝置同步。

ShipLaunch - 個人開發者部署平台
自建的一站式開發者部署平台,整合 GitHub Webhook 自動部署、Docker 容器管理、動態子網域路由與服務監控,讓 Side Project 從開發到上線一鍵完成。

Analysis Service - 網站分析追蹤系統
自建的網站分析追蹤系統,追蹤用戶點擊、頁面瀏覽、停留時間等行為數據,提供 Dashboard 即時查看各網站流量與互動數據。
PixelFrame - iOS 桌面小工具 App
iOS 桌面小工具客製化 App,結合像素風格相框與個人照片,打造獨特的 iPhone 主畫面 Widget。支援 50+ 像素相框、拖曳縮放照片、多語系、天氣 Widget 等功能。
Pixel Icons - 像素圖示庫
像素風格圖示庫網站,提供多種分類的可愛像素圖示,支援搜尋、分類瀏覽、單張或批次下載,供開發者與設計師使用。

Ithome Blog Upload Readme Github Action
GitHub Action 自動將 Ithome 最新文章上傳到 GitHub README.md,使用 Node.js 和 Puppeteer 爬蟲抓取最新文章。

React-Intl AutoComplete VSCode Extension
VSCode 擴充套件,快速插入 react-intl 程式碼片段,自動補全翻譯並新增到 en.json,提升國際化開發效率。

link-preview-details
npm 套件,使用 Node.js 和 Puppeteer 爬蟲抓取網站連結預覽資訊,包含標題、描述和圖片。

React Custom Hooks & TypeScript & Unit Test 系列文
30 篇系列文章,介紹如何建立 React Custom Hooks,搭配 TypeScript 型別定義與單元測試撰寫。

ETF Net Worth PWA
PWA 應用程式,快速查詢台灣 ETF 淨值,整合 API 搜尋並支援 localStorage 收藏,部署於 Netlify。