Skip to content
DHDorian
All projects
Local Full-Stack MVPActive developmentFull-stack platform

PawConnect

PawConnect is a multi-client dog-adoption and shelter-operations platform with a dedicated React adopter portal, a Blazor operational client, shared ASP.NET Core services, real-time communication, and explainable decision support.

Source

PawConnect is an active full-stack portfolio platform with a dedicated React adopter portal, an established Blazor operational application, shared ASP.NET Core services, SQL Server persistence, real-time communication, explainable decision support, automated tests, CI, and Docker-based local development.

Role
Product design and full-stack engineering
Scope
React public and adopter journeys, Blazor shelter operations, shared backend services, secure workflow integration, real-time communication, decision support, and platform administration
Status
Local full-stack MVP · Active development
Core stack
React · TypeScript · ASP.NET Core · Blazor · SQL Server

Product interface

Two focused clients over one shared platform.

A dedicated React adopter experience and the established Blazor operational application converge on the same ASP.NET Core services, authorization rules, and SQL Server data.

PawConnect React landing page showing a dog-focused hero, Browse Dogs and Adoption Copilot actions, three adopter workflow benefits, and recently listed dogs Alma, Archie, and Bella with complete photographs.

Product overview

Why this product exists.

PawConnect is a full-stack dog-adoption and shelter-operations platform built around one connected workflow: discovering a suitable dog, submitting an adoption request, communicating with the shelter, and supporting the operational work required to complete the process.

The platform uses two focused presentation layers. A React and TypeScript portal provides a modern public and adopter-facing experience for dog discovery, favorites, saved searches, applications, notifications, and Adoption Copilot. The established Blazor application continues to support Shelter, Volunteer, and Admin workflows, including adoption processing, care operations, analytics, intelligence, simulation, and platform management.

Both clients reuse the same ASP.NET Core backend, service-layer business rules, role and ownership checks, Entity Framework Core persistence, and SQL Server data. React does not connect directly to the database and does not duplicate PawConnect's domain rules in TypeScript.

Problem / motivation

Dog adoption extends beyond a public listing. PawConnect connects discovery and adopter-owned workflows to the shelter, volunteer, and administrative work required to review requests and care for dogs without collapsing role boundaries or duplicating business rules across clients.

Product experience

Key features.

  1. 01

    Dedicated React adopter experience

    Adds a focused React and TypeScript client for public discovery, profiles, favorites, saved searches, applications, notifications, and Adoption Copilot.

  2. 02

    Shared role-aware adoption workflows

    Connects adopter interactions to shared C# services that enforce public visibility, role, ownership, validation, and workflow rules.

  3. 03

    Blazor operations workspace

    Keeps Shelter, Volunteer, Admin, analytics, intelligence, simulation, and platform-management workflows in the established Blazor application.

  4. 04

    Persisted real-time communication

    Persists adoption-request conversations and synchronizes workflow updates through SignalR.

  5. 05

    Explainable guided matching

    Interprets adopter constraints against public-safe, backend-validated dog records and explains evidence and cautions around each suggestion.

  6. 06

    Operational intelligence and simulation

    Derives prioritized operational issues from persisted records and applies temporary scenarios to a shelter baseline without mutating operational data or presenting indicators as predictions.

Under the surface

Architecture and technical challenges.

Architecture

  • React 19, TypeScript, Vite, React Router, and TanStack Query provide a focused public and adopter presentation layer over versioned ASP.NET Core APIs
  • Blazor Server remains the complete operational client for Shelter, Volunteer, Admin, analytics, Operations Intelligence, and Scenario Simulator workflows
  • Both clients delegate to shared C# services that enforce validation, public visibility, role checks, ownership checks, and workflow transitions
  • ASP.NET Core Identity cookie authentication, antiforgery protection, generated OpenAPI contracts, and DTO boundaries secure and align the React client
  • Entity Framework Core and SQL Server provide one persisted source of truth, with SignalR, Docker Compose, automated tests, and GitHub Actions supporting the wider platform

