Portfolio

Projects with a production mindset.

A growing collection of applications built with an emphasis on clarity, reliability, and the details that matter after launch.

Live / Tested

Chromaflow

An interactive Water Sort solver pairing mobile-first puzzle entry and responsive replay controls with an A* search engine, backed by automated logic and cross-browser tests.

JavaScriptSemantic HTMLModern CSSNode.jsPlaywrightGitHub ActionsVercel

Project documentation

Selected sections, refreshed from GitHub every five minutes.

RoadmapPROJECT_ROADMAP.md

Current Status

  • Project maturity: Portfolio-ready
  • Actively developed: Yes
  • Last reviewed: 2026-07-30

Known Limitations

Screenshot recognition supports a calibrated visual style

  • Area: Input
  • Severity: Medium
  • User impact: Screenshots using the calibrated straight, light-outlined bottle artwork can be imported at varying resolutions, while games with substantially different bottle shapes or color palettes may not be recognized.
  • Technical impact: The local detector derives geometry from connected bottle outlines and uses calibrated color profiles rather than a general-purpose computer-vision model.
  • Current workaround: Review and correct every detected layer in the editable builder, or recreate unsupported screenshots manually with either fill mode.
  • Suggested resolution: Add opt-in crop guidance and additional tested bottle and color profiles as representative screenshots become available.
  • Status: Known

Puzzle capacity remains fixed

  • Area: Solver
  • Severity: Low
  • User impact: Variants with a capacity other than four or a color count that does not equal the bottle count minus two cannot be represented.
  • Technical impact: Capacity remains fixed at four layers, and configuration derives the selected-color count from the standard two-spare-bottle level shape even though every bottle is editable during entry.
  • Current workaround: Use Chromaflow with standard four-layer Water Sort levels.
  • Suggested resolution: Make capacity and the color-to-bottle relationship configurable only if real target games require those variants.
  • Status: Known
View the complete file on GitHub
UpdatesPROJECT_UPDATES.md

Latest Stable State

  • Last updated: 2026-07-30
  • Current version: 1.0.0
  • Current status: Active
  • Primary branch: main
  • Production URL: https://chromaflow.dimgianno.com/
  • Staging URL: Not deployed

Current Project Summary

Chromaflow is a browser application for importing, recreating, and solving fresh or partially completed Water Sort puzzles. Users can load a solvable known level from MongoDB, recognize supported screenshots locally, configure levels with up to 14 bottles, correct colors through layer-first or color-first mobile workflows, validate the current bottle state, solve it with an A* search engine, and replay every move. The production application can be installed and caches its solver, screenshot recognizer, and interface for reliable offline use. The project uses semantic HTML, responsive CSS, and framework-free JavaScript and TypeScript modules bundled with Vite, with a read-only Vercel Function providing protected MongoDB access; Playwright is used for browser testing.

Latest Updates

2026-07-30 - Reliable shared-link restoration after updates

  • Type: Fix
  • Status: Ready for review
  • Summary: Prevented an older installed application shell from silently ignoring newly shared puzzle URLs.
  • User impact: After this release reaches a browser, opening a shared puzzle while online checks for the current Chromaflow interface, while offline reloads continue using the cached application. A browser still controlled by a pre-fix worker requires a one-time full close and hard refresh or site-data clear.
  • Technical impact: Changed generated service-worker navigations from cache-first to network-first with an application-shell fallback, preserved cache-first immutable assets and the existing non-disruptive update lifecycle, and added focused generation plus online/offline navigation coverage.
  • Related area: Puzzle sharing, offline reliability, and application updates

2026-07-30 - Shareable puzzle URLs

  • Type: Capability
  • Status: Ready for review
  • Summary: Added addressable puzzle state through compact URLs that can be copied, shared, or bookmarked.
  • User impact: Users can share any valid configured puzzle with one action, and opening the link restores the editable level automatically with clear feedback if the link is invalid.
  • Technical impact: Reused the validated compact puzzle codec through a Base64URL p query parameter, preserved unrelated query parameters, limited payloads to 4–14 bottles and at most 39 URL-safe characters, retained atomic import behavior, and added focused unit and cross-browser coverage.
  • Related area: Puzzle sharing, application state, and import validation

2026-07-29 - Searchable large level library

  • Type: Improvement
  • Status: Ready for review
  • Summary: Replaced the known-level dropdown with exact level-number search and a scalable browser for the complete MongoDB catalog.
  • User impact: Users can import a known level directly by number or browse tens of thousands of levels without navigating an oversized native dropdown; the browser supports local prefix filtering and clear 50-result pages.
  • Technical impact: Removed the 1,000-record database query cap, indexed the downloaded compact catalog by level number in browser memory, limited rendered dialog results to one page, preserved the existing validated puzzle-code import path and unavailable-library fallback, and added focused unit and cross-browser coverage.
  • Related area: Puzzle onboarding, catalog scalability, and MongoDB integration
