Juun

Technologies

Core Technologies

Next.js
Next.js 15
React
React 19
TypeScript
TypeScript
Tailwind CSS
TailwindCSS
Redux
Zustand
pnpm
PNPM

Developer Tools

Turborepo
Turborepo
ESLint
ESLint
Jest
Jest
Storybook
Storybook
Prettier
Prettier
GitHub Actions
GitHub Actions

Project Timeline

  1. 001

    Foundation

    Sep 2024

    Project Inception
    Next.jsTypeScriptYarn BerryPnP

    Initial commit with standard single Next.js application, with various development tools and Yarn Berry PnP.

  2. 002

    Architecture

    Mar 2025

    Monorepo Architecture
    MonorepoTurborepoArchitectureScalability

    Restructured from single Next.js app to Turborepo-powered monorepo with shared packages

  3. 003

    Infrastructure

    Mar 2025

    Package Manager Migration
    ArticleYarn BerryPNPMPackage ManagerMonorepo

    Migrated from Yarn Berry PnP to PNPM due to Next.js standalone and Vercel monorepo incompatibility

  4. 004

    Performance

    Jun 2025

    Bundle Optimization
    ArticlePerformanceBundleOptimizationLazy Loading

    Achieved 66-72% bundle size reduction through strategic lazy loading and dependency analysis

  5. 005

    Architecture

    Jul 2025

    Micro-Frontend Experiment
    ArticleMFEMulti-ZonePerformanceReversal

    Implemented Next.js multi-zone architecture, then removed it after discovering 77% performance degradation

  6. 006

    Performance

    Sep 2025

    Resium Removal: Native Cesium
    CesiumBundle OptimizationPerformanceReact

    Removed Resium wrapper library (-1MB), implemented direct Cesium integration with custom React wrapper

  7. 007

    Infrastructure

    Sep 2025

    Docker Build Optimization
    ArticleDockerOptimizationDevOpsCI/CD

    Reduced Docker image from 526MB to 346MB (34% reduction) with 99% layer efficiency

  8. 008

    Architecture

    Sep 2025

    Cesium Utils Page Architecture Overhaul
    ArticleRefactorSoCArchitectureContextPortability

    Complete refactoring for portability, high cohesion, and separation of concerns using private folders and route-scoped context

  9. 009

    Infrastructure

    Sep 2025

    Testing Framework Migration
    TestingVitestPlaywrightDX

    Migrated from Jest to Vitest for unit tests, added Playwright for E2E testing

  10. 010

    Architecture

    Oct 2025

    Timeline Implementation
    ADRComponentTimelineDesign

    Designed and implemented timeline for the project. Inspired by monolith from 2001: A Space Odyssey.

  11. 011

    Architecture

    Oct 2025

    Serverless Database Integration
    DatabasePrismaNeonServerlessEdge Computing

    Integrated Prisma ORM with Neon PostgreSQL for serverless architecture, eliminating traditional backend framework

  12. 012

    Architecture

    Nov 2025

    Blog System Migration
    ADRDatabase-DrivenMarkdownCMSASTPipelineMigrationCompatibility

    Migrated the blog system and routes of this project from file-based to database-driven, linked with ORM-ed queries. To provide consistent design for markdown contents, designed a custom content management system with data processing pipeline.

  13. 013

    Architecture

    Nov 2025

    Portfolio to Playground Reconstruction
    ADRArchitectureNext.jsRefactoring

    Redefined portfolio as playground, and migrated system from file-based dynamic routes to static routes with centralized configuration, following `cesium-utils` page's architectural pattern.