Challenges

  • Modernizing public and adopter journeys without replacing the Blazor operational application or duplicating domain rules in TypeScript
  • Keeping Identity cookie authentication, credentialed SPA requests, antiforgery tokens, and backend role boundaries aligned
  • Keeping generated TypeScript contracts synchronized with C# DTOs and normalizing API errors without weakening backend validation
  • Keeping natural-language discovery grounded in backend-validated candidates, explicit evidence, and conservative compatibility language
  • Projecting operational changes from a persisted baseline without mutating live records or presenting indicators as predictions

Technology stack

React 19TypeScript 5Vite 8React Router 7TanStack Query 5Tailwind CSS 4React Hook FormZodLucide Reactopenapi-typescriptVitestReact Testing LibraryC#.NET 10ASP.NET CoreBlazor ServerEntity Framework CoreSQL ServerASP.NET Core IdentitySignalRSwagger / OpenAPIPlaywrightDockerDocker ComposeGitHub Actions

Technical implementation

Architecture and API

Generated contracts over a shared API

The React client generates TypeScript types from PawConnect's Swagger/OpenAPI contract. Its shared API wrapper includes credentials, obtains antiforgery tokens for unsafe requests, normalizes errors, and handles unauthorized-session events.

PawConnect Swagger interface showing the shared Public API, Admin endpoints, AdopterPortalAuth antiforgery, login, current-user and logout endpoints, and AdopterProfile operations.
Generated OpenAPI contracts keep the React client aligned with ASP.NET Core DTOs while the shared API wrapper handles credentials and antiforgery.

Delivery status

What exists today.

Implemented

  • Dedicated React portal for public discovery, profiles, favorites, saved searches, applications, notifications, Adoption Copilot, and responsive adopter flows
  • Generated OpenAPI contracts, Identity cookie authentication, antiforgery, protected routes, TanStack Query server state, and shared backend role and ownership enforcement
  • Blazor Shelter, Volunteer, Admin, analytics, Operations Intelligence, Scenario Simulator, and persisted SignalR workflows over the same SQL Server data
  • Vitest, React Testing Library, .NET tests, focused Playwright flows, GitHub Actions, and Docker Compose local development

Partial

  • The React client intentionally covers public and adopter workflows; registration and password recovery remain in the main Identity UI, while operational roles remain in Blazor.
  • Local file storage, email, reports, and background processing are implemented for development; production providers, hosting hardening, and operational ownership remain unconfigured.

Experimental

  • Optional model-assisted discovery and semantic retrieval remain experimental; displayed candidates continue to pass backend validation.

Planned

  • Production deployment, cloud object storage, provider-backed delivery configuration, and broader accessibility, integration, and scale validation

React + TypeScript client

Dedicated React adopter experience

I added a focused React and TypeScript portal to modernize PawConnect's public and adopter-facing journeys without replacing the established Blazor operational application. The portal consumes the existing ASP.NET Core APIs, uses generated OpenAPI contracts, authenticates through the existing ASP.NET Core Identity cookie, and delegates authorization and workflow rules to the same C# service layer used by Blazor.

TanStack Query manages server state, caching, cancellation, invalidation, and mutation refreshes, while React Hook Form and Zod handle local form state and validation. The result is an incremental frontend modernization: public discovery and protected adopter workflows gain a focused client while PawConnect retains one backend source of truth for data, permissions, and domain behavior.

Multi-client architecture

One backend, two focused presentation layers.

React and Blazor serve different audiences, but neither owns PawConnect's business rules or data. Both presentation layers converge on backend-enforced services and one persisted model.

React Adopter Portal

Public and adopter-facing experience

  • Public discovery
  • Dog profiles
  • Favorites
  • Saved searches
  • Applications
  • Notifications
  • Adoption Copilot

Blazor Application

