Coinvestor
Developing and maintaining the platform Coinvestor for investors and traders, including the Trading Room for trader users and UI library and service management site.
Tech Stack
Typescript, Next.js, Recoil, React-query, TailwindCSS, Next-i18next, Jest, CircleCI, Github Actions, Storybook
New Feature Development and Enhancements
2023.04 ~ 2024.07- Participated in the UX planning stage and developed new fixed-income fund products.
- Developed payment features and common UI components for three types of fund products (Quant, Spot, Earn)
- Problem Diagnosis: Documented UX issues of the existing fund payment input components, discussed with planners and designers, and conveyed to the business team for UX policy updates.
- Outcome: After enhancing the fund payment function, Google Analytics purchase events increased by 302% and total investment in fund products increased by 108.2%
- Increased productivity by developing common classes and methods for managing UI state according to fund schedules
- Developed logic to manage the states of Quant products (Preparation/Subscription/Operation/Settlement) to maintain UI consistency on the fund market and detail pages.
- Developed logic to manage the states of Spot product purchase/sale/cancellation.
- Developed common logic for processing numerical data according to display rules policies to deliver accurate information
- Improved productivity by adding number processing logic to the Stat component in the design system library.
- Improved the complexity of legacy code by abstracting the comment function on the detail page as a common component
- After enhancing the comment function, active users increased by 15%, and comment participation events increased by 65%
- Resolved props drilling and runtime errors during API calls by introducing appropriate state management and react-query (v4).
- Enhanced user experience on the market and fund product detail pages by implementing performance improvements
- Improved lighthouse score from 67 to 95-100 by switching from SSR to ISR and applying prefetch.
- Improved overall page loading speed by approximately 70% (1.312s -> 399ms).
- Improved algorithm product detail page: LCP by 80% (2.1 -> 0.4s), CLS by 35% (0.416 -> 0.063).
- Improved manual product detail page: LCP by 50% (1.8 -> 0.8s), CLS by 76% (0.762 -> 0).
- Reduced initial loading hydration stage by 81% (1s -> 189.58ms).
- Optimized with appropriate caching to call APIs according to fund data update times.
- Optimized bundling size and developed fallback, skeleton UI.
- Improved development productivity by introducing React-Query and converting legacy code to functional components.
- Improved usability by making the market and fund payment components responsive on mobile devices
- Enhanced user experience by implementing share, favorite, and PDF download on the fund detail page.
- Strengthened collaboration by establishing an automatic deployment environment using Circle CI and Vercel and documenting the setup process.
- Developed unit and integration test codes using Jest to prevent bugs in the early development stage.
- Improved test coverage of the fund payment process from 0 to 90.19%
- Established an automatic test environment by writing CircleCI deployment scripts.
- Adapted to backend OAuth central authentication server for frontend response.
- Improved authentication logic and error boundaries
- Problem Diagnosis: Found bugs causing the entire UI to break on specific pages due to improper exception handling. Identified 200 error responses and missing client code exception handling in certain APIs.
- Solution: Centralized error handlers of Axios Interceptor and exception handling logic for 200 errors. Introduced react-error-boundary and QueryErrorBoundary for efficient error propagation management. Improved error toast and error fallback component exposure.
- Improved Refresh token re-request logic upon authentication token expiration. Abstracted the follow-up function of the refresh request, introduced async await to resolve the Promise callback hell.
- Documented the dev plan before developing error boundaries and shared it with team members. Identified and documented API 200 errors during this process.
- Collaborated with planners to improve and document common exception handling policies after identifying specific unhandled errors.
Coinvestor Rebranding and Multi-Domain Setup
2022.11 ~ 2023.03- Migration to Next.js along with rebranding.
- Introduced server-side rendering and contributed to improving team proficiency through seminars and documentation.
- Implemented and refactored currency exchange and remittance features on the My Wallet page to improve code quality.
- Improved community page resulting in a 15% increase in active users and a 65% increase in participation events
- Improved global user community through Google translation of comments
- Improved maintainability of legacy code by reusing common comment components and introducing react-query.
- Improved usability by adding comment deletion, reporting, image and GIF uploads.
- Enhanced global user accessibility by supporting six languages in collaboration with the operations team.
- Applied server-side multilingual support using next-i18next.
- Supported multilingual routing based on Next.js.
- Developed fund management dashboard and fund creation site as separate domains for Trader users managing funds.
- Developed Create Strategy page for Trader users to register products.
- Developed Strategy List page for users to monitor and manage their created products.
- Managed deployment and maintenance using Circle CI.
- Back-office development: Took charge of developing and maintaining the admin page for Coinvestor and fund product management, making it available to operations team, Trader, and Affiliate users.
- Developed 'Quant History' page to manage settlement history of Quant fund products.
- Developed 'Monitoring' page to monitor and set risk indicators of Quant products.
- Developed User Management for managing Affiliate users.
- Improved code maintainability by refactoring legacy code: introduced react-query, abstracted components, and improved props structure to lower dependencies.