gitkarthik/cicd-website

Purpose and Runtime

Asset Tracker is a React 18/TypeScript single-page application for tracking software asset deployments across environments and reading version release notes. It runs in the browser, is built and served by Vite, and requires Node.js 18+ for development/build workflows. Key runtime entry points are src/main.tsx, src/App.tsx, and index.html.

Application Composition

src/App.tsx is the application shell: it composes global state, visual styling, and the primary user-facing views. Shared application-level state is supplied through src/contexts/AppContext.tsx, creating a boundary between stateful orchestration and presentational components. Global and app-specific CSS live in src/styles/index.css and src/styles/App.css.

Primary User Flows

The deployment-monitoring flow renders environment/version status in src/components/DeploymentsTable.tsx; ordering logic is separated into src/utils/assetSorter.ts. The release-notes flow is represented by src/components/ReleaseNotesView.tsx. Navigation between these views is handled by src/components/TabNavigator.tsx, while src/components/PopupDialog.tsx provides a reusable modal/dialog interaction boundary.

State, Types, and Persistence

src/contexts/AppContext.tsx centralizes shared UI/application state, likely including selected views and loaded asset data. Domain contracts are consolidated in src/types/index.ts, allowing components and services to exchange typed asset, deployment, and release-note data. Persistent browser settings are isolated behind src/services/LocalStorageManager.ts, notably supporting retained user preferences such as theme selection.

Service and Data Boundary

src/services/APIClient.ts is the client-facing data-access boundary for assets, deployments, or release-note retrieval. This keeps React components independent of transport details and permits replacing mock data with a production backend. Development and test API behavior is provided through Mock Service Worker: src/mocks/browser.ts, src/mocks/handlers.ts, and src/mocks/data.ts; the worker script is served from public/mockServiceWorker.js.

Theme and Presentation

Theme behavior is encapsulated in src/services/ThemeManager.ts, with persistence delegated to the storage service and visual tokens implemented through CSS variables as described by the project. Component-local presentation is split alongside feature components, including src/components/DeploymentsTable.css, src/components/ReleaseNotesView.css, and src/components/TabNavigator.css.

Supporting Boundaries

Reusable hook exports are centralized at src/hooks/index.ts, providing an extension point for UI behavior without coupling it to components. Formatting remains outside rendering paths via src/utils/dateFormatter.ts. Configuration is isolated in src/config.ts, which is the expected location for environment-sensitive client settings such as API endpoints or feature/runtime options.