Michael Bruno

Modern SPA Development with AI-Assisted Tools

Evaluating AI tooling capabilities and framework translation patterns from a backend/cloud architect perspective. Demonstrates strategic technology evaluation and understanding of modern development workflows.

← Back to Projects

I. Development Workflow

Stage 1: Design Input (Angular Reference)

Existing Angular SPA with production folder structure, JWT authentication, and CRUD operations against tbl_products entity (ID, Name, Category, Price fields).

Stage 2: AI-Assisted Translation to React

Provided Angular screenshot to AI tool. Generated single-page React prototype with Bootstrap styling, component structure, state management, and mock data service - functional in under 30 minutes.

Outcome: Framework Pattern Validation

Demonstrated AI tools can rapidly translate CRUD patterns across frameworks while maintaining consistent user experience. Proves concept viability for strategic framework evaluation without manual reimplementation.

What AI Handled Well

  • Component architecture translation (navbar, form, table list with proper React patterns)
  • State management with hooks (useState, useEffect for data fetching and filtering)
  • Bootstrap CSS integration matching original Angular styling
  • CRUD operation logic (Create, Read, Update, Delete with proper data flow)
  • Mock data service pattern mimicking real API structure

What Required Human Decisions

  • Architecture choices (single-page vs. multi-component structure for prototype)
  • Scoping decisions (authentication excluded, focus on core CRUD patterns)
  • Data validation and error handling strategies
  • Integration approach for production scenarios (API contracts, auth patterns)
  • Strategic framework selection criteria beyond technical translation
Activity Traditional Approach AI-Assisted Approach Impact
Initial Prototype 4-8 hours 30 minutes 8-16x faster iteration
Component Structure Manual scaffolding and wiring Generated with proper patterns Immediate best practices
Framework Comparison Build multiple implementations Rapid translation for validation Enable strategic evaluation
Documentation Manual after implementation Generated alongside code Parallel delivery

II. AI Tool Assessment

Capability Assessment
Pattern Recognition Accurately identified CRUD patterns, navigation structure, and form/table relationships from Angular screenshot
Framework Translation Successfully converted Angular patterns to React equivalents (directives → hooks, services → state management)
Code Quality Generated production-ready patterns with proper separation of concerns and React best practices
Styling Consistency Maintained Bootstrap implementation matching original design aesthetic
Speed Prototype generation in minutes vs. hours for manual implementation
Area Limitation
Architectural Decisions Cannot determine business requirements or strategic technology choices without human context
Integration Patterns Requires guidance on API contracts, authentication flows, and backend integration approaches
Performance Optimization Generates functional code but may need human review for large-scale performance considerations
Security Decisions Implements patterns but cannot make context-specific security architecture choices
Business Logic Cannot infer complex validation rules or domain-specific requirements

Where AI Tools Provide Maximum Value

  • Rapid Prototyping: Quick proof-of-concept development to validate architectural approaches
  • Pattern Translation: Converting established patterns across technologies (Angular → React, .NET → Node.js)
  • Boilerplate Reduction: Eliminating repetitive scaffolding work while maintaining quality
  • Learning Acceleration: Exploring new frameworks with generated examples following best practices
  • Documentation: Generating technical documentation alongside implementation

Where Human Expertise Remains Critical

  • Strategic Technology Selection: Choosing frameworks based on team skills, project requirements, ecosystem maturity
  • Architecture Design: Determining system boundaries, integration patterns, scalability approaches
  • Security Architecture: Implementing auth flows, data protection, compliance requirements
  • Performance Engineering: Optimizing for specific workload characteristics and scale requirements
  • Quality Oversight: Code review, testing strategy, production readiness assessment

III. Framework Considerations

Framework Strengths Considerations Best For
React Largest ecosystem, flexible, strong community, AI tooling excellent More decisions required, JSX learning curve Greenfield projects, teams wanting flexibility
Angular Full framework, TypeScript native, enterprise patterns built-in Steeper learning curve, more opinionated Enterprise applications, .NET shop integration
Vue.js Gentle learning curve, excellent documentation, progressive adoption Smaller ecosystem than React, less enterprise adoption Incremental modernization, rapid development

.NET API Integration Patterns

All three frameworks integrate effectively with .NET backends through standard RESTful APIs. Key integration considerations:

Integration Aspect Implementation
API Communication Fetch API, Axios, or framework-specific HTTP clients work consistently across all frameworks
Authentication JWT token patterns identical; route guards/protected routes vary by framework
Real-Time Updates SignalR client libraries available for all three; integration patterns similar
TypeScript DTOs Can share type definitions between .NET and frontend; Angular has native advantage
Error Handling HTTP interceptors (Angular) vs. middleware patterns (React/Vue) - functionally equivalent

Strategic Selection Criteria

  • Team Experience: Existing skills and learning curve tolerance
  • Project Scope: Application complexity and long-term maintenance requirements
  • Backend Technology: .NET shops may prefer Angular for TypeScript alignment
  • Ecosystem Needs: Third-party component libraries and tooling availability
  • Performance Requirements: Initial load time, runtime performance, bundle size
  • Mobile Strategy: React Native integration for cross-platform mobile apps
  • Enterprise Support: Corporate backing, LTS versions, migration paths

AI tools democratize framework exploration by enabling rapid prototyping across technologies. Backend/cloud architects can validate integration patterns without becoming frontend specialists, making informed technology recommendations based on hands-on evaluation rather than theory.

Portfolio Value

This project demonstrates: