Microfrontend listanime

A microfrontend architecture that transforms the monolithic listanime-Vuejs application into a modular, scalable system using React 18, Vue 3, and Webpack 5 Module Federation.

Architecture Overview

                    ┌──────────────────────────────────────┐
                    │         HOST (React + Webpack 5)      │
                    │         localhost:3000                │
                    │                                      │
                    │  ┌─ AnimeContext (Global State) ────┐ │
                    │  │  animeList, filters, pagination  │ │
                    │  └──────────────────────────────────┘ │
                    │                                      │
                    │  HomePage / DetailPage               │
                    │  (orchestrates remote components)    │
                    └───────┬──────────────────┬───────────┘
                            │                  │
               ┌────────────▼──────┐    ┌──────▼──────────────┐
               │  react_mfe        │    │  vue_mfe             │
               │  localhost:3001   │    │  localhost:3002      │
               │                   │    │                      │
               │  Header           │    │  Filter              │
               │  AnimeCard        │    │  AnimeDetail         │
               │  Pagination       │    │                      │
               │  Footer           │    │                      │
               └───────────────────┘    └──────────────────────┘

Component Distribution

Component	Framework	Reason
Header	React	Search with autocomplete, navigation logic
AnimeCard	React	Pure presentational component, props in / UI out
Pagination	React	Page logic with ellipsis, disabled states
Footer	React	Trivial component, consistent with shell
Filter	Vue 3	Complex dropdown logic, click-outside, checkbox grid — already proven in Vue
AnimeDetail	Vue 3	Layout with image, status badge, categories — Vue templates excel here

Project Structure

microfrontend/
├── shared/                     # Shared code (types, data fetching)
│   ├── types/anime.ts
│   └── db/db.ts
├── packages/
│   ├── host/                   # React shell application
│   ├── react-mfe/              # Remote React microfrontend
│   └── vue-mfe/                # Remote Vue 3 microfrontend
├── PLAN.md                     # Detailed implementation plan (Spanish)
├── README.md                   # This file
├── README.es.md                # Spanish version
└── AGENTS.md                   # Onboarding guide for AI agents

How It Works

Cross-Framework Communication

Since React and Vue have separate runtimes, we use a mount/update/unmount wrapper pattern with reactive prop synchronization:

React (Wrapper) ──> <div ref={containerRef} />
                         │
                         ▼
              mountFilter(divRef, props, events)
                         │
                         ▼
              reactive({...props, ...events})
                         │
                         ▼
              Vue app with h(Filter, reactiveState)
                         │
              updateProps(newProps, newEvents) ──> Object.assign(reactiveState, ...)
                                                   (preserves focus, no remount)

The Host (React) manages all global state via AnimeContext. It passes data as props to remote components and receives changes via callback events. Props are updated in-place on the reactive state, avoiding Vue app remounts and preserving input focus/UI state.

Data Flow

db.ts (fetch from GitHub)
       │
       ▼
AnimeContext (Host React)
       │
       ├──► Filter (Vue) ← props: categories, selected, values, sort, status
       │       └── events: onCategoryChange, onValueChange, ...
       │
       ├──► AnimeCard[] (React) ← props: anime
       │
       ├──► Pagination (React) ← props: currentPage, totalPages
       │       └── events: onPageChange
       │
       └──► AnimeDetail (Vue) ← props: anime, loading, error

Routing

Route	Page	Components Used
/	HomePage	Filter (Vue) + AnimeCard[] (React) + Pagination (React)
/:name	DetailPage	AnimeDetail (Vue)

Getting Started

Prerequisites

• Node.js >= 18
• npm >= 9

Installation

# Install dependencies for all packages
cd packages/host && npm install
cd packages/react-mfe && npm install
cd packages/vue-mfe && npm install

Development

Run all three applications simultaneously:

# Terminal 1 — Vue Microfrontend
cd packages/vue-mfe && npm run start       # http://localhost:3002

# Terminal 2 — React Microfrontend
cd packages/react-mfe && npm run start     # http://localhost:3001

# Terminal 3 — Host (Shell)
cd packages/host && npm run start          # http://localhost:3000

Open http://localhost:3000 in your browser.

Note: Start the remotes (vue-mfe, react-mfe) before the host so the remoteEntry.js files are available.

Key Features

• Modular architecture — Each microfrontend can be developed, tested, and deployed independently
• Cross-framework — React and Vue 3 coexisting via Module Federation
• Shared state — Centralized AnimeContext in the Host with props/events bridge to Vue
• Tailwind CSS v4 — Consistent dark theme across all microfrontends
• TypeScript — Type safety across all packages
• Scalable — New teams can add new microfrontends without touching existing code

Microfrontend Boundaries

Microfrontend	Team	Tech Stack	Can deploy independently?
Host (Shell)	Platform	React + Webpack 5	Yes
react-mfe	Team React	React + Webpack 5	Yes
vue-mfe	Team Vue	Vue 3 + Webpack 5	Yes

📄 License

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

---

👨‍💻 Author / Autor

Diego Ivan Perea Montealegre

• GitHub: @diegoperea20

---

Created by Diego Ivan Perea Montealegre