Content Tracking Web App With Server Side Pagination, React + Vite, Live on GitHub Pages.

EXP 011 produced a single unified auth backend on port 7002, EXP 012 connected the CRM, EXP 013 onboarded CV screening, and ContentOS acts as customer number four. The portal speaks to the exact same /api/login and /api/me endpoints. It isolates its session under a distinct content.token key in local storage and manages themes via content.theme, yet the token verification lifecycle remains completely identical.

Cross origin requests from the local Vite port 7011 required updating allowed origins in the backend environment. Because Docker compose only parses environment definitions during container recreation rather than standard restarts, the container required a full recreate cycle. Preflight checks were verified from two independent origins to ensure genuine access control. An empty bearer token immediately yields HTTP 401, confirming defensive fail closed authentication.

Data storage relies on a dedicated SQLite file content.db, isolated from CRM and user tables. Custom identifiers use the content-xxx format. Rather than endlessly incrementing indices, the generator inspects active keys and reuses the lowest vacant integer slot. If rows 001, 003, and 004 exist, a new record claims slot 002, keeping database references orderly and compact.

The search filter q was expanded to query six record fields simultaneously, including platform, format, and status tags alongside text bodies. Record updates initially crashed due to a missing query parameter in the SQL update statement. Adding the missing argument and pairing it with a mandatory link check solved the problem. Marking content as posted without providing a valid destination URL is rejected with HTTP 400 Bad Request across both client forms and server endpoints.

Rather than attempting to share or overwrite port 8443 used by miniLeads, ContentOS exposes its Node Express data API through a dedicated Tailscale Funnel on port 9443. This keeps external traffic pathways clean, predictable, and isolated per application service.

Container stability required transitioning from an Alpine base image to node:22-slim. The better-sqlite3 native driver crashed with segmentation faults (exit code 139) on Alpine due to missing prebuilt musl binaries. Adopting the Debian based slim image, a proven pattern from earlier projects, restored stability. Process restarts on the development host are strictly targeted by process identifier to prevent terminating neighbor backend runtimes.

Deploying a client rendered application on GitHub Pages while supporting local development requires a clean environment switch. The repository uses index.template.html as a single line toggle. In development mode, the file loads unbundled source code from src/main.jsx. For production release, the built bundle is compiled with public tunnel endpoints baked in, verified with automated grep checks.

Assets compiled to the dist directory are copied to the site root using documented rollback procedures to prevent accidental asset loss. A build audit also caught an invisible footer bug where custom Tailwind utility classes had been dropped during pruning, establishing a strict verification checklist before closing releases.

User interactions must deliver immediate visual clarity without degrading input ergonomics. Newly created or updated table rows trigger a 900ms soft accent highlight before returning to default borders. In earlier iterations, skeleton loaders unmounted active inputs during background data refreshes, causing user keystrokes to drop out of focus.

Decoupling background refresh cycles from active input fields and binding table row keys to persistent database identifiers resolved focus disruption. Accent tones were preserved per system requirements while eliminating sticky outline bugs, and button hover states received explicit contrast rules for flawless dark theme legibility.