{"id":28854950,"url":"https://github.com/yogain123/mfe-project","last_synced_at":"2026-05-04T23:34:38.842Z","repository":{"id":298488684,"uuid":"1000010408","full_name":"yogain123/mfe-project","owner":"yogain123","description":"This project covers everything you need to understand Micro Frontend architecture in a production environment.","archived":false,"fork":false,"pushed_at":"2025-06-18T11:59:40.000Z","size":413,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-18T12:43:27.732Z","etag":null,"topics":["javascript","mfe","modulefederation","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yogain123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-11T06:14:34.000Z","updated_at":"2025-06-18T11:59:43.000Z","dependencies_parsed_at":"2025-06-11T11:41:42.801Z","dependency_job_id":"5f6d9c11-0749-4baa-82d1-a8781a0b7411","html_url":"https://github.com/yogain123/mfe-project","commit_stats":null,"previous_names":["yogain123/mfe-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yogain123/mfe-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yogain123%2Fmfe-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yogain123%2Fmfe-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yogain123%2Fmfe-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yogain123%2Fmfe-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yogain123","download_url":"https://codeload.github.com/yogain123/mfe-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yogain123%2Fmfe-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32628835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mfe","modulefederation","react","webpack"],"created_at":"2025-06-19T23:01:27.771Z","updated_at":"2026-05-04T23:34:38.836Z","avatar_url":"https://github.com/yogain123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Micro Frontend Architecture Learning Project\n\n## 🎯 Overview\n\nThis project demonstrates a complete **Micro Frontend (MFE) architecture** using **Webpack Module Federation** with React 17. It's designed to teach you everything from basic concepts to advanced production-ready patterns, including AI-powered chatbot integration and semantic actions.\n\n## 🏗️ Architecture\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│                              SHELL APP                                      │\n│                           (Port: 3000)                                      │\n│  ┌─────────────────────────────────────────────────────────────────────┐    │\n│  │                    HEADER MFE (Component)                           │    │\n│  │                       (Port: 3001)                                  │    │\n│  └─────────────────────────────────────────────────────────────────────┘    │\n│                                                                             │\n│  ┌─────────────────┐  ┌─────────────────┐   ┌─────────────────────────┐     │\n│  │   PRODUCTS MFE  │  │   ORDERS MFE    │   │   NATASHA CHATBOT MFE   │     │\n│  │   (Full Page)   │  │   (Full Page)   │   │     (Component)         │     │\n│  │   Port: 3002    │  │   Port: 3003    │   │     Port: 3006          │     │\n│  └─────────────────┘  └─────────────────┘   │   AI Assistant with     │     │\n│                                             │   Semantic Actions      │     │\n│  ┌─────────────────────────────────────────┐└─────────────────────────┘     │\n│  │         USER PROFILE MFE (Component)    │                                │\n│  │              (Port: 3004)               │                                │\n│  │    (Embedded in Products MFE)           │                                │\n│  └─────────────────────────────────────────┘                                │\n└─────────────────────────────────────────────────────────────────────────────┘\n\n                              ┌─────────────────────┐\n                              │   JSON SERVER API   │\n                              │     (Port: 3005)    │\n                              │   User Data \u0026 More  │\n                              └─────────────────────┘\n```\n\n## 🚀 Features\n\n### Core Architecture\n\n- **5 Micro Frontends**: Shell, Header, Products, Orders, User Profile, and Natasha Chatbot\n- **Webpack Module Federation**: Dynamic runtime integration\n- **Shared Dependencies**: Optimized React sharing between MFEs\n- **Event Bus System**: Cross-MFE communication\n- **Global Context**: Shared state management\n- **JSON Server**: Mock API for development\n\n### Advanced Features\n\n- **AI-Powered Chatbot**: Natasha with semantic actions and OpenAI integration\n- **Semantic Navigation**: Natural language commands for app navigation\n- **AWS Deployment**: Production-ready S3 and CloudFront deployment\n- **Development Workflow**: Concurrent development of all MFEs\n- **Hot Module Replacement**: Fast development experience\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 17, Webpack 5, Module Federation\n- **Styling**: CSS3 with modern design patterns\n- **API**: JSON Server for mock data\n- **AI Integration**: OpenAI API for chatbot functionality\n- **Deployment**: AWS S3, CloudFront, automated deployment scripts\n- **Development**: Concurrently, Hot Module Replacement\n\n## 📦 Project Structure\n\n```\nmfe-project/\n├── shell/                    # Shell application (host)\n├── header-mfe/              # Header component MFE\n├── products-mfe/            # Products page MFE\n├── orders-mfe/              # Orders page MFE\n├── user-profile-mfe/        # User profile component MFE\n├── natasha-chatbot-mfe/     # AI chatbot component MFE\n├── docs/                    # Comprehensive documentation\n├── db.json                  # JSON server database\n├── deploy.sh               # AWS deployment script\n└── package.json            # Root package with all scripts\n```\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 16+\n- npm or yarn\n- (Optional) AWS CLI for deployment\n\n### Installation \u0026 Development\n\n1. **Clone and Install**\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd mfe-project\n   npm install\n   npm run install:all\n   ```\n\n2. **Start Development Environment**\n\n   ```bash\n   # Starts all MFEs + JSON Server concurrently\n   npm run dev\n   ```\n\n   This will start:\n\n   - Shell App: http://localhost:3000\n   - Header MFE: http://localhost:3001\n   - Products MFE: http://localhost:3002\n   - Orders MFE: http://localhost:3003\n   - User Profile MFE: http://localhost:3004\n   - JSON Server API: http://localhost:3005\n   - Natasha Chatbot MFE: http://localhost:3006\n\n3. **Individual MFE Development**\n   ```bash\n   npm run dev:shell      # Shell only\n   npm run dev:header     # Header MFE only\n   npm run dev:products   # Products MFE only\n   npm run dev:orders     # Orders MFE only\n   npm run dev:profile    # User Profile MFE only\n   npm run dev:natasha    # Natasha Chatbot MFE only\n   npm run api           # JSON Server only\n   ```\n\n## 🤖 Natasha AI Chatbot\n\nThe project includes **Natasha**, an AI-powered chatbot with semantic actions:\n\n### Features\n\n- **Natural Language Navigation**: \"Show me products\", \"Go to orders\"\n- **Context Awareness**: Knows current user and app state\n- **Semantic Actions**: Understands intent and executes actions\n- **OpenAI Integration**: Powered by GPT for intelligent responses\n- **Cross-MFE Integration**: Can trigger navigation and actions across MFEs\n\n### Setup\n\n1. Create `.env` file with your OpenAI API key:\n\n   ```bash\n   OPENAI_API_KEY=your_openai_api_key_here\n   ```\n\n2. The chatbot will be available as a floating component in the shell app\n\n## 📊 JSON Server API\n\nMock API server provides user data and can be extended for more endpoints:\n\n- **Endpoint**: http://localhost:3005\n- **User Data**: `/user` - Current user information\n- **Extensible**: Add more endpoints in `db.json`\n\n## 🚀 Production Deployment\n\n### AWS S3 + CloudFront Setup\n\n1. **Configure Environment**\n\n   ```bash\n   # Create .env file with:\n   AWS_ACCESS_KEY_ID=your_access_key\n   AWS_SECRET_ACCESS_KEY=your_secret_key\n   AWS_REGION=your_region\n   S3_BUCKET_NAME=your_bucket_name\n   CLOUD_FRONT_DISTRIBUTION_ID=your_distribution_id\n   ```\n\n2. **Deploy All MFEs**\n\n   ```bash\n   npm run deploy:all\n   ```\n\n3. **Deploy Individual MFEs**\n   ```bash\n   npm run deploy:shell\n   npm run deploy:header\n   npm run deploy:products\n   npm run deploy:orders\n   npm run deploy:profile\n   npm run deploy:natasha\n   ```\n\n\u003cstrong\u003ePlease refer to `/docs` for detailed explanation of the project.\u003c/strong\u003e\n\n**Happy Learning! 🎉**\n\nThis project covers everything you need to understand Micro Frontend architecture in a production environment, including modern AI integration patterns.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyogain123%2Fmfe-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyogain123%2Fmfe-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyogain123%2Fmfe-project/lists"}