Established operational experience

  • Shelter operations
  • Volunteer workflows
  • Admin workflows
  • Analytics
  • Operations Intelligence
  • Scenario Simulator
  1. Shared layer 01

    ASP.NET Core REST API

    • DTOs
    • Identity cookie
    • Antiforgery
    • Generated OpenAPI contracts
  2. Shared layer 02

    Shared C# service layer

    • Validation
    • Public visibility
    • Role checks
    • Ownership checks
    • Workflow rules
  3. Shared layer 03

    Entity Framework Core + SQL Server

    • Shared persisted data
    • One domain source of truth

React engineering highlights

  • Added a focused React and TypeScript presentation layer over PawConnect's existing ASP.NET Core service architecture without duplicating domain rules.
  • Generated TypeScript API contracts from Swagger/OpenAPI to reduce drift between C# DTOs and frontend models.
  • Integrated secure ASP.NET Core Identity cookie authentication with credentialed requests and antiforgery protection for state-changing SPA operations.
  • Used TanStack Query for server-state caching, cancellation, invalidation, and mutation refreshes across favorites, saved searches, applications, notifications, and discovery.
  • Added focused Vitest, React Testing Library, and Playwright coverage for public discovery, route protection, authentication, image fallback, and critical adopter flows.

Surface 01

A focused public entry point

The portal introduces PawConnect around the adopter's first decision: finding a dog that fits their real living situation. The landing page uses live public-safe records and directs visitors into discovery or Adoption Copilot without exposing operational shelter complexity.

PawConnect React landing page showing a dog-focused hero, Browse Dogs and Adoption Copilot actions, three adopter workflow benefits, and recently listed dogs Alma, Archie, and Bella with complete photographs.
A focused React entry point for discovering adoptable dogs through real PawConnect data.

Surface 02

Server-backed discovery

Filtering and pagination are handled by the backend rather than by downloading every dog into the browser. Active criteria remain visible as removable chips and are synchronized to the URL so filtered views can be refreshed and shared.

PawConnect React dog-discovery page showing active Medium-size and Cluj-Napoca filters, result count, sorting controls, and complete cards for Alma, Archie, and Bella with photographs and statuses.
Server-side discovery keeps filters, sorting, pagination, and URL state synchronized.

Surface 03

Practical compatibility context

The detail page brings together public-safe dog, shelter, behavior, care, and compatibility information before the adopter starts an application. React renders the same backend DTOs and visibility rules used elsewhere in PawConnect.

PawConnect React profile for Bella showing a large Labrador photograph, Reserved status, shelter, size, coat, activity level, apartment suitability, behavior description, compatibility notes, Start Application, and Save Dog actions.
Public-safe dog details combine imagery, breed, shelter, care, and compatibility information in one responsive view.

Surface 04

Explainable natural-language discovery

Adoption Copilot calls the real PawConnect backend and returns only public-safe dog records. This captured result uses the rules-based explanation mode; its criteria, cautions, and heuristic scores support discovery but do not predict compatibility or make an adoption decision.

PawConnect React Adoption Copilot showing a calm apartment-friendly dog request and ranked recommendations for Bella, Nala, and Archie with match percentages, statuses, evidence chips, cautions, and View Details actions.
Adoption Copilot translates natural-language preferences into explainable matches from eligible PawConnect dogs.

Surface 05

A real request before submission

The React portal continues beyond discovery into the real PawConnect adoption workflow. The review step presents the current request data before submission while the backend remains responsible for validation, ownership, and workflow rules.

PawConnect React adoption-request review for Archie showing the dog summary, two-step application flow, reason for adoption, time alone, visit preference, additional information, Edit Answers, and Submit Application actions.
Adopters review their real application data before sending the request to the shelter.

Surface 06

Ownership-protected application tracking

Applications remain accessible only to their owner. The interface exposes current status and permitted actions while backend ownership and cancellation rules remain authoritative.

Application tracking

PawConnect React applications page showing Archie and Bella requests with dog photographs, shelters, Pending and Visit Confirmed states, visit information, dates, and View Application actions.
Owned application tracking keeps dog context, visit state, and permitted actions tied to the adopter account.

