CharonyuCharonyu

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

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

MetaCRM

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

FANXI

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

CacDi

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.

Projects

Web apps, developer tools, open-source packages, and more.

Tripi - 旅行行程規劃平台
2025
Latest
Next.jsTypeScriptTailwind CSSPWA

Tripi - 旅行行程規劃平台

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

DetailsVisit
ShipLaunch - 個人開發者部署平台
2025
Latest
Next.jsExpressDockerMongoDB

ShipLaunch - 個人開發者部署平台

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

DetailsVisit
Analysis Service - 網站分析追蹤系統
2025
Node.jsMongoDBChart.jsExpress

Analysis Service - 網站分析追蹤系統

自建的網站分析追蹤系統,追蹤用戶點擊、頁面瀏覽、停留時間等行為數據,提供 Dashboard 即時查看各網站流量與互動數據。

DetailsVisit
PixelFrame - iOS 桌面小工具 App
2025
SwiftSwiftUIWidgetKitiOS

PixelFrame - iOS 桌面小工具 App

iOS 桌面小工具客製化 App,結合像素風格相框與個人照片,打造獨特的 iPhone 主畫面 Widget。支援 50+ 像素相框、拖曳縮放照片、多語系、天氣 Widget 等功能。

DetailsVisit
Pixel Icons - 像素圖示庫
2025
ReactViteFramer MotionDocker

Pixel Icons - 像素圖示庫

像素風格圖示庫網站,提供多種分類的可愛像素圖示,支援搜尋、分類瀏覽、單張或批次下載,供開發者與設計師使用。

DetailsVisit
Ithome Blog Upload Readme Github Action
2024
GitHub ActionsNode.jsPuppeteer

Ithome Blog Upload Readme Github Action

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

DetailsVisit
React-Intl AutoComplete VSCode Extension
2024
VSCode ExtensionReact-Intli18n

React-Intl AutoComplete VSCode Extension

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

DetailsVisit
link-preview-details
2023
npmNode.jsPuppeteer

link-preview-details

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

DetailsVisit
React Custom Hooks & TypeScript & Unit Test 系列文
2023
ReactTypeScriptUnit TestBlog

React Custom Hooks & TypeScript & Unit Test 系列文

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

DetailsVisit
ETF Net Worth PWA
2022
PWAReactAPI

ETF Net Worth PWA

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

DetailsVisit