Inspiration

The idea for Frankenstein's Séance came from a simple observation: code review is often a solitary, mechanical process. We wondered - what if we could make it more engaging, educational, and fun?

The name "Frankenstein" perfectly captures our approach: stitching together seemingly incompatible technologies (5 frontend frameworks, 3 backend languages) into one cohesive creation. Like Dr. Frankenstein bringing life to his creation, we're bringing legendary programmers "back from the dead" to share their wisdom.

The "Aha!" Moment

The breakthrough came when we realized we could combine three powerful concepts:

  1. AI Personas - Using Amazon Bedrock to generate character-consistent responses from programming legends across different eras (1960s-2010s)
  2. Polyglot Analysis - Leveraging language-specific tools (Python AST, Babel, Rust Syn) for deep, accurate insights
  3. Micro-Frontend Architecture - Demonstrating real-world patterns by integrating 5 frameworks as Web Components

The result? A code review experience that's both technically sophisticated and genuinely entertaining.

Project Overview (What it does)

Frankenstein's Séance is a polyglot code analysis platform that brings legendary programmers back from the dead to review your code. It combines:

  • 5 Frontend Frameworks (React, Vue, Svelte, Angular, Solid.js) as Web Components
  • 3 Backend Languages (Python, Node.js, Rust) for polyglot analysis
  • AI-Powered Personas via Amazon Bedrock (Claude 3 Sonnet)
  • Real-Time Updates via WebSocket
  • Serverless Architecture on AWS

Architecture Highlights (How we built it)

Frontend: Micro-Frontend Showcase

React 18 Shell Application
├── Vue 3 Header (Theme switching, navigation)
├── Svelte 4 Uploader (Drag-and-drop file upload)
├── Angular 17 Personas (Persona response cards)
└── Solid.js Results (Final synthesis panel)

Why This Matters: Demonstrates real-world micro-frontend architecture where different teams can use different frameworks, all integrated via Web Components.

Backend: Event-Driven Serverless

User Request → API Gateway → Lambda Handler → SNS Topic
                                                  ↓
                                            Orchestrator Lambda
                                                  ↓
                    ┌─────────────────────────────┼─────────────────────────────┐
                    ↓                             ↓                             ↓
              Amazon Bedrock              ECS Polyglot Services            WebSocket API
              (5 AI Personas)             (Python/Node/Rust)              (Real-time Updates)

Why This Matters: Async processing allows immediate API response while long-running analysis happens in the background. Users get real-time progress updates via WebSocket.

AI Integration: Persona Generation

Claude 3 Sonnet generates responses from:
1. Grace Hopper (1960s COBOL era) - Debugging & clarity
2. Dennis Ritchie (1970s C/Unix era) - Simplicity & efficiency
3. Bjarne Stroustrup (1980s C++ era) - OOP & abstractions
4. Guido van Rossum (1990s Python era) - Readability
5. Graydon Hoare (2010s Rust era) - Memory safety

Final Synthesis: Combines all perspectives into actionable recommendations

Why This Matters: Each persona provides era-appropriate advice, creating an engaging and educational code review experience.

Polyglot Analysis: Language-Specific Insights

Python Service (FastAPI)
├── AST parsing with Python's ast module
├── PEP 8 style checking
└── Type hint validation

Node.js Service (Express)
├── Babel AST parsing
├── ESLint rule checking
└── Security vulnerability scanning

Rust Service (Axum)
├── Syn parser for Rust syntax
├── Memory safety analysis
└── Ownership pattern detection

Why This Matters: Each service uses native language tools for deep, accurate analysis that generic tools can't provide.

Key Technical Achievements

1. Micro-Frontend Architecture

  • 5 frameworks working together seamlessly
  • Web Components for framework-agnostic integration
  • Independent deployment of each component
  • Stitching effects between components for cohesive UX

2. Serverless Event-Driven Design

  • Async processing via SNS/Lambda
  • WebSocket for real-time updates
  • Dead Letter Queue for failure handling
  • 15-minute timeout for complex analyses