View the complete file on GitHub

Live / Polished

Call Center Frontend

A responsive call-center dashboard with filtering, pagination, active/archived views, call details, notes, loading/error states, and production/staging deployments.

ReactViteTypeScriptCSSVercel

Project documentation

Selected sections, refreshed from GitHub every five minutes.

RoadmapPROJECT_ROADMAP.md

Current Status

  • Project maturity: Production-ready
  • Actively developed: Yes
  • Last reviewed: 2026-07-24

Known Limitations

Large call histories are loaded into browser memory

  • Area: Performance
  • Severity: High
  • User impact: Initial loading and feed interactions may become slower as an account's active and archived call history grows.
  • Technical impact: The frontend fetches every backend page for both archive states, then performs search, filtering, sorting, grouping, and visible-page pagination in the browser.
  • Current workaround: Backend requests are fetched in pages of 50 and independent pages are requested concurrently.
  • Suggested resolution: Move supported search, filters, sorting, and pagination to backend queries and retain only the current result window in client state.
  • Status: Known

Forgot-password feedback reveals registered accounts

  • Area: Security
  • Severity: Medium
  • User impact: Anyone can distinguish registered from unregistered email addresses through the recovery form.
  • Technical impact: The frontend displays the backend's explicit 404 response for unknown accounts to provide actionable feedback.
  • Current workaround: The backend avoids generating reset tokens or sending email for unknown accounts and applies a resend cooldown to known accounts.
  • Suggested resolution: Reassess generic responses if account privacy becomes the priority, or add backend abuse controls such as route-sensitive rate limiting.
  • Status: Known

Next Features

Server-driven call search, filtering, and sorting

  • Priority: High
  • Status: Idea
  • Value: Keeps the dashboard responsive and reduces data transfer for users with large call histories.
  • Scope: Send search, filter, sort, page-size, and cursor inputs to the backend and render one result window at a time.
  • Dependencies: Backend query support, stable pagination metadata, and agreed filter semantics
  • Complexity: Large
  • Portfolio relevance: Demonstrates scalable data fetching, URL/query-state design, caching decisions, and coordinated frontend-backend contracts.

Edit individual notes

  • Priority: High
  • Status: Idea
  • Value: Lets users correct call notes without deleting and recreating them.
  • Scope: Add an edit action, modal or inline form, optimistic update and rollback behavior, realtime refresh handling, and automated coverage.
  • Dependencies: A backend note-update endpoint and documented audit behavior
  • Complexity: Medium
  • Portfolio relevance: Extends the optimistic state model with precise embedded-record mutations and conflict-aware user feedback.
View the complete file on GitHub
UpdatesPROJECT_UPDATES.md

Latest Stable State

Current Project Summary

Call Center Dashboard is a React and TypeScript frontend for authenticated users to review and manage call-center records from a responsive web interface. It combines cookie-based sessions, call search and filtering, optimistic mutations, realtime account-scoped refreshes, email verification, password recovery, and a guided onboarding flow. Verified platform administrators also receive a dedicated responsive console for account security, orphaned-call cleanup, auditing, and email-confirmed user deletion. The application is tested with Vitest, React Testing Library, and Playwright, built with Vite, and deployed through Vercel with a same-origin backend proxy.

Latest Updates

2026-07-24 - Platform admin console

  • Type: Feature
  • Status: Completed
  • Summary: Added the responsive Overview, Users, Orphaned Calls, Audit Log, and secure deletion-confirmation experiences.
  • User impact: Verified administrators can manage account security and data integrity from one protected interface without gaining access to call phone numbers or notes.
  • Technical impact: Added admin route guards, typed API integration, responsive tables and controls, two-step deletion UI, account-drawer navigation, and focused component coverage.
  • Related area: Administration

2026-07-22 - Frontend tooling refresh

  • Type: Maintenance
  • Status: Completed
  • Summary: Updated safe same-major frontend build and lint tooling on main.
  • User impact: No behavior changes; the dashboard keeps the same auth, call-management, realtime, tutorial, and deployment behavior.
  • Technical impact: Updated Vite, ESLint, Prettier, and TypeScript ESLint packages, with npm audit remaining clean. Node types remain aligned with the Node 24 runtime, and the TypeScript 7 compiler plus TypeScript 6 compatibility API setup remains unchanged.
  • Related area: Maintenance

2026-07-14 — Forgot-password error and completion states

  • Type: Fix
  • Status: Completed
  • Summary: Added account-aware forgot-password feedback to main.
  • User impact: Unknown emails keep users on the recovery form with a clear error, while the “Back to login” link appears only after a successful reset request.
  • Technical impact: Updated forgot-password success rendering and added integration coverage for both successful and unknown-account requests. The clearer response intentionally reveals whether an email address is registered.
  • Related area: Authentication
View the complete file on GitHub

Live / Polished

Call Center Backend API