Account-tied updates

PawConnect React notifications page showing grouped updates for Bella and Archie applications, a confirmed visit, saved-search matches, read states, timestamps, and Mark All Read controls.
Grouped notifications keep adoption updates and saved-search matches connected to one protected account.

Surface 07

A persistent adopter shortlist

Favorites persist through the real PawConnect API and SQL Server data. Mutations refresh the TanStack Query cache so discovery, details, and saved collections remain consistent.

PawConnect React favorites page showing complete cards for Archie, Bella, and Mira with photographs, shelters, adoption statuses, profile details, and Saved indicators.
Database-backed favorites preserve a focused shortlist across authenticated sessions.

Surface 08

Responsive discovery behavior

The mobile experience uses compact navigation and filter disclosure instead of simply shrinking the desktop layout. Its filtering and public-data behavior remains consistent with the desktop client.

Mobile PawConnect React discovery page at a narrow viewport showing the compact header, Filters action, active Medium and Available chips, a complete Alma dog card, and the beginning of the next result.
The same server-backed discovery flow adapts to mobile navigation and compact filter controls.

Blazor operational client

The established Blazor application remains PawConnect's complete operational workspace for Shelter, Volunteer, and Admin roles, including adoption processing, analytics, explainable priorities, and isolated scenario planning.

Surface 01

Connected shelter workflow

Shelter staff receive an operational view of their own records. The dashboard combines capacity, requests, care work, resources, volunteer coverage, activity, and safe next actions without exposing data owned by other shelters.

Shelter dashboard

PawConnect shelter dashboard for PawHaven Rescue Center showing 34 dogs in care, 81 percent capacity, active adoption requests, medical follow-ups, volunteer tasks, low-stock items, next-best actions, and recent shelter activity.

Adoption pipeline

PawConnect adoption pipeline showing Pending, Visit Confirmed, Accepted, and Rejected or Cancelled columns with dog images, applicant details, preferred visits, workflow statuses, and available actions.

Surface 02

Explainable operational intelligence

The Intelligence Hub derives prioritized issues from real PawConnect records. Each item exposes what happened, why it matters, which trigger produced the insight, how it can be resolved, and what action is safe to take next.

Operations Intelligence

PawConnect Operations Intelligence page showing critical and high-priority shelter issues, an overdue Luna adoption application, an urgent Iris transfer request, priority scores, filters, and an explainable detail panel.

Scenario Simulator

PawConnect Scenario Simulator showing a sudden intake surge with additional dogs, unavailable volunteers, new applications, notification failures, and projected changes to capacity, workload, coverage, and reliability.

Surface 03

Platform oversight

Admin analytics aggregate platform-level adoption, shelter, resource, reporting, and discovery activity. The charts are driven by persisted records and provide oversight without replacing the underlying operational workflows.

PawConnect Advanced Analytics page showing seven-day shelter metrics, submitted requests, available dogs, low-stock resources, reports, Copilot sessions, adoption-funnel conversion, and request trends.

Honest edges

Limitations and what comes next.

Current scope

  • The React portal intentionally focuses on public and adopter-facing workflows, while Shelter, Volunteer, and Admin operations remain in Blazor.
  • Registration and password recovery continue through the main ASP.NET Core Identity pages rather than being duplicated in React.
  • OpenAI remains optional, and Copilot results support discovery rather than guarantee compatibility or make adoption decisions; the local rules-based path remains available.
  • The project is presented as a portfolio platform rather than a live production service used by real shelters. Production hosting, object storage, delivery providers, observability, backup, and operational ownership remain unconfigured.
  • Broader accessibility, integration, scale, and role-by-role workflow validation remain active development work.

Future improvements

  • Continue React accessibility, responsive, authentication, and critical adopter-flow validation alongside the Blazor operational client
  • Define production hosting, secrets, delivery providers, observability, and cloud object storage before making deployment claims
  • Expand role-scoped and operational scenarios only when they remain explainable, isolated, and grounded in persisted data