Cesium Utils Page Architecture Overhaul

Situation

Original structure scattered components across global folders:

• Cesium viewer in global Zustand store
• Components mixed with other routes
• Duplicate folder names (app/cesium-utils + components/cesium)
• No clear feature boundaries
• Impossible to transplant to other projects

Requirement: Features must be portable between projects with the same framework. Each feature should be self-contained and transplantable without breaking other routes.

This requirement originated from the workplace.

Task

• Redefine variable scopes within the route
• Minimize dependencies from outside the route folder
• Centralize configuration

Action

1. Utilize Next.js private folder pattern

• Placed all related components under the route

2. Limited variable scopes

• Identified and restricted variables to the route by switching from Zustand to React context

3. Centralized configuration

• Listed all rendering configurations in a single file

Results

Duplicate folder names were eliminated by using the private folder pattern, increasing cohesion of related components per route. Switching from Zustand to React context minimized dependencies outside the route and ensured proper cleanup when the user navigates away. A single configuration source reduced maintenance burden and simplified adding new features. However, achieving copy-paste portability required some violation of the DRY principle.

The exact pattern was applied to the workplace for service portability.