Cross-Site Todo Management System

A demonstration of cross-site communication between React and Angular applications using window.postMessage API.

📋 Overview

This project showcases seamless data exchange between two different web applications running on separate ports:

• React App (Main Interface) - Todo list management and display
• Angular App (Popup Form) - Todo creation and editing form

🏗️ Architecture

┌─────────────────┐    window.postMessage    ┌──────────────────┐
│   React App     │ ◄─────────────────────► │   Angular App    │
│  (Port 5173)    │    Cross-Origin Comm    │   (Port 4200)    │
│                 │                          │                  │
│ • Todo Display  │                          │ • Form Creation  │
│ • List Management│                          │ • Data Validation│
│ • Click-to-Edit │                          │ • Submit Handler │
└─────────────────┘                          └──────────────────┘

🚀 Features

✨ Core Functionality

• Create Todos - Click "Create New Todo" to open Angular form
• Edit Todos - Click any existing todo to edit it
• Delete Todos - Individual delete buttons for each todo
• Priority System - Color-coded priority levels (High/Medium/Low)
• Timestamps - Creation and update tracking

🔧 Technical Features

• Cross-Origin Communication - Secure message passing between apps
• Window Management - Automatic popup handling and closure detection
• Data Validation - Form validation in Angular with error handling
• State Management - Persistent todo storage in React state
• Responsive Design - Clean, modern UI that works across devices

📁 Project Structure

Cross Site/
├── react-app/                 # Main React application
│   ├── src/
│   │   ├── App.jsx            # Main component with todo management
│   │   ├── App.css            # Styling for React app
│   │   └── main.jsx           # React entry point
│   ├── package.json           # React dependencies
│   └── vite.config.js         # Vite configuration
│
├── angular-app/               # Angular popup form
│   ├── src/
│   │   ├── app/
│   │   │   ├── app.component.ts    # Form component logic
│   │   │   ├── app.component.html  # Form template
│   │   │   └── app.component.css   # Form styling
│   │   └── main.ts            # Angular entry point
│   ├── package.json           # Angular dependencies
│   └── angular.json           # Angular configuration
│
└── README.md                  # This documentation

🛠️ Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• npm or yarn package manager

1. Install Dependencies

React App:

cd react-app
npm install

Angular App:

cd angular-app
npm install

2. Start Development Servers

Terminal 1 - React App:

cd react-app
npm run dev

Runs on: http://localhost:5173/

Terminal 2 - Angular App:

cd angular-app
ng serve --port 4200

Runs on: http://localhost:4200/

📖 How It Works

1. Cross-Site Communication Flow

sequenceDiagram
    participant User
    participant React
    participant Angular
    
    User->>React: Click "Create New Todo"
    React->>Angular: Opens popup window
    User->>Angular: Fill form and submit
    Angular->>React: Send data via postMessage
    React->>React: Update todo list
    Angular->>Angular: Close popup window

Loading

2. Data Exchange Protocol

Message Structure:

{
  type: 'TODO_DATA',           // Message type identifier
  data: {
    title: string,             // Todo title
    description: string,       // Todo description  
    priority: 'low'|'medium'|'high',  // Priority level
    isEdit: boolean,           // Creation vs Edit flag
    id?: number               // Todo ID (for edits)
  },
  source: 'angular-app'        // Source identification
}

Security Features:

• Origin verification (http://localhost:4200)
• Message type validation
• Data sanitization

3. Window Management

Popup Lifecycle:

1. Open - React opens Angular popup with window.open()
2. Monitor - Heartbeat system tracks window status
3. Communicate - Data exchange via postMessage
4. Close - Automatic cleanup and state updates

Closure Detection:

• Periodic window.closed checking
• User abandonment detection
• Proper cleanup and status messages

🎨 User Interface

React App (Main Interface)

• Clean Todo List - Organized display with hover effects
• Priority Indicators - Color-coded badges (🔴 High, 🟠 Medium, 🟢 Low)
• Timestamps - Creation and last updated times
• Interactive Elements - Click-to-edit with visual feedback

Angular App (Popup Form)

• Reactive Forms - Built-in validation and error handling
• Auto-fill Support - Pre-populated data for editing
• Clean Design - Focused form interface
• Responsive Layout - Works on different screen sizes

🔒 Security Considerations

Message Validation

// Origin verification
if (event.origin !== 'http://localhost:4200') return

// Message type validation
if (event.data?.type !== 'TODO_DATA') return

// Data structure validation
const { title, description, priority } = event.data.data
if (!title || !description || !priority) return

Best Practices Implemented

• ✅ Origin checking for all messages
• ✅ Data structure validation
• ✅ Error boundary handling
• ✅ Secure window management
• ✅ Input sanitization

🧪 Testing the Application

Basic Workflow Test

1. Open React app in browser (http://localhost:5173/)
2. Click "Create New Todo (Angular)" button
3. Fill out form in popup window
4. Click "Submit" - popup closes, data appears in React
5. Click on any existing todo to edit it
6. Use delete buttons to remove todos

Edge Cases Covered

• ✅ Popup window closed without submitting
• ✅ Invalid form data handling
• ✅ Network communication errors
• ✅ Duplicate window prevention
• ✅ Browser popup blockers

🚀 Deployment Considerations

Production Setup

• Update origin URLs for production domains
• Configure proper CORS policies
• Implement HTTPS for secure communication
• Add error logging and monitoring

Environment Variables

// Development
const ANGULAR_URL = 'http://localhost:4200'
const REACT_ORIGIN = 'http://localhost:5173'

// Production
const ANGULAR_URL = 'https://your-angular-app.com'
const REACT_ORIGIN = 'https://your-react-app.com'

📚 Technologies Used

React Application

• React 19 - Component framework
• Vite - Build tool and dev server
• Modern JavaScript - ES6+ features
• CSS3 - Modern styling with flexbox/grid

Angular Application

• Angular 20 - Framework
• Angular CLI - Build and dev tools
• Reactive Forms - Form handling
• TypeScript - Type-safe development

Communication

• PostMessage API - Cross-origin messaging
• Window API - Popup management
• Event Handling - Message processing

🤝 Contributing

This project serves as a reference implementation. To extend or modify:

1. Add New Message Types - Extend the communication protocol
2. Enhanced Validation - Add more form validation rules
3. Data Persistence - Add backend API integration
4. Authentication - Implement user authentication flow
5. Testing - Add unit and integration tests

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ using React and Angular by Armel Fogue