3. AI-Powered Code Review

  • Amazon Bedrock integration
  • Character-consistent persona responses
  • Context-aware analysis
  • Synthesis of multiple perspectives

4. Polyglot Microservices

  • 3 languages (Python, Node.js, Rust)
  • ECS Fargate for containerized services
  • Application Load Balancer for routing
  • Language detection for graceful degradation

5. Real-Time Communication

  • WebSocket API Gateway
  • Progressive result display
  • 8 message types for different events
  • Connection management in Lambda

6. Data Persistence

  • RDS PostgreSQL for relational data
  • S3 for code uploads
  • Secrets Manager for credentials
  • Encryption at rest and in transit

User Experience Flow

  1. Upload Code: Drag-and-drop or paste code (Svelte component)
  2. Immediate Response: Get analysis ID instantly
  3. Real-Time Updates: Watch personas respond one by one (Angular component)
  4. Polyglot Insights: See language-specific analysis results
  5. Final Synthesis: Get actionable recommendations (Solid.js component)
  6. History: Review past analyses

Technology Stack

Frontend

  • React 18, Vue 3, Svelte 4, Angular 17, Solid.js
  • TypeScript, Vite, Web Components

Backend

  • AWS Lambda (Node.js 20)
  • Python 3.11 (FastAPI)
  • Node.js 20 (Express)
  • Rust 1.70+ (Axum)

Infrastructure

  • AWS CDK v2 (TypeScript)
  • API Gateway (REST + WebSocket)
  • ECS Fargate
  • RDS PostgreSQL
  • S3, CloudFront
  • SNS, SQS
  • Amazon Bedrock
  • CloudWatch, X-Ray

Kiro Integration

How Kiro Helped Build This

  1. Spec-Driven Development: Used Kiro specs to plan and track 35+ tasks
  2. Multi-Framework Expertise: Kiro provided conventions for all 5 frameworks
  3. AWS Best Practices: Kiro guided CDK implementation and AWS service selection
  4. Debugging: Kiro helped diagnose and fix complex issues (WebSocket, database schema, etc.)
  5. Documentation: Kiro generated comprehensive docs throughout development

Kiro Features Demonstrated

  • Steering Rules: Framework-specific conventions (React, Vue, Svelte, Angular, Solid.js, Rust, Python, Node.js, AWS CDK)
  • Spec System: Structured task breakdown and tracking
  • Context Management: Maintained context across 100+ files
  • Code Generation: Generated boilerplate for all components
  • Testing: Created integration tests and test scripts

Innovation Highlights

1. Micro-Frontend Mastery

First project to integrate 5 different frameworks as Web Components in a production-ready application.

2. AI Persona System

Unique approach to code review using historical programmer personas with era-appropriate advice.

3. Polyglot Analysis

3 language-specific services providing deep insights that generic tools can't match.

4. Real-Time Architecture

WebSocket-driven progressive result display for engaging user experience.

5. Serverless Event-Driven

Fully serverless architecture demonstrating AWS best practices.

What we learned

This project demonstrates:

  • Micro-frontend architecture at scale
  • Serverless event-driven design patterns
  • AI integration with Amazon Bedrock
  • Real-time communication with WebSockets
  • Polyglot microservices architecture
  • AWS best practices and CDK usage
  • Full-stack development across multiple technologies

Accomplishments that we're proud of

  1. Technical Complexity: Integrates 5 frontend frameworks, 3 backend languages, AI, and real-time communication
  2. Real-World Applicability: Demonstrates patterns used in production micro-frontend applications
  3. Innovation: Unique AI persona system for code review
  4. Completeness: Fully deployed, tested, and documented
  5. Kiro Showcase: Demonstrates how Kiro accelerates complex multi-technology projects

Challenges we ran into

1. Micro-Frontend Integration

Challenge: Making 5 different frameworks (React, Vue, Svelte, Angular, Solid.js) work together seamlessly.