A REST API for managing call-center data, including filtering, pagination, archiving, notes, deletion, validation, Swagger documentation, tests, CI/CD, and production/staging environments.

Node.jsExpressTypeScriptMongoDBJestSwagger/OpenAPIRenderGitHub Actions

Project documentation

Selected sections, refreshed from GitHub every five minutes.

RoadmapPROJECT_ROADMAP.md

Current Status

  • Project maturity: Production-ready
  • Actively developed: Yes
  • Last reviewed: 2026-07-24

Known Limitations

Realtime events are limited to one service instance

  • Area: Backend
  • Severity: High
  • User impact: Realtime call updates may not reach all of a user's connected clients if the API is scaled across multiple service instances.
  • Technical impact: SSE connections are held in process memory, so event delivery is not shared between instances and does not survive a process restart.
  • Current workaround: Run the backend as a single Render web service instance.
  • Suggested resolution: Publish call-change events through shared infrastructure such as Redis pub/sub and let each instance forward relevant events to its connected clients.
  • Status: Known

Public endpoints do not have general rate limiting

  • Area: Security
  • Severity: High
  • User impact: Automated or excessive requests could degrade service availability, abuse authentication and email-related endpoints, or enumerate registered email addresses through forgot-password responses.
  • Technical impact: The API returns 404 for unknown forgot-password emails and has targeted email resend cooldowns, but no repository-wide request throttling layer.
  • Current workaround: Email verification and password reset requests have configurable resend cooldowns; these reduce repeated email delivery but do not prevent unknown-email probing.
  • Suggested resolution: Add route-sensitive rate limits, with stricter policies for authentication, password recovery, and email delivery endpoints.
  • Status: Known

Next Features

Search calls by phone number or note content

  • Priority: High
  • Status: Idea
  • Value: Helps users locate relevant calls without manually paging through filtered lists.
  • Scope: Add account-scoped text search to the call-list endpoint, including validation, indexing, tests, and API documentation.
  • Dependencies: A documented search behavior and appropriate MongoDB indexes
  • Complexity: Medium
  • Portfolio relevance: Demonstrates query design, indexing, authorization-aware search, and performance-conscious API development.

Edit individual notes

  • Priority: High
  • Status: Idea
  • Value: Lets users correct outdated notes without deleting and recreating them.
  • Scope: Add an authenticated note update endpoint, validation, tests, and OpenAPI documentation.
  • Dependencies: A documented note-editing and audit policy
  • Complexity: Medium
  • Portfolio relevance: Extends the embedded-document model with precise mutation semantics and authorization coverage.
View the complete file on GitHub
UpdatesPROJECT_UPDATES.md

Latest Stable State

Current Project Summary

Call Center Backend is a TypeScript and Express API for call center users to manage their own call records, notes, archive state, and tutorial preferences. It provides cookie- and bearer-based authentication, email verification and password recovery, plus account-scoped realtime updates through Server-Sent Events. A role-protected administration API adds account security controls, orphaned-call cleanup, immutable auditing, and email-confirmed transactional user deletion. MongoDB provides persistent storage, while Swagger documentation, automated API tests, GitHub Actions, Docker, and Render deployments support development and delivery.

Latest Updates

2026-07-24 - Secure platform administration

  • Type: Feature
  • Status: Completed
  • Summary: Added role-protected administration APIs for user security, data-integrity review, auditing, and verified account deletion.
  • User impact: Verified administrators can suspend accounts, revoke credentials, resend verification, inspect metadata-only orphaned calls, clean up orphaned records, and delete a user only after browser and email confirmation.
  • Technical impact: Added user roles and statuses, admin middleware, audit and deletion-token collections, aggregate admin queries, a promotion command, transactional deletion, and dedicated API tests.
  • Related area: Security

2026-07-22 - Dependency security and tooling refresh

  • Type: Maintenance
  • Status: Completed
  • Summary: Updated safe same-major backend dependencies on master and cleared the npm audit report.
  • User impact: No behavior changes; the API keeps the same routes and authentication behavior while running on a refreshed dependency set.
  • Technical impact: Updated Mongoose, ESLint, Prettier, tsx, Supertest types, and TypeScript ESLint packages; resolved transitive body-parser, brace-expansion, and js-yaml advisories. Node types remain aligned with the Node 24 runtime, and the TypeScript 7 compiler plus TypeScript 6 compatibility API setup remains unchanged.
  • Related area: Maintenance

2026-07-14 — Forgot-password account validation

  • Type: Fix
  • Status: Completed
  • Summary: Added account-aware forgot-password responses to master.
  • User impact: Users who enter an unknown email receive a clear not-found message instead of being shown a successful reset request.
  • Technical impact: The password-reset service reports whether the normalized email belongs to an account, the endpoint returns 404 for unknown accounts, and API tests and OpenAPI guidance cover the new response. This intentionally exposes account existence in exchange for clearer recovery feedback.
  • Related area: Authentication
View the complete file on GitHub