Solution:

  • Used Web Components as the integration layer
  • Created framework-specific build configurations
  • Implemented custom event communication
  • Added visual "stitching" effects to tie components together

Learning: Web Components are powerful but require careful attention to property binding, event handling, and lifecycle management across frameworks.

2. WebSocket Real-Time Updates

Challenge: Coordinating real-time updates across async Lambda execution, SNS topics, and WebSocket connections.

Solution:

  • Implemented connection management in DynamoDB
  • Created 8 distinct message types for different events
  • Added progressive result display in the UI
  • Built retry logic and error handling

Learning: Real-time systems require careful state management and robust error handling at every layer.

3. Polyglot Service Coordination

Challenge: Running Python, Node.js, and Rust services on ECS Fargate with proper language detection and error handling.

Solution:

  • Implemented language detection to gracefully skip incompatible code
  • Added comprehensive logging for debugging
  • Used Application Load Balancer for routing
  • Built health checks for each service

Learning: Polyglot systems need graceful degradation - one service failure shouldn't break the entire analysis.

4. AI Persona Consistency

Challenge: Generating character-consistent responses from historical programmers across multiple API calls.

Solution:

  • Crafted detailed persona prompts with speaking styles and technical focus
  • Included era-appropriate references and philosophies
  • Used Claude 3 Sonnet for high-quality, context-aware responses
  • Implemented synthesis step to combine perspectives

Learning: Good AI results require good prompts - detailed persona definitions make all the difference.

5. Async Processing Architecture

Challenge: Handling long-running analysis (30-60 seconds) without blocking the API.

Solution:

  • Implemented SNS/SQS async processing
  • Added Dead Letter Queue for failure handling
  • Used 15-minute Lambda timeout for orchestrator
  • Provided immediate API response with analysis ID

Learning: Async architectures improve user experience but add complexity in state management and error handling.

6. Database Schema Evolution

Challenge: Discovered UUID vs TEXT mismatch in database schema during integration testing.

Solution:

  • Created migration scripts
  • Implemented database client library
  • Added comprehensive error handling
  • Built test scripts to verify schema

Learning: Database migrations are critical - test early and often with real data.

7. Deployment Complexity

Challenge: Deploying 15+ services, 6 Lambda functions, and 5 frontend components.

Solution:

  • Used AWS CDK for infrastructure as code
  • Created deployment automation scripts
  • Built integration test suite
  • Documented deployment process thoroughly

Learning: Good documentation and automation are essential for complex deployments.

What's next for Frankenstein's Séance

Phase 1: Enhanced Analysis

  • More Languages: Add support for Go, Java, C#, TypeScript
  • More Personas: Include Ada Lovelace, Alan Turing, Linus Torvalds
  • Deeper Analysis: Integrate more static analysis tools (SonarQube, CodeQL)
  • Custom Personas: Allow users to create their own reviewer personas

Phase 2: Collaboration Features

  • Team Workspaces: Share analyses within teams
  • Code Diff Analysis: Compare versions and track improvements
  • Integration: GitHub/GitLab PR integration
  • Notifications: Email/Slack notifications for completed analyses

Phase 3: Learning Platform

  • Educational Mode: Detailed explanations of issues
  • Code Challenges: Practice fixing common problems
  • Progress Tracking: Track improvement over time
  • Certifications: Earn badges for code quality milestones

Phase 4: Enterprise Features

  • Custom Rules: Define organization-specific coding standards
  • Compliance Checking: OWASP, PCI-DSS, HIPAA compliance
  • Analytics Dashboard: Team-wide code quality metrics
  • SSO Integration: Enterprise authentication
  • On-Premise Deployment: Self-hosted option

Phase 5: AI Evolution

  • Fine-Tuned Models: Train on organization's codebase
  • Automated Fixes: AI-generated code improvements
  • Predictive Analysis: Identify potential issues before they occur

- Natural Language: Describe desired changes in plain English

Built with Kiro for the Kiro Hackathon

Frankenstein's Séance: Where legendary programmers rise from the dead to review your code.

Built With

Share this project:

Updates

